누구나 로고
オンライン講座企業・団体研修ライブラリトレンドインサイト無料コースお知らせお問い合わせ採用サイト
모든 강의를 무료로 볼 수 있어요. 회원가입 없이도 학습 가능합니다.
로그인무료 회원가입
강좌자바스크립트 기초 30강 — 웹을 움직이는 언어7강

7강 / 전체 8강

조건문

10분 읽기 조회 1

if/else if/else, switch, 삼항 연산자를 활용해 프로그램 흐름을 제어하는 조건문 완전 정복. Truthy/Falsy 활용 패턴과 조건 중첩 설계까지 다룹니다.

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

  • if, else if, else를 사용해 다양한 조건 분기를 구현할 수 있습니다.
  • switch문이 적합한 상황을 판단하고 올바르게 사용할 수 있습니다.
  • 삼항 연산자로 간결한 조건 표현식을 작성할 수 있습니다.
  • Truthy/Falsy를 활용한 실전 조건 패턴을 이해하고 적용할 수 있습니다.

🔀 왜 조건문이 필요한가

이 섹션에서는 조건문의 역할과 프로그래밍에서 왜 분기 처리가 필수적인지 살펴보겠습니다.

지금까지 작성한 코드는 위에서 아래로 순서대로 실행되었습니다. 그런데 실제 프로그램은 상황에 따라 다르게 동작해야 합니다. 로그인한 사용자와 비로그인 사용자에게 다른 화면을 보여주고, 점수에 따라 합격·불합격을 판정하고, 재고가 있을 때만 구매 버튼을 활성화하는 것처럼 말입니다.

이처럼 특정 조건(Condition)에 따라 다른 코드를 실행하도록 흐름을 제어하는 것이 조건문(Conditional Statement)입니다. 조건문은 프로그래밍의 가장 기본적인 흐름 제어 도구이며, 어떤 프로그램도 조건문 없이는 의미 있는 동작을 하기 어렵습니다.

// 조건문 없는 코드 — 항상 같은 결과
const score = 85;
console.log("점수:", score);
console.log("결과: ???");  // 합격인지 불합격인지 판단 불가

// 조건문 있는 코드 — 상황에 따라 다른 결과
if (score >= 60) {
  console.log("결과: 합격");
} else {
  console.log("결과: 불합격");
}
// 결과: 합격

💡 if · else if · else 문

이 섹션에서는 자바스크립트 조건문의 가장 기본 형태인 if문과 다중 조건 처리를 살펴보겠습니다.

if문의 기본 구조는 간단합니다. if (조건) { 실행할 코드 } 형식으로, 조건이 Truthy이면 중괄호 안의 코드를 실행하고, Falsy이면 건너뜁니다.

// 기본 if문
const temperature = 28;

if (temperature > 30) {
  console.log("매우 덥습니다. 에어컨을 켜세요.");
}
// 조건이 false이므로 아무것도 출력 안 됨

// if-else문 — 조건이 false일 때도 처리
if (temperature > 30) {
  console.log("덥습니다.");
} else {
  console.log("선선합니다.");  // 이 줄이 실행됨
}

// if-else if-else — 여러 조건 처리
const score = 78;

if (score >= 90) {
  console.log("A등급");
} else if (score >= 80) {
  console.log("B등급");
} else if (score >= 70) {
  console.log("C등급");  // score가 78이므로 이 줄 실행
} else if (score >= 60) {
  console.log("D등급");
} else {
  console.log("F등급");
}

else if는 앞선 조건이 모두 false일 때만 검사합니다. 위 예제에서 score가 78이면 첫 번째 조건(score >= 90)은 false, 두 번째(score >= 80)도 false, 세 번째(score >= 70)가 true이므로 "C등급"이 출력됩니다. 세 번째 조건이 맞으면 이후 else if와 else는 검사조차 하지 않습니다. 이 동작을 이해하면 조건의 순서가 결과에 영향을 준다는 점을 알 수 있습니다.

조건문 안에 또 다른 조건문을 넣는 중첩(Nesting)도 가능합니다.

const isLoggedIn = true;
const isAdmin = false;

if (isLoggedIn) {
  console.log("환영합니다!");
  if (isAdmin) {
    console.log("관리자 메뉴에 접근 가능합니다.");
  } else {
    console.log("일반 사용자 메뉴입니다.");
  }
} else {
  console.log("로그인이 필요합니다.");
}

