[4기]10일차 Java Script 배우기2 (조건문,반복문)

오늘의 수업! 

 

자바 스크립트 조건문과 반복문에 대해 배웠다.

 

 

조건문 : 

조건식이 참(true) 값이나 거짓(false)

 

가장 많이 사용하는 문법이 if !! 

 

if문에 대해 배우고 

 

강사님께서 내주신 문제 :

 

나이를 입력하는데 18세 이상은 안녕하세요. 

나이가 10세 이상은 안녕! 반가워 꼬마친구!

10세미만은 부럽다.. 라는 것을 if로 만들어 보는것! 

 

그리하여, 만든 코드!

 

const age = parseInt(prompt("나이를 입력해주세요!"));
//자바스크립트는 ex) 50 숫자이자 문자열 (암묵적형변환)
    if (age >= 18){
        console.log("안녕하세요")
    }
        else if(age >=10){
        console.log("안녕! 반가워 꼬마친구!")
    }
        else{
        console.log("부럽다...")
    }

 

실행하였을때는!?

 

 

이런 창이 뜨고!

 

21을 입력했을 때,

 

 

안녕하세요를 볼 수 있다 ㅎㅎ

(신기신기)

 

if 문 2번째 문제 : 

 

성적을 입력하였을 때, 90점 이상은 A

80점이상은 B 70점이상은 C 60점 이상은 D

나머지는 강해져서 돌아와라 로 만들어보기 

 

const grade = prompt("성적을 입력해주세요!");
if(grade >= 90){
    console.log("A")
}else if(grade >= 80){
    console.log("B")
}else if(grade >= 70){
    console.log("C")
}else if(grade >= 60){
    console.log("D")
}else {
    console.log("강해져서 돌아와라")
}

 

요렇게! 만들었답니다 ㅎㅎㅎ

 

확실히 배우고 적어보니깐 

이해도 쉽게 되고 재밌는거 같아요 흥미가 생긴달까? ㅎㅎㅎ신기해서옄ㅋㅋㅋ~

 

그리고 이것을 간단하게 표현하는 삼항 연산자에 대해 배웠어요!

 

Let item = true? 100 : 200;

이런 문법인데 처음엔 이게 뭔가 싶었지만

 

true일때는 100 아니면 200 이라는 소리! ㅋㅋㅋ 

if랑 같지만 확실히 짧아진모습을 보인답니다 ㅎㅎ

어제 배운것처럼 이걸 너무 쓰면 가독성이 떨어지겠죱? ㅎㅎㅎㅎ 

 

삼항 연산자를 이용하여 성적 표시해주는 코드를 다시 짜보면?

 

// const result = / console.log 감싸주면 됨!
const grade = prompt("성적을 입력해주세요!");
(grade >= 90)?console.log("A"):(grade >= 80)?console.log("B"):
    (grade >= 70)?console.log("C"):(grade >= 60)?console.log("D"):
        console.log("강해져서 돌아와라");

 

이렇게 간결해지는 모습이 나옵니다 ㅎㅎ 

조건문? 참: 아닐경우조건? 참 : 아닐경우 조건? :참 식으로 이어지면 똑같은 결과값을 

볼수있답니다!

 

Switch 문 

 

switch (new Date().getDay()) {
    case 1:
        document.write('월요일입니다.');
        break;
    case 2:
        document.write('화요일입니다.');
        break;
    case 3:
        document.write('수요일입니다.');
        break;
    case 4:
        document.write('목요일입니다.');
        break;
    case 5:
        document.write('금요일입니다.');
        break;
    default:
        document.write('금금요일입니다. 주말이 뭐죠?');
}

 

스위치의 경우 객체 new data 함수 getday

case, break 가 보이는데 

 

case 의경우 표현식이 case의 값이랑 같은경우 case 안의 실행코드가 실행되는것인데

만약 표현식이 1이라면 실행결과는 월요일입니다 라고 표시되게 됩니다! 

 

쉽죵?

 

break 의 경우,

만약 break가 없다면? 월요일입니다에서 멈춰야하는데 계속적으로 반복되게 되는데 

이것 때문에 결과값을 받고 멈춰죠! 라는 의미를 지닙니다 ㅎㅎ

break가 없다면 스위치문을 탈출못한다는점 ㅎㅎ

 

