본문 바로가기
  • 코딩, 허쌤이 떠먹여 줄게
FrontEnd/Javascript

6장. 조건문

by 허쌤 2026. 1. 6.

6장. 조건문

조건문이란?

조건문(Conditional Statement)은 특정 조건에 따라 다른 코드를 실행하도록 하는 제어 구조입니다. 프로그램의 흐름을 제어하는 핵심 요소입니다.


1. if 문

가장 기본적인 조건문입니다. 조건이 true일 때 코드를 실행합니다.

기본 형식

if (조건) {
    // 조건이 true일 때 실행할 코드
}

예제

let age = 20;

if (age >= 18) {
    console.log('성인입니다');
}

실행 결과

성인입니다

2. if-else 문

조건이 true일 때와 false일 때 각각 다른 코드를 실행합니다.

기본 형식

if (조건) {
    // 조건이 true일 때 실행할 코드
} else {
    // 조건이 false일 때 실행할 코드
}

예제

let age = 18;

if (age >= 20) {
    console.log('성인');
} else {
    console.log('미성년자');
}

실행 결과

미성년자

3. if-else if-else 문

여러 조건을 순차적으로 확인합니다.

기본 형식

if (조건1) {
    // 조건1이 true일 때 실행
} else if (조건2) {
    // 조건1이 false이고 조건2가 true일 때 실행
} else if (조건3) {
    // 조건1, 2가 false이고 조건3이 true일 때 실행
} else {
    // 모든 조건이 false일 때 실행
}

예제 1: 점수에 따른 등급

let score = 85;

if (score >= 90) {
    console.log('A등급');
} else if (score >= 80) {
    console.log('B등급');
} else if (score >= 70) {
    console.log('C등급');
} else {
    console.log('F등급');
}

실행 결과

B등급

예제 2: 나이에 따른 분류

let age = 25;

if (age < 13) {
    console.log('어린이');
} else if (age < 20) {
    console.log('청소년');
} else if (age < 65) {
    console.log('성인');
} else {
    console.log('노인');
}

4. 중첩 if 문

if 문 안에 또 다른 if 문을 사용할 수 있습니다.

let age = 20;
let hasLicense = true;

if (age >= 18) {
    if (hasLicense) {
        console.log('운전 가능');
    } else {
        console.log('면허가 필요합니다');
    }
} else {
    console.log('미성년자는 운전할 수 없습니다');
}

논리 연산자와 함께 사용

let age = 20;
let hasLicense = true;

if (age >= 18 && hasLicense) {
    console.log('운전 가능');
} else if (age >= 18 && !hasLicense) {
    console.log('면허가 필요합니다');
} else {
    console.log('미성년자는 운전할 수 없습니다');
}

5. switch 문

여러 값 중 하나를 선택할 때 사용합니다. if-else if를 더 간결하게 표현할 수 있습니다.

기본 형식

switch (표현식) {
    case 값1:
        // 값1과 일치할 때 실행
        break;
    case 값2:
        // 값2와 일치할 때 실행
        break;
    default:
        // 모든 case와 일치하지 않을 때 실행
}

예제 1: 요일 출력

let day = 3;

switch (day) {
    case 1:
        console.log('월요일');
        break;
    case 2:
        console.log('화요일');
        break;
    case 3:
        console.log('수요일');
        break;
    case 4:
        console.log('목요일');
        break;
    case 5:
        console.log('금요일');
        break;
    default:
        console.log('주말');
}

실행 결과

수요일

예제 2: 등급 판정

let grade = 'B';

switch (grade) {
    case 'A':
        console.log('우수');
        break;
    case 'B':
        console.log('양호');
        break;
    case 'C':
        console.log('보통');
        break;
    case 'D':
        console.log('미흡');
        break;
    default:
        console.log('F');
}

break 문의 중요성

break를 생략하면 다음 case가 계속 실행됩니다 (fall-through).

let day = 1;

switch (day) {
    case 1:
        console.log('월요일');
        // break 없음!
    case 2:
        console.log('화요일');
        break;
    default:
        console.log('기타');
}

실행 결과

월요일
화요일

의도적인 fall-through

여러 case를 같은 코드로 처리할 수 있습니다.

let month = 2;

switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log('31일');
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log('30일');
        break;
    case 2:
        console.log('28일 또는 29일');
        break;
}

6. 삼항 연산자 (조건부 연산자)

간단한 조건문을 한 줄로 표현할 수 있습니다.

기본 형식

조건 ? 값1 : 값2

예제

let age = 20;
let status = age >= 18 ? '성인' : '미성년자';
console.log(status);  // '성인'

if-else와 비교

// if-else 문
let age = 20;
let status;
if (age >= 18) {
    status = '성인';
} else {
    status = '미성년자';
}