중첩 조건문은 복잡한 로직을 표현할 수 있지만, 너무 깊게 중첩되면 코드를 읽기 어려워집니다. 보통 3단계 이상 중첩은 구조를 재설계하는 것이 좋습니다. 이 강의 후반에서 더 나은 패턴을 소개합니다.

🔄 switch 문

이 섹션에서는 하나의 값을 여러 경우와 비교할 때 유용한 switch문을 살펴보겠습니다.

switch문은 하나의 변수나 표현식을 여러 가지 경우(case)와 비교할 때 사용합니다. if-else if를 여러 개 연결하는 것보다 가독성이 좋을 때가 있습니다.

const day = "월요일";

switch (day) {
  case "월요일":
    console.log("한 주의 시작입니다.");
    break;  // ← 필수! 없으면 다음 case로 계속 실행
  case "화요일":
  case "수요일":
  case "목요일":
    console.log("평일입니다.");
    break;
  case "금요일":
    console.log("불금입니다!");
    break;
  case "토요일":
  case "일요일":
    console.log("주말입니다.");
    break;
  default:  // 모든 case에 해당하지 않을 때
    console.log("알 수 없는 요일입니다.");
}
// 출력: 한 주의 시작입니다.

switch문에서 가장 중요한 것은 break입니다. break가 없으면 해당 case를 실행한 뒤 아래 case들도 계속 실행됩니다(이것을 fall-through라고 합니다). 위 예제에서 "화요일", "수요일", "목요일"을 break 없이 연속으로 쓴 것은 의도된 fall-through입니다. 세 요일 모두 같은 메시지를 출력하게 합니다. switch는 ===(일치 연산자)로 비교하므로 타입까지 정확히 맞아야 합니다.

switch와 if-else if 중 어느 것을 사용할지는 상황에 따라 다릅니다. 단순히 하나의 값을 여러 고정된 경우와 비교할 때는 switch가 읽기 쉽고, 범위 조건(score >= 90처럼)이나 복잡한 논리 조건은 if-else if가 더 적합합니다.

⚡ 삼항 연산자와 간결한 조건 표현

이 섹션에서는 조건문을 한 줄로 표현하는 삼항 연산자와 실전에서 자주 쓰이는 간결한 조건 패턴을 살펴보겠습니다.

삼항 연산자(Ternary Operator)는 조건문을 표현식으로 축약한 것입니다. 조건 ? 참일 때 값 : 거짓일 때 값의 형식을 가집니다.

// if-else를 삼항 연산자로 변환
const age = 20;

// if-else 방식
let status;
if (age >= 18) {
  status = "성인";
} else {
  status = "미성년자";
}

// 삼항 연산자 방식 — 더 간결
const status2 = age >= 18 ? "성인" : "미성년자";
console.log(status2);  // "성인"

// 템플릿 리터럴과 결합
console.log(`현재 상태: ${age >= 18 ? "성인" : "미성년자"}`);

// 삼항 연산자 중첩 — 가독성 주의
const score = 78;
const grade = score >= 90 ? "A" :
              score >= 80 ? "B" :
              score >= 70 ? "C" :
              score >= 60 ? "D" : "F";
console.log(grade);  // "C"

삼항 연산자는 간단한 조건에서 코드를 간결하게 만들어줍니다. 특히 변수에 조건에 따른 값을 초기화할 때 유용합니다. 그러나 중첩해서 사용하면 오히려 읽기 어려워질 수 있으므로, 중첩은 2단계 이하로 제한하고 복잡한 경우는 if-else if를 사용하는 것이 좋습니다.

자바스크립트에서는 Truthy/Falsy를 활용한 간결한 조건 패턴도 자주 사용됩니다.

// Truthy/Falsy 활용 패턴
const userName = "홍길동";

// 변수 존재 여부 확인
if (userName) {
  console.log(`안녕하세요, ${userName}님!`);
} else {
  console.log("로그인이 필요합니다.");
}
// userName이 빈 문자열, null, undefined이면 else 실행

// 배열/객체 존재 여부
const items = [1, 2, 3];
if (items.length) {
  console.log("항목이 있습니다.");
} else {
  console.log("항목이 없습니다.");
}
// items.length가 0이면 Falsy

🏗️ 조건문 설계 패턴 — 얼리 리턴

이 섹션에서는 중첩을 줄이고 코드 가독성을 높이는 실전 패턴인 얼리 리턴을 살펴보겠습니다.

