항해 99 - JavaScript 조건문

if, else if, else 구문은 익숙하므로 정리는 스킵하도록 한다.

조건문의 중첩은 가독성과 유지보수에 악영향을 끼치므로 최대한 지양해야 한다.

 

오늘 공부하면서 너무 놀랐던건 switch와 짧은 조건문(논리합, 논리곱)이다.

switch는 지금까지 변수의 값을 비교하는 것에만 썼는데 조건문이 가능하다는 것.

짧은 조건문은 아예 본 적도 없는 문법이라 이해하는데 많은 시간이 걸렸다.

또한, javascript에서만 쓰이는 문법은 아니지만 falsy, truthy라는 용어는 처음 들었기 때문에 한번 정리해보려고 한다.

 

1. switch 문

사실 switch문은 python에 없는 문법이지만 정말 잠시 java를 공부했던 적이 있어서 친근하게 다가왔다.

그 때는 변수에 할당된 값만 비교했었는데 조건문도 사용할 수 있는 예제를 보고 박수를 쳤다.

1-1. case에 조건문 넣기

// 월을 입력받고 1 ~ 4분기 확인하기
let month = Number(prompt("월을 입력하시오.", "월"))

switch (true) {
    case month < 4 :
        console.log("1분기 입니다.")
        break
    case month < 7 : console.log("2분기 입니다."); break;
    case month < 10 : console.log("3분기 입니다."); break;
    case month < 13 : console.log("4분기 입니다."); break;
    default : console.log("월이 아닙니다."); break;  // default는 생략 가능
}

1-2. switch 자료에 식 넣기

// 숫자를 입력받아 짝수, 홀수 구분
let num = Number(prompt("숫자를 입력하시오.", "숫자"))

switch (num % 2 === 0) {
    case 0: alert("짝수입니다."); break;
    case 1: alert("홀수입니다."); break;
}

 

2. truthy & falsy

다른 언어에서도 쓰이는 문법이지만 처음 보는 용어이기에 정리하고 넘어가자.

truthy : 참이라고 생각하는 값

falsy: 거짓이라고 생각하는 값

내가 기억해야할 것은 falsy => 0, 빈 문자열 "", null, undefined, NaN

console.log("") 와 alert("") 같은 함수는 undefined로 받아드리므로 falsy 취급

 

3. 짧은 조건문(논리합, 논리곱)

짧은 조건문이라고 썼지만 if문 대신 쓰는건 가독성을 이유로 지양

3-1. 논리합 연산자(OR , ||)

OR 연산자는 다음 순서에 따라 첫 번째 truthy를 찾으며 연산 수행

result = value1 || value2 || value3

1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 평가
2. 각 항을 boolean형으로 변환하여 변환한 값이 true이면 해당 항의 값을 반환
3. 모두 false로 평가되는 경우, 마지막 피연산자 반환

// 예시
alert(1 || 0);  // 1 (1:truthy)

alert(alert(1) || 2 || alert(3));  // 1 2
                                   // 왼쪽부터 차례로 수행하므로 alert(1)먼저 출력
                                   // alert(1)은 undefined이므로 두 번째 항을 평가
                                   // 두 번째 항은 truthy이므로 2를 출력하고 정지

3-2. 논리곱 연산자(AND, &&)

AND 연산자는 다음 순서에 따라 첫 번째 falsy를 찾으며 연산 수행

result = value1 && value2 && value3;

1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 평가
2. 각 항을 boolean형으로 변환하여 변환한 값이 false이면 해당 항의 값을 반환
3. 모두 true로 평가되는 경우, 마지막 피연산자 반환

alert(3 && undefined && 5)  // undefined

// &&가 ||보다 우선순위가 높다
console.log("" || 5 && 29 || "참")  // 29
                                    // &&를 먼저 연산하면 29 -> "" || 29 || "참"
                                    // ""가 false기 때문에 두 번째 항으로 넘어감
                                    // 두 번째 항인 29는 true이므로 반환하고 정지