JavaScript 에센셜 | 위니북스

조건문

1. 조건문

프로그래밍에서 조건문은 특정 상황에 따라 코드의 실행 흐름을 제어하는 핵심 문법입니다. 일상생활에서 "만약 신호등이 초록불이면 길을 건너고, 빨간불이면 멈추자"와 같은 결정을 내리듯이, 프로그램에서 다양한 상황에 따라 작업을 실행하기 위해서 조건문을 사용합니다.

조건문을 사용하면 조건에 따른 다양한 작업을 수행할 수 있습니다. 예를 들어, 사용자가 로그인을 했는지에 따라 다른 화면을 보여주거나, 쇼핑몰에서 특정 옵션을 만족하는 상품만을 필터링할 때, 조건문이 유용하게 사용됩니다.

1.1. if 문

가장 기본적인 조건문으로, 조건이 참(true)으로 평가될 때, 코드 블록을 실행합니다.

if (조건) {
  // 조건이 참일 때 실행될 코드
}

if (조건) {
  // 조건이 참일 때 실행될 코드
}

if (true) { console.log('true'); // 이 코드는 항상 실행됩니다. } let hour = 9; if (hour < 10) { console.log('좋은 아침입니다!'); // 이 코드는 hour가 10보다 작을 때 실행됩니다. }

중괄호 생략
중괄호 안의 코드가 한 줄만 있다면 중괄호를 다음과 같이 생략하여 한 줄로 작성할 수 있습니다.

if (true) console.log('중괄호를 생략했습니다.');

if (true) console.log('중괄호를 생략했습니다.');

하지만 코드의 가독성과 일관성, 그리고 향후 유지보수를 위해 중괄호 사용을 권장합니다. 특히 팀 프로젝트에서는 코드 스타일의 일관성이 중요합니다. 짧은 코드가 항상 좋은 코드인 것은 아닙니다.

true인 값(truthy), false인 값(falsy)
다음 코드를 읽고 출력 결과를 예측해보세요. 안녕하세요 weniv님!이 출력이 될까요? 아니면 아무 것도 출력이 되지 않을까요?

const name = 'weniv'; if (name) { console.log('안녕하세요 ' + name + '님!'); }

코드를 실행해보면 콘솔창에 안녕하세요 weniv님!이 출력됩니다. 하지만 조건식으로 사용된 name은 true 값이 아닌 문자열 타입의 값인 것을 알 수 있습니다. 자바스크립트에서는 조건식이 boolean 타입이 아니어도 됩니다. 자바스크립트는 조건식에 사용되는 값을 자동으로 true 또는 false로 변환하여 평가합니다.

truthy: 빈 문자열을 제외한 문자열, 0과 NaN을 제외한 숫자, 객체, 배열, true
falsy: 빈 문자열(''), 0과 -0, NaN, null, undefined, false

1.2. if...else 문

조건이 참일 때는 특정 코드를 실행하고, 조건을 만족하지 않았을 때는 다른 코드를 실행해야 하는 경우가 있습니다. 이러한 상황에서 사용하는 것이 바로 else문입니다. else문은 단독으로 사용할 수 없으며 반드시 if문과 함께 사용해야 합니다. if문의 조건이 거짓일 때 else 블록 내의 코드가 실행됩니다.

if (조건) {
  // 조건을 만족했을 때 실행될 코드
} else {
  // 조건을 만족하지 않았을 때 실행될 코드
}

if (조건) {
  // 조건을 만족했을 때 실행될 코드
} else {
  // 조건을 만족하지 않았을 때 실행될 코드
}

const x = 5; const y = 10; if (x == y) { console.log('x와 y가 같습니다.'); } else { console.log('x와 y가 다릅니다.'); }

1.3. if...else if...else 문

여러 조건으로 분기 처리를 해야할 때는 if...else문을 중복해서 사용하지 않고 else if문을 사용합니다. if...else if...else문을 사용하면 순차적으로 조건을 검사하여 조건을 만족하는 코드 블록을 실행합니다.

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

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

else if를 사용하여 점수에 따라 학점을 부여하는 로직을 구현할 수 있습니다. 주의할 점은 else if도 else와 마찬가지로 반드시 if와 함께 사용해야 하는 것입니다.

score을 변경하면서 코드를 실행해보면, 조건식을 위에서 아래로 순차적으로 검사하여 가장 먼저 만족하는 조건에 해당하는 코드 블록이 실행되는 것을 확인할 수 있습니다. 먼저 if문의 조건식을 평가하고, 이 조건이 거짓일 경우에만 다음 else if문의 조건식을 평가하게 됩니다. 따라서 첫 번째 else if문의 조건식은 90 > score >= 80을 의미하게 됩니다. 조건을 만족하는 경우에는 해당 블록의 코드가 실행되고 조건문이 종료되며, 조건을 모두 만족하지 않을 때 else문의 코드 블록이 실행됩니다. else if를 사용하면 여러 조건에 따른 분기 처리를 명확하고 효율적으로 구현할 수 있습니다.

2. switch 문

switch문은 하나의 표현식을 여러 케이스와 비교하여 일치하는 경우에 해당하는 코드 블록을 실행합니다. 여러 개의 if...else if 문을 대체할 수 있어 가독성을 높이는 장점이 있습니다. 모든 케이스가 일치하지 않는 경우에는 default 문의 코드 블록을 실행합니다.

switch (표현식) {
  case 값1:
    // 값1에 대한 실행 코드
    break;
  case 값2:
    // 값2에 대한 실행 코드
    break;
  ...
  default:
    // 모든 case에 해당하지 않을 때 실행될 코드
    break;
}

switch (표현식) {
  case 값1:
    // 값1에 대한 실행 코드
    break;
  case 값2:
    // 값2에 대한 실행 코드
    break;
  ...
  default:
    // 모든 case에 해당하지 않을 때 실행될 코드
    break;
}

케이스 평가 방식 switch 문에서 일치하는 케이스는 (1)값이 일치하거나 (2)조건식이 만족하는 경우에 해당합니다. 이 때, 표현식과 case 값의 비교는 **엄격한 비교(일치 연산)**로 수행됩니다. 조건식이 true값과 타입이 일치하는 경우에만 해당 케이스로 분기처리가 됩니다.

예를 들어, 요일에 따라 다른 메시지를 출력하는 코드를 작성해 보겠습니다.

console.log(new Date().getDay()); // 요일은 숫자로 표현됩니다. switch (new Date().getDay()) { case 1: console.log('월요일입니다.'); case 2: console.log('화요일입니다.'); case 3: console.log('수요일입니다.'); case 4: console.log('목요일입니다.'); case 5: console.log('금요일입니다.'); default: console.log('주말입니다.'); }

2.1. break

break문은 switch문에서 중요한 역할을 합니다. 위의 코드처럼 break가 없다면, 조건이 참인 case 이후 조건 평가 없이 모든 코드를 실행합니다. 이 현상을 fall through라고 합니다. 이를 방지하기 위해 각 case 뒤에 break를 추가해야 합니다. break를 만나면 switch문을 빠져나오게 됩니다. break를 추가하여 코드를 수정해보겠습니다.

let today; switch (new Date().getDay()) { case 1: today = "월요일"; break; case 2: today = "화요일"; break; case 3: today = "수요일"; break; case 4: today = "목요일"; break; case 5: today = "금요일"; break; case 6: case 0: today = "주말"; break; default: today = null; } console.log(today ? `${today}입니다.` : `요일을 찾을 수 없습니다.`);

2.2. default

switch문에는 default문을 추가할 수 있습니다. default문은 모든 case에 해당하지 않을 때 실행됩니다. default는 필수가 아닌 선택사항입니다.

let menu = '아메리카노'; // 메뉴를 바꿔보세요! switch (menu) { case '아메리카노': console.log('아메리카노를 주문했습니다!'); break; case '카페라떼': console.log('카페라떼를 주문했습니다!'); break; case '바닐라라떼': console.log('바닐라라떼를 주문했습니다!'); break; case '콜드브루': console.log('콜드브루를 주문했습니다!'); break; default: console.log('없는 메뉴를 고르셨습니다. 다시 주문해주세요.'); }

2. 삼항 연산자 (Conditional ternary operator)

삼항 연산자는 if-else문을 더 간결하게 표현할 수 있는 조건부 연사자입니다. 주로 간단한 조건식에서 사용되며, 코드를 한 줄로 작성할 수 있습니다.

조건식 ? (조건식이 참일 때 실행되는 코드) : (조건식이 거짓일 때 실행되는 코드)

조건식 ? (조건식이 참일 때 실행되는 코드) : (조건식이 거짓일 때 실행되는 코드)

조건식이 참이면 콜론(:) 앞의 코드가 실행되고, 조건식이 거짓이면 콜론 뒤의 코드가 실행됩니다. 또한 삼항 연산자는 값으로 사용될 수 있기 때문에 변수에 할당할 수 있습니다.

let item = true ? 'apple' : 'gold'; console.log(item); // apple

if문과 삼항 연산자의 차이

삼항 연산자는 표현식으로 값을 반환하고 변수에 할당할 수 있습니다.
if문은 문(statement)으로 코드 블록을 실행하고, 값의 반환은 하지 않습니다.

삼항 연산자는 중첩하여 사용할 수 있으며, 조건에 따라서 다양한 값을 반환할 수 있습니다. 아래 코드는 시험 점수에 따라 학점을 반환하는 코드입니다. if문으로 작성했던 코드와 비교하여 삼항 연산자를 이용하면 코드를 가볍게 만들 수 있습니다. 하지만 삼항 연산자가 여러 조건을 비교하여 중첩될 경우 가독성이 떨어질 수 있습니다.

let score = 85;
let grade =
  score >= 90
    ? 'A'
    : score >= 80
    ? 'B'
    : score >= 70
    ? 'C'
    : score >= 60
    ? 'D'
    : 'F';
 
console.log(`당신의 학점은 ${grade}입니다.`);

let score = 85;
let grade =
  score >= 90
    ? 'A'
    : score >= 80
    ? 'B'
    : score >= 70
    ? 'C'
    : score >= 60
    ? 'D'
    : 'F';
 
console.log(`당신의 학점은 ${grade}입니다.`);