혼자 공부하는 자바스크립트 3장 - 조건문

조건문

위에서 아래로 차례차례 실행되는 게 아니라, 조건에 따라 코드를 실행할 수도 있고 실행하지 않을 수 있다.

 

if 조건문

if(불 값이 나오는 표현식) {
    불 값이 참일 때 실행할 문장
}

오전과 오후를 구분하기:

const date = new Date();
const hour = date.getHours();

if (hour < 12) {
    // 12시 이전 오전일 때 실행
    alert("오전입니다.");
}

if (hour >= 12) {
    // 12시 이후 오후일 때 실행
    alert("오후입니다.")
}

 

if else 조건문

위의 예시에서 오전과 오후처럼 서로 반대되는 조건의 경우 else 구문을 활용한다.

else 구문은 if 조건문 바로 뒤에 붙여서 사용하고, 이를 조합한 조건문을 if else 조건문이라고 부른다.

if(불 값이 나오는 표현식) {
    불 값이 참일 때 실행할 문장
} else {
    불 값이 거짓일 때 실행할 문장
}

오전과 오후를 구분하기:

const date = new Date();
const hour = date.getHours();

if (hour < 12) {
    // 12시 이전 오전일 때 실행
    alert("오전입니다.");
} else {
    //12시 이후 오후일 때 실행
    alert("오후입니다.");
}

 

중첩 조건문

조건문 안에 조건문을 중첩해 사용하는 것.

if (불 값이 나오는 표현식 1) {
    // 표현식 1이 참일 때 실행
    if (불 값이 나오는 표현식 2) {
        표현식 2가 참일 때 실행할 문장
    } else {
        표현식 2가 거짓일 때 실행할 문장
    } 
} else {
    // 표현식 1이 거짓일 때 실행
    if (불 값이 나오는 표현식 3) {
        표현식 3이 참일 때 실행할 문장
    } else {
        표현식 3이 거짓일 때 실행할 문장
    }
}

시간 파악하기:

const date = new Date();
const hour = date.getHours();

if (hour < 11) {
    alert("아침 먹을 시간입니다.")
} else {
    if (hour < 15) {
        alert("점심 먹을 시간입니다.")
    } else {
        alert("저녁 먹을 시간입니다.")
    }
}

 

if else if 조건문

중첩 조건문에서 중괄호를 생략한 형태.

겹치지 않는 3가지 이상의 조건으로 나눌 때 사용한다.

if (불 표현식) {
    문장
} else if (불 표현식) {
    문장
} else if (불 표현식) {
    문장
} else {
    문장
}

시간 파악하기:

const date = new Date();
const hour = date.getHours();

if (hour < 11) {
    alert("아침 먹을 시간입니다.")
} else if (hour < 15) {
    // hour < 11이 거짓이므로 11 < hour < 15로 적지 않아도 된다.
    alert("점심 먹을 시간입니다.")
} else {
    alert("저녁 먹을 시간입니다.")
}

 

switch 조건문과 짧은 조건문

switch 조건문

switch(자료) {
    case    // 조건 A
        break;
    case    // 조건 B
        break;
    default:    // 생략 가능
        break;
}

break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용한다.

코드를 실행하다가 break 키워드를 만나면 해당 키워드를 감싼 switch 조건문이나 반복문을 완전히 빠져나간다.

const input = Number(prompt('숫자를 입력하세요.', '숫자'))

switch (input % 2) {
    case 0:
        alert("짝수입니다.");
        break;
    case 1:
        alert("홀수입니다.");
        break;
    default:
        alert("숫자가 아닙니다.");
        break;
}

const date = new Date();
const hour = date.getHours();
// 12시라고 가정

switch(true) {
    case hour < 11;        // false이므로 실행되지 않는다
        alert("아침 먹을 시간입니다.")
        break;
    case hour < 15;        // true이므로 실행된다.
        alert("점심 먹을 시간입니다.")
        break;            // 조건문 종료
    default:
        alert("저녁 먹을 시간입니다.")
        break;
}

 

조건부 연산자

불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과

유일하게 항을 3개 갖는 연산자여서 삼항 연산자라고도 한다.

const input = prompt("숫자를 입력해주세요.", "");
const number = Number(input);

const result = (number >= 0) ? "0 이상의 숫자입니다." : "0보다 작은 숫자입니다.";
alert(result);

 

짧은 조건문

자바스크립트는 짧은 조건문에서 참, 거짓임이 명확할 경우 뒷 조건을 실행하지 않는 것을 이용한다.

논리합 연산자를 사용한 짧은 조건문

true || console.log("실행될까요?");        // true
false || console.log("실행될까요?");        // "실행될까요?" / undefined

첫번째 문장의 좌변 true가 항상 참이므로, 논리합 결과는 항상 참이다. 이 경우 우변 console.log를 실행하지 않는다.

반면 두번째 문장의 좌변 false는 항상 거짓이므로, 논리값을 판단하기 위해 우변 console.log까지 실행한다.

 

논리곱 연산자를 사용한 짧은 조건문

false && console.log("실행될까요?");        // false

첫번째 문장의 좌변 false가 항상 거짓이므로, 논리곱 결과는 항상 거짓이다. 이 경우 우변 console.log를 실행하지 않는다.