조건식의 결과에 따라 별도의 명령을 실행하는 제어문이다. JavaScript는 다양한 종류의 조건문을 지원한다.

조건식

조건문을 수행하기 위해서는, 먼저 조건식을 작성할 수 있어야 한다. 조건식의 계산 결과가 참(true), 거짓(false)이냐에 따라 실행문이 달라지는 것이 조건문의 핵심이다.

Boolean

조건식의 계산 결과인 true, false를 Boolean 데이터 타입이라고 한다.

비교 연산자를 사용한 조건식

비교 연산자는 두 값 간의 관계를 비교하여 Boolean 값을 반환한다. 크기를 비교하는 <≤, >, ≥ 비교 연산자도 있으며 쉬우니까 넘어간다.

• == (등호): 값이 같으면 true를 반환한다.
Copy

let a = 5;
let b = "5";
console.log(a == b); // true

• === (일치 연산자): 값과 데이터 유형이 같아야 true를 반환한다.
Copy

let a = 5;
let b = "5";
console.log(a === b); // false

• !=(부등호) 및 !==(불일치 연산자): 값이 다르면 true를 반환한다.
Copy

let a = 5;
let b = "5";
console.log(a != b); // false
console.log(a !== b); // true

논리 연산자를 사용한 조건식

논리 연산자는 Boolean 값들 간의 조합을 수행하여 새로운 Boolean 값을 반환한다.

• && (AND): 두 조건이 모두 true일 때만 true를 반환한다.
Copy

let x = 10;
let y = 5;
console.log(x > 5 && y < 5); // false

• || (OR): 두 조건 중 하나 이상이 true이면 true를 반환한다.
Copy

let a = 3;
let b = 7;
console.log(a < 5 || b > 5); // true

• ! (NOT): 주어진 조건을 부정한다. true는 false로, false는 true로 변환된다.
Copy

let isFriday = true;
console.log(!isFriday); // false

조건문

if

가장 기존적인 형태의 조건문이다. 주어진 조건이 true일 경우 블록 안의 코드가 실행된다.

if (조건) {
	// 조건이 참일 때 실행되는 코드. 거짓이면 실행하지 않음
}

if / else

if문과 함께 사용되며 주어진 조건식이 true이면 if문의 코드 블록이 실행되고, false이면 else 코드 블록이 실행된다.

if (조건) {
	// 조건이 참일 때 실행되는 코드
} else {
	// 조건이 거짓일 때 실행되는 코드
}

Example:

var x = 10;
var y = 20;

if (x > y) {
	console.log('x는 y보다 큽니다.');
} else {
	console.log('x는 y보다 작습니다.');
}

if / else if / else

여러 개의 else if문을 통해 다양한 조건식을 처리할 수 있다. 단, 하나의 조건문 안에서 if문과 else문은 한 번만 사용할 수 있다.

if (조건1) {
    // 조건1이 참일 때 실행되는 코드.
} else if (조건2) {
    // 조건2가 참일 때 실행되는 코드
} else {
    // 모든 조건이 거짓일 때 실행되는 코드
}

Example:

var num = 20;

if (num < 10) {
	console.log('입력한 숫자는 10보다 작습니다.');
} else if (num === 10) {
	console.log('입력한 숫자는 10입니다.');
} else {
	console.log('입력한 숫자는 10보다 큽니다.');
}

🎯 if문 2개를 쓰나, if + else if문을 쓰나 똑같은 것 아닌가?

• if 2개: if문은 독립적으로 실행되며, 두 조건이 모두 참일 경우 두 블록 모두 실행된다. 첫 번째 if문이 참이던 아니든 두 번째 if문도 항상 실행된다.
• if + else if if문의 조건식이 true이면 else if 블록은 실행되지 않는다.

따라서, 상황에 따라 사용해야 할 조건을 선택하면 된다. 만약 두 조건이 독립적으로 평가되어야 하고 두 블록이 모두 실행되어야 할 경우 if문 2개를 사용하면 된다. 하지만 두 조건 중 하나만 실행되어야 할 경우 if + else if문을 사용하는 것이 더 적절하다.

switch

여러 가지 경우에 대한 분기 처리를 간결하게 구현할 수 있다. 표현식을 평가한 후, 그 값과 case 레이블의 값을 비교해서 일치하는 case의 명령문을 실행한다. 만약, 일치하는 레이블을 찾지 못했으면 default절을 탐색한다. break는 case의 명령문을 실행한 후에 프로그램이 switch의 밖으로 나가도록 합니다.

switch (표현식) {
    case 값1:
        // 표현식이 값1과 일치할 때 실행할 코드
        break;
    case 값2:
        // 표현식이 값2와 일치할 때 실행할 코드
        break;
    // 추가적인 case 문들
    default:
        // 모든 case에 일치하지 않을 때 실행할 코드
}

Example:

let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "Sunday";
        break;
    case 2:
        dayName = "Monday";
        break;
    case 3:
        dayName = "Tuesday";
        break;
    // ... 다른 요일에 대한 case들을 추가할 수 있음
    default:
        dayName = "Unknown day";
}

console.log(dayName); // 출력: "Tuesday"

변수 day의 값에 따라 다른 dayName을 설정하는 switch문이다. 변수 day의 값이 3이므로 dayName의 값은 Tuesday가 된다.

삼항 연산자

조건문을 간단하게 표현할 수 있는 연산자이다. 이 연산자는 3개의 피연산자를 가지며, 조건식의 결과에 따라 두 개의 값 중 하나를 선택하여 반환한다.

조건식 ? 참일 때의 값 : 거짓일 때의 값

Example:

/** 삼항 연산자 **/
let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result); // 크다

/** 중첩된 삼항 연산자 **/
let age = 25;
let message = (age >= 20) ? "성인" : (age >= 18) ? "청소년" : "어린이";
console.log(message); // 성인

정리

1. 상황에 맞는 조건문을 선택하면 된다.
2. 조건이 많아질수록 if-else문 대신 switch문으로 작성하는 것이 더 효율적으로 동작하고 가독성도 좋은 것 같다.
3. 삼항 연산자는 간단한 조건문을 한 줄로 표현할 때 유용하다. 복잡한 조건문이라면 if-else문이나 switch문을 사용하는 것이 가독성에 더 좋을 것 같다.