const grade = prompt("성적을 입력해주세요!");
switch (true){
    case grade >= 90:
        console.log("A")
        break;
    case grade >= 80:
        console.log("B")
        break;
    case grade >= 70:
        console.log("C")
        break;
    case grade >= 60:
        console.log("D")
        break;
    default:
        console.log("강해져서 돌아와라");
}

 

switch를 이용한 성적표시 코드 ㅎㅎㅎ

 

다양한 방법으로 조건을 표기할 수 있는게 신기해엽 ㅎㅎ

 

뭐 전 다 처음이라 다 신기하지만 ...ㅎㅎㅎ.ㅎ.ㅎ.ㅎ..

 

반복문!

 

[ ] 을 이용하여 배열 선언을 하는데 

 

const cars = [ "BMW", "Volvo" ];

 

이렇게 선언을 한답니다 ㅎㅎ

 

그럼 배열 중 내가 Volvo만 쓸려면 빼야하는데 어떻게 빼지?

 

그럼, index를 이용하여

 

car[1] = Volvo 가 된답니다!  0부터 시작한다는점@!@@@@

 

const cars = ["BMW", "Volvo", "Saab", "Ford", "Flat", "Audi"];

let text = "";

// text = "" + "BMW"; > text += cars[0]

text += '<section><h2>' + cars[0] + '</h2></section>'
//<section><h2>BMW</h2></section>
text += '<section><h2>' + cars[1] + '</h2></section>'
//<section><h2>BMW</h2></section><section><h2>Volvo</h2></section>
text += '<section><h2>' + cars[2] + '</h2></section>'
text += '<section><h2>' + cars[3] + '</h2></section>'
text += '<section><h2>' + cars[4] + '</h2></section>'

 

for 문

const cars2 = ["BMW", "Volvo", "Saab", "Ford", "Flat", "Audi"];
let text2 = ''
for (let i = 0; i < cars2.length; i++) {
    //let i = 0 초기화식! i<cars2.length(길이) 몇개의 데이터가 들어있는지!
    text2 += '<section><h2>' + cars2[i] + '</h2></section>'
    //true 면 안에 있는 코드를 계속 실행한다. false가 될때 끝난다.
}

 

여기서 i++는 증감이기에 1에서2로 2에서 3으로 계속적으로 증가한다는 이기 때문에

변할수 없는 수인 상수 const는 선언으로 쓰면 안됩니당! 

 

let을 이용하여 i 는 0 초기화 하고 i 가 차2의 길이 즉 6보다 작을 때 실행한다는 뜻으로, 

6부터는 안에 코드실행이 멈추는 식! 즉 false 가 되면 끝낸다는 의미

 

for을 이용하여, 구구단 5단을 만들어주면?

 

for(let i = 1; i < 10; i++){
        document.write(`${5} x ${i} = ${5*i} <br>`)
    //template literals `역따옴표
}

 

이런 결과값이 보이게 된다.

i를 1로 초기화하고 i가 10보다 작을 때 5 * i 를 실행한다.

 

그럼, 1단부터 9단까지 적용할려면? 

 

for 안에 for을 이용하여 j라는 변수를 만들어 적용하면? 

쉽게 구구단을 만들 수 있다!

 