실무 코드에서 조건문이 깊게 중첩되면 읽기 어렵고 유지보수가 힘들어집니다. 이를 해결하는 대표적인 패턴이 얼리 리턴(Early Return)입니다. 조건이 맞지 않으면 일찍 함수를 종료하여 중첩 깊이를 줄이는 방법입니다. 함수는 9강에서 자세히 배우지만, 패턴을 미리 소개합니다.

// 중첩이 깊은 코드
function processOrder(user, items, payment) {
  if (user) {
    if (items.length > 0) {
      if (payment) {
        console.log("주문 처리 중...");
        // 실제 처리 로직
      } else {
        console.log("결제 수단이 없습니다.");
      }
    } else {
      console.log("장바구니가 비어있습니다.");
    }
  } else {
    console.log("로그인이 필요합니다.");
  }
}

// 얼리 리턴으로 개선
function processOrderV2(user, items, payment) {
  if (!user) {
    console.log("로그인이 필요합니다.");
    return;  // 함수 즉시 종료
  }

  if (items.length === 0) {
    console.log("장바구니가 비어있습니다.");
    return;
  }

  if (!payment) {
    console.log("결제 수단이 없습니다.");
    return;
  }

  // 모든 조건 통과 — 실제 처리 로직
  console.log("주문 처리 중...");
}

얼리 리턴 패턴을 사용하면 예외 상황을 먼저 처리하고 함수를 종료합니다. 이렇게 하면 핵심 로직이 중첩 없이 명확하게 드러납니다. 실무에서는 이런 방식의 코드가 훨씬 읽기 좋고 유지보수하기 쉽습니다. 9강에서 함수를 배운 뒤 직접 실습해 보세요.

📝 핵심 요약

7강에서 배운 내용을 정리해 보겠습니다.

구문용도특징
if (조건) { }단일 조건 처리조건이 Truthy면 실행
if...else { }참/거짓 두 가지 처리둘 중 하나만 실행
else if (조건)다중 조건 처리앞 조건이 false일 때만 검사
switch (값)단일 값 vs 다중 경우break 필수, === 비교
조건 ? 참 : 거짓간단한 조건 표현식값을 반환, 변수 초기화에 유용
  • 조건문의 조건식은 어떤 값이든 Truthy/Falsy로 평가됩니다.
  • 조건의 순서가 결과에 영향을 줍니다 — 구체적인 조건을 먼저 배치하세요.
  • 얼리 리턴 패턴으로 중첩 깊이를 줄이면 코드 가독성이 높아집니다.

다음 강인 8강 — 반복문에서는 같은 코드를 여러 번 실행하는 반복문을 배웁니다. for, while, do-while과 반복을 제어하는 break·continue까지 — 조건문과 반복문이 결합되면 복잡한 알고리즘도 표현할 수 있게 됩니다!

관련 주제

  • if else switch
  • 삼항 연산자
  • truthy falsy
  • 조건 분기
  • 중첩 조건 설계
  • 개발·프로그래밍
  • 개발·프로그래밍 강의
  • 자바스크립트 기초 30강 — 웹을 움직이는 언어
  • 무료강의
  • 무료 온라인 강의
  • NUGUNA
  • 누구나
이전 6강문자열 다루기다음 8강 반복문

댓글

0/1000

불러오는 중...

목차

  1. 1.자바스크립트란
  2. 2.실행 환경과 콘솔
  3. 3.변수 — let·const
  4. 4.자료형
  5. 5.연산자
  6. 6.문자열 다루기
  7. 7.조건문
  8. 8.반복문

カスタマーサポート

  • お知らせ
  • よくある質問
  • お問い合わせ
  • コミュニティ

ご利用案内

  • 利用規約
  • プライバシーポリシー
  • 返金ポリシー

サービス

  • 会社紹介
  • 新規登録
  • 新着コース
  • 無料コース
누구나 로고
利用規約プライバシーポリシー返金ポリシー

상호명: NUGUNA  |  대표자: 정우진  |  사업자등록번호: 392-32-01817  |  통신판매업신고: 제 2026-서울양천-0564 호

주소: 서울특별시 양천구 목동서로 100  |  이메일: nugunapass@gmail.com  |  전화: 010-6395-3043

© 2026 NUGUNA. All rights reserved.

KB예금주인증관리자
ホームコースライブラリお問い合わせMY