JS의 조건문 파헤치기

2020년 10월 30일
조건문은 프로그램의 흐름을 결정하는 아주 중요한 문법이다.
그만큼 다양한 문법들을 이용하여 조건문을 작성할 수 있는데, 알아둔다면 짧은 코드를 작성하는데에 도움이 될 것이다.

1. Boolean으로 간주되는 데이터

// true로 분류되는 데이터 true 1 Infinity () => {} // 함수는 true를 치환 [] // 배열(빈 배열 포함)은 true를 치환 {} // 오브젝트(빈 오브젝트 포함)는 true를 치환 class test {} // class는 true를 치환
// false로 분류되는 데이터 false 0 // 0은 false를 치환 -1 // 음수는 false를 치환 '' // 빈 문자열은 false를 치환 let test // 값이 할당되지 않은 변수는 undefined를 치환 undefined null NaN
 

2. IF와 ELSE

// condition에는 조건이 들어감 if (condition) { // condition이 true일 경우 실행될 코드 블럭 } else { // condition이 true가 "아닐 경우"(false) 실행될 코드 블럭 } // @응용 if (condition === 1) { // test === 1이 true일 경우 실행될 코드 블럭 } else if (condition === 2) { // test === '1'이 아니고 condition === 2이 true일 경우 실행될 코드 블럭 } else { // if와 else if 모두 일치하지 않을 경우 실행되는 코드 블럭 }
일반적인 조건문은 위와 같이 작성할 수 있는데, 보통 조건(condition)이 true이거나 false일 때의 작업을 달리 할 때 사용한다.
if문은 위에서 아래로 검사하며 일치하는 조건문이 있다면 그 아래의 조건은 검사하지 않고 넘어간다.
 

3. Switch

onst str = 'abc'; switch(str) { case 'abc': alert('str is abc'); // str와 case 'abc'가 일치해 실행 break; case 'def': alert('str is def'); break; default: // 만약 일치하는 case가 없다면 실행 alert('default'); break; } const num = 1; switch(num) { case 1: alert('num is 1'); // 이 코드 블럭이 실행되고, break;가 없어 다음 case를 검사 case 2: alert('num is 2'); // 1과 2의 값은 다르지만 둘다 true로 치환되어 값이 같아 실행 break; default: alert('default'); break; }
Switch 문은 if-else가 많을 때 가끔 사용되며, switch()이 case와 일치하는지를 검사하고, 일치한다면 해당 case 코드 블럭을 실행시킨다.
만약 case 실행 후 break; 구문이 없다면 다음 case를 검사하는 방식으로 진행된다.
만약 일치하는 case가 하나도 없다면 default 구문이 실행된다.
정수형 값을 정확히 구별해내기 어려워 문자열 데이터를 사용할 때 사용한다.

4. 삼항 조건 연산자

condition ? true : false;
const state = 1; const name = '이안' const test = `my name is ${state ? name : 'unknown'}.`; console.log(test); // "my name is 이안." // @응용 function testValue(a, b) { const state = { message: 'hello world!' }; return a > b ? state : false; } testValue(2, 1) // { message: 'hello world!' }; testValue(1, 2) // false;
삼항 조건 연산자는 위와 같이 사용하며, 굳이 true나 false를 저장하지 않아도 괜찮은 상황에서 많이 사용된다.
혹은 간단하게 true와 false에 대한 결과를 다르게 전달할 때 사용한다.