for (var i = 2; i < 10; i++) {
    for (var j = 1; j < 10; j++) {
        document.write(`${i} X ${j} = ${i*j} <br>`);
    }

이렇게! ㅎㅎㅎㅎ 이해 완료!

 

역 따옴표를 이용하게 되면 표현식이 사용가능하게 되어 편리하지만,

${}안에 표현식을 넣어서 사용하여야 한다!

 

while 문

while(조건문) {

} 

식의 문법형식이며, 

조건식이 참이면 계속이어진다. 

 

for문과 다른점은 초기식이 내부에 적지않고 

밖에 적는것 외엔 동일하다고 생각하면 된다!

 

let i = 0;
while(i <= 10){

 

이렇게 초기화를 밖에 적는다!

 

do - while 의 경우,

 

while은 참일때 계속적으로 실행되기때문에 

참이 아니라 거짓일 경우 실행 자체를 안하게 되어있다. 

 

하지만 do-while 의경우, 

무조건 1번은 실행된다. 

 

이런점이 다르다는점! 기억!

 

또한 반복문의 break 와 continue 의 적용이 있는데 

 

 break 의 경우 스위치가 동일하게 멈추는 걸 의미하고 

 

continue는 

 

for (let i = 0; i < 20; i++) {
    if (i < 13) continue;
    console.log(i + '살은 청소년입니다.');
}

 

i 변수 초기화 i 가 20보다 작을 때 실행

만약 i 가 13보다 작다면 건너 뛴다 라는 뜻 

그럼, 건너 뛰어버리면? 

 

14부터 14살은 청소년입니다. 라고 실행결과가 나온다.

 

강사님의 3번째 문제 :

 

4와 7을 건너뛰어라!

 

let i = 1;
while(i <= 10) {
    i++;
    if (i === 4) {
        continue;
    } else if (i === 7) {
        continue;
    }
    console.log(i);
}

 

while 의 초기화는 위에!

i가 10보다 작거나 같을 때 실행한다.

만약 i 가 4와 같다면 건너뛰어라

만약 7과 같다면 건너뛰어라 

라는 뜻인데 결과값을 보면?

 

 

4와 7 이 없는걸 볼 수 있죠? 

만약 i++를 위에가 아닌 맨 아래에 위치시킨다면

i ===4가 계속적으로 실행되고 건너뛰고 무한반복하는것을 볼수 있습니다!

 

 

 

타입 type

 

타입이란 두가지로 구분 되는데

 

원시 타입, 참조타입으로 구분된다.

 

원시타입이란?

 

대표적인 특징은 값이 변경불가능하다는 것인데 

 

예를 들어보면,

 

10을 변경해봐 라고 강사님께서 예시를 주셨는데

처음엔 11로 변경한다는건가? 싶었지만

 

엄연히 10과 11은 다른 숫자 이므로 변경했다고 할 수 없죠?

 

" 결론은 10이라는 데이터자체를 변경할 수는 없다 "

이것이 원시 타입이라는 것이다.

 

let str1 = 'hello';
let str2 = str1;
console.log(str2); // 'hello'

str1 = 'world';
console.log(str2);

str1에 헬로를 할당하고 

str2에 1을 할당했다 

그럼 str2는? 당연히 hello 일것이다.

그럼 str1에 world라고 변경했다면?

str2는? 여전히 hello일것이다. 

 

즉, str1의 hello의 복사본을 str2에 줬다는 의미로 이해했다.

원본이 아닌 복사본을 str2에 주고 

str1이 변하더라도 str2는 복사본 받은 그래도 hello를 보이게 된다.

 

이것이 원시 타입!

 

객체 타입 : 

객체타입의 경우 값 자체가 아닌 값의참조(위치) 를 저장한다.

처음 이게 무슨소리인교? 했닼ㅋㅋㅋㅋ

강사님의 친절한 설명으로 대강 이런 느낌인거 같았다

 

let value1 = 10;
let value2 = value1;
console.log(value2);

value1 = 20;
console.log(value2);

 

value1에 10 할당

value2에 1 할당

그럼 2는? 10이 실행되고

value1을 20으로 변경했을 때,

value2는? 20이 된다. 

 

왜 20인가?

 

객체타입의 경우 원시타입처럼 복사본을 주는 의미가 아니라 

위치를 저장하는 것이니 저장공간이 있다고 생각하면

저장공간a에 10을 줬는데 

value1이 10의 위치를 가르키고 

value2 = 1이므로 2도 1처럼 같은 공간을 가르키기 때문에 10을 나타낼것이고

공간에 있는 값이 20으로 변했기 때문에 

value2도 20을 나타낸다. 

 

즉, 값이 아니라 저장공간a 위치를 저장하는 것이 객체 타입이라는 것이다! 

 

이게 ㅁ...맞겠지? 이해하기론 이렇게 이해했는데..ㅎㅎ.. 

 

아니라면 전문가께서 댓글을 달아주시면 정말 감사할 거같다 ㅎㅎ,,

 

이렇게 오늘 조건문 반복문 타입에 대해 간략히 배웠는데,

개인적으로 여태 배운 html css보다 매우 재밌었다 ㅎㅎ

 

아직 기본을 배워서 그런지 모르겠지만,

흥미넘치는 수업이였다 !!!만족만족 

 

그리고 먼가모를 코드완성했을 때 뿌듯함? ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

점차 복잡한 코드도 적어보고 실행하는 기회가 많다고 생각하니

 

너무 기대된다 ㅎㅎ

 

오늘도 조금씩 성장할 수 있었고!

 

내일 공부도 파이팅!