// 삼항 연산자 (간결함)
let status2 = age >= 18 ? '성인' : '미성년자';

중첩 삼항 연산자

let score = 85;
let grade = score >= 90 ? 'A' : 
            score >= 80 ? 'B' : 
            score >= 70 ? 'C' : 'F';
console.log(grade);  // 'B'

주의: 중첩이 많으면 가독성이 떨어지므로 주의해서 사용하세요.


7. 실전 예제

예제 1: 로그인 체크

let username = 'admin';
let password = '1234';

if (username === 'admin' && password === '1234') {
    console.log('로그인 성공');
} else {
    console.log('로그인 실패');
}

예제 2: 할인 계산

let price = 10000;
let memberLevel = 'gold';  // 'bronze', 'silver', 'gold'

let discount = 0;
if (memberLevel === 'bronze') {
    discount = 0.05;  // 5%
} else if (memberLevel === 'silver') {
    discount = 0.1;   // 10%
} else if (memberLevel === 'gold') {
    discount = 0.2;   // 20%
}

let finalPrice = price * (1 - discount);
console.log(`최종 가격: ${finalPrice}원`);

예제 3: 시간대별 인사

let hour = 14;  // 0 ~ 23

if (hour >= 6 && hour < 12) {
    console.log('좋은 아침입니다');
} else if (hour >= 12 && hour < 18) {
    console.log('좋은 오후입니다');
} else if (hour >= 18 && hour < 22) {
    console.log('좋은 저녁입니다');
} else {
    console.log('안녕히 주무세요');
}

예제 4: 윤년 판단

let year = 2024;

if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    console.log(`${year}년은 윤년입니다`);
} else {
    console.log(`${year}년은 평년입니다`);
}

8. truthy와 falsy

자바스크립트에서는 조건문에서 true/false 외에도 다른 값들이 조건으로 사용될 수 있습니다.

falsy 값 (false로 평가되는 값)

if (false) {}
if (null) {}
if (undefined) {}
if (0) {}
if (-0) {}
if (NaN) {}
if ('') {}  // 빈 문자열

truthy 값 (true로 평가되는 값)

if (true) {}
if ({}) {}        // 빈 객체
if ([]) {}        // 빈 배열
if ('0') {}       // 문자열 '0'
if ('false') {}   // 문자열 'false'
if (42) {}        // 0이 아닌 숫자
if (-42) {}       // 음수

실용적인 활용

let name = '';

// name이 비어있지 않으면 출력
if (name) {
    console.log(`안녕하세요, ${name}님`);
} else {
    console.log('이름을 입력해주세요');
}

// 기본값 설정
let userName = name || '익명';
console.log(userName);

주의사항

1. 등호 연산자

// ❌ 잘못된 사용
if (x = 10) {  // 할당 연산자 (오류!)
    // ...
}

// ✅ 올바른 사용
if (x === 10) {  // 비교 연산자
    // ...
}

2. 중괄호 생략

// 중괄호 없이 사용 가능하지만 권장하지 않음
if (age >= 18)
    console.log('성인');

// 중괄호 사용 권장 (가독성, 유지보수)
if (age >= 18) {
    console.log('성인');
}

3. switch 문의 break

// break를 빼먹으면 다음 case가 실행됨
switch (day) {
    case 1:
        console.log('월요일');
        // break 없음!
    case 2:
        console.log('화요일');
        break;
}

연습 문제

  1. 나이 판단

    • 나이를 변수에 저장하고, 20세 이상이면 "성인", 그 외에는 "미성년자"를 출력하세요.
  2. 점수 등급

    • 점수를 변수에 저장하고, 90점 이상 A, 80점 이상 B, 70점 이상 C, 그 외 F를 출력하세요.
  3. 요일 출력

    • 1~7 사이의 숫자를 변수에 저장하고, switch 문을 사용하여 요일을 출력하세요.
  4. 할인 계산

    • 상품 가격과 회원 등급을 변수에 저장하고, 등급에 따라 할인율을 적용한 최종 가격을 계산하세요.
      • bronze: 5% 할인
      • silver: 10% 할인
      • gold: 20% 할인
  5. 윤년 판단

    • 연도를 변수에 저장하고, 윤년인지 판단하는 프로그램을 작성하세요.
      • 4의 배수이면서 100의 배수가 아니거나
      • 400의 배수이면 윤년

다음 장 예고

다음 장에서는 반복문(for, while)에 대해 학습합니다.

'FrontEnd > Javascript' 카테고리의 다른 글

8장. 함수  (0) 2026.01.08
7장. 반복문  (0) 2026.01.07
5장. 연산자  (0) 2026.01.06
3장. 변수와 상수  (0) 2026.01.05
4장. 데이터 타입  (0) 2025.12.30