Skip to main content
Tilnote
T
tilnote
책에 포함된 노트처음부터 제대로 배우는 JavaScript 기초

조건문으로 코드에 판단력 주기

Views 7약 8분

프로그램이 갑자기 똑똑해 보이는 순간이 있습니다. 바로 상황에 따라 다른 행동을 하기 시작할 때입니다.

예를 들어,

  • 점수가 60점 이상이면 합격이라고 말하고

  • 나이가 18세 이상이면 성인이라고 말하고

  • 오늘이 토요일이면 쉬자고 말하는 것

이런 판단을 만드는 도구가 바로 조건문입니다.

자바스크립트에서 조건문을 배우면, 코드는 더 이상 위에서 아래로만 흘러가는 기차가 아닙니다. 이제는 갈림길에서 방향을 고를 수 있는 운전자가 됩니다.

이번 장에서는 if, else if, else, switch, 그리고 삼항 연산자를 사용해 상황에 따라 다른 코드를 실행하는 방법을 배워보겠습니다.

조건문은 어떻게 생각할까

조건문은 아주 단순한 질문으로 움직입니다.

"이 조건이 참인가?"

참이면 한쪽 코드를 실행하고, 거짓이면 다른 쪽 코드를 실행합니다. 자바스크립트에서 이 판단의 기준은 결국 true 또는 false입니다.1

예를 들어 다음 코드는 age >= 20이 참인지 확인합니다.

let age = 22;

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

age가 22이므로 age >= 20은 true입니다. 그래서 중괄호 안의 코드가 실행됩니다.

반대로 age가 15였다면 조건은 false가 되고, 아무 일도 일어나지 않습니다.

if: 조건이 맞을 때만 실행하기

가장 기본적인 조건문은 if입니다.

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

예제를 하나 더 보겠습니다.

let temperature = 30;

if (temperature >= 28) {
  console.log("덥네요. 시원한 물을 마셔요.");
}

이 코드는 온도가 28도 이상일 때만 문장을 출력합니다.

여기서 중요한 점은, if는 조건이 참일 때만 움직인다는 것입니다. 거짓이면 그냥 지나갑니다. 마치 자동문이 센서를 감지했을 때만 열리는 것과 비슷합니다.

else: 그렇지 않다면 다른 코드 실행하기

그런데 실제 프로그램은 "참이면 실행"만으로 끝나지 않는 경우가 많습니다. 조건이 거짓일 때도 뭔가 해야 하죠.

그럴 때 else를 붙입니다.

if (조건식) {
  // 조건이 true일 때
} else {
  // 조건이 false일 때
}

예를 들어 로그인 여부를 확인한다고 해봅시다.

let isLoggedIn = false;

if (isLoggedIn) {
  console.log("환영합니다!");
} else {
  console.log("로그인이 필요합니다.");
}

isLoggedIn이 false이므로 else 쪽 코드가 실행됩니다.

이 구조는 "둘 중 하나는 반드시 실행된다"는 점에서 아주 자주 쓰입니다. 문이 열려 있으면 들어가고, 아니면 벨을 누르는 식입니다.

else if: 조건이 여러 개일 때

세상 일은 둘 중 하나로만 나뉘지 않을 때가 많습니다.

예를 들어 점수에 따라 등급을 나누고 싶다면 어떻게 해야 할까요?

  • 90점 이상이면 A

  • 80점 이상이면 B

  • 그 외는 C

이럴 때 else if를 사용합니다.

let score = 85;

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

이 코드는 위에서부터 차례대로 조건을 확인합니다.1

  1. score >= 90 인가?

  2. 아니라면 score >= 80 인가?

  3. 그것도 아니라면 else

여기서 아주 중요한 규칙이 있습니다.

먼저 참이 된 조건 하나만 실행되고, 나머지는 건너뜁니다.

그래서 조건의 순서가 중요합니다.

예를 들어 아래처럼 쓰면 문제가 생깁니다.

let score = 95;

if (score >= 80) {
  console.log("B 이상");
} else if (score >= 90) {
  console.log("A 등급");
}

score가 95여도 첫 번째 조건 score >= 80이 이미 참이기 때문에, A 등급은 출력되지 않습니다.

즉, 더 엄격한 조건을 먼저 쓰는 습관이 중요합니다.

let score = 95;

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

이제 의도한 대로 동작합니다.

조건식에는 꼭 true, false만 써야 할까

꼭 그렇지는 않습니다. 자바스크립트는 조건식 자리에 온 값을 true 또는 false처럼 해석해서 판단할 수 있습니다. 이를 흔히 truthy / falsy라고 부릅니다.12

아주 간단히만 기억하면,

  • false

  • 0

  • ""(빈 문자열)

  • null

  • undefined

  • NaN

이런 값들은 보통 거짓처럼 취급됩니다.12

예를 들어:

let username = "";

if (username) {
  console.log("이름이 입력되었습니다.");
} else {
  console.log("이름을 입력해주세요.");
}

빈 문자열 ""은 거짓처럼 취급되므로 else가 실행됩니다.

이 기능은 편리하지만, 초보자라면 처음에는 조건이 분명하게 보이는 코드를 쓰는 것이 좋습니다.

if (username !== "") {
  console.log("이름이 입력되었습니다.");
} else {
  console.log("이름을 입력해주세요.");
}

이런 식으로 쓰면 의도가 더 잘 보입니다.

비교 연산자와 논리 연산자를 함께 쓰기

조건문은 혼자보다 연산자와 함께 있을 때 더 강해집니다.

예를 들어 나이와 회원 여부를 함께 확인할 수 있습니다.

let age = 22;
let isMember = true;

if (age >= 20 && isMember) {
  console.log("성인 회원 전용 페이지에 들어갈 수 있습니다.");
}

여기서 &&는 그리고라는 뜻입니다. 두 조건이 모두 참이어야 전체가 참이 됩니다.

||는 또는입니다.

let day = "토요일";

if (day === "토요일" || day === "일요일") {
  console.log("주말입니다.");
}

둘 중 하나만 참이어도 실행됩니다.

!는 참과 거짓을 뒤집습니다.

let isRainy = false;

if (!isRainy) {
  console.log("우산 없이 나가도 괜찮겠네요.");
}

이미 이전 장에서 배운 연산자들이 여기서 본격적으로 활약하기 시작합니다.

중괄호는 귀찮아 보여도 꼭 쓰자

자바스크립트는 한 줄짜리 코드라면 중괄호 {}를 생략할 수 있습니다.

let num = 4;

if (num % 2 === 0)
  console.log("짝수입니다.");
else
  console.log("홀수입니다.");

동작은 합니다. 하지만 초보자에게는 추천하지 않습니다.

왜냐하면 중첩된 조건문에서는 else가 가장 가까운 if와 연결되기 때문에, 눈으로 보기엔 맞아 보여도 실제 동작이 헷갈릴 수 있기 때문입니다.1

그래서 습관처럼 이렇게 쓰는 편이 좋습니다.

let num = 4;

if (num % 2 === 0) {
  console.log("짝수입니다.");
} else {
  console.log("홀수입니다.");
}

코드는 기계가 읽기도 해야 하지만, 결국 사람도 읽어야 합니다. 특히 미래의 나 자신이 읽게 됩니다. 미래의 나는 생각보다 금방 남이 됩니다.

중첩 if: 조건문 안에 조건문 넣기

조건문 안에 또 다른 조건문을 넣을 수도 있습니다.

예를 들어 시험 합격 여부와 우수 합격 여부를 나누어 보고 싶다고 해봅시다.

let score = 82;

if (score >= 60) {
  if (score >= 80) {
    console.log("합격! 그리고 우수 성적입니다.");
  } else {
    console.log("합격입니다.");
  }
} else {
  console.log("불합격입니다.");
}

이런 구조를 중첩 if라고 합니다.

쓸 수는 있지만, 너무 깊게 들어가면 코드가 미로처럼 복잡해집니다. 조건이 많아질수록 else if나 switch, 또는 나중에 배울 함수로 정리하는 편이 읽기 쉽습니다.

switch: 같은 값을 여러 경우와 비교할 때

if는 아주 유연합니다. 하지만 하나의 값을 여러 경우와 비교할 때는 코드가 길어질 수 있습니다.

예를 들어 요일 번호에 따라 이름을 출력한다고 해봅시다.

let day = 3;

if (day === 1) {
  console.log("월요일");
} else if (day === 2) {
  console.log("화요일");
} else if (day === 3) {
  console.log("수요일");
} else {
  console.log("알 수 없는 요일");
}

이럴 때 switch를 쓰면 구조가 더 또렷해집니다.3

let day = 3;

switch (day) {
  case 1:
    console.log("월요일");
    break;
  case 2:
    console.log("화요일");
    break;
  case 3:
    console.log("수요일");
    break;
  default:
    console.log("알 수 없는 요일");
}

switch는 이렇게 동작합니다.

  • 먼저 switch (day)의 값을 확인합니다.

  • 그 값을 각 case와 비교합니다.

  • 일치하는 case를 찾으면 그 지점부터 코드를 실행합니다.

  • break를 만나면 switch를 빠져나옵니다.3

여기서 가장 중요한 단어는 break입니다.

break를 빼먹으면 생기는 일

switch에서 break를 빼먹으면, 다음 case까지 계속 실행됩니다. 이것을 fall-through라고 합니다.3

let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("사과 선택");
  case "banana":
    console.log("바나나 선택");
  default:
    console.log("기본 실행");
}

이 코드는 fruit가 "apple"일 때 다음처럼 출력됩니다.

사과 선택
바나나 선택
기본 실행

어라, 사과만 선택했는데 왜 바나나까지 나오죠?

이것이 바로 break가 없어서 생기는 현상입니다. 초보자가 switch에서 가장 많이 만나는 함정 중 하나입니다.

그래서 특별한 의도가 없다면 각 case 끝에 break를 넣는 습관을 들이세요.

default: 아무 경우에도 해당하지 않을 때

default는 else와 비슷한 역할을 합니다.3

어떤 case와도 맞지 않으면 default가 실행됩니다.

let color = "blue";

switch (color) {
  case "red":
    console.log("멈춤");
    break;
  case "yellow":
    console.log("주의");
    break;
  case "green":
    console.log("출발");
    break;
  default:
    console.log("알 수 없는 색입니다.");
}

예상하지 못한 값이 들어왔을 때를 대비해 default를 넣어두면 훨씬 안전합니다.

switch는 언제 특히 잘 어울릴까

switch는 하나의 값을 여러 고정된 경우와 비교할 때 잘 어울립니다.

예를 들면 이런 상황입니다.

  • 사용자 등급이 "admin", "user", "guest" 중 하나일 때

  • 요일 번호가 1, 2, 3, 4, 5, 6, 7 중 하나일 때

  • 메뉴 선택 값이 "A", "B", "C" 중 하나일 때

반대로 범위를 비교하는 문제는 if가 더 자연스럽습니다.

예를 들어 점수처럼 90 이상, 80 이상, 60 이상 같은 비교는 switch보다 if가 읽기 쉽습니다.

switch는 엄격하게 비교한다

switch는 값을 비교할 때 엄격 비교를 사용합니다. 즉, ===처럼 비교한다고 생각하면 됩니다.3

let value = "1";

switch (value) {
  case 1:
    console.log("숫자 1입니다.");
    break;
  case "1":
    console.log("문자열 1입니다.");
    break;
}

이 코드는 "문자열 1입니다."를 출력합니다.

왜냐하면 "1"은 문자열이고, 1은 숫자이기 때문입니다. 값이 비슷해 보여도 타입이 다르면 다른 것으로 취급합니다.

이 특성은 실수를 줄여주기도 하지만, 입력값이 문자열인지 숫자인지 헷갈리면 예상과 다른 결과가 나올 수 있습니다. 그래서 switch를 쓸 때는 비교할 값의 타입도 함께 의식하는 것이 좋습니다.

여러 case를 한꺼번에 묶을 수도 있다

서로 다른 값이 같은 결과를 내야 할 때는 case를 여러 개 이어서 쓸 수 있습니다.3

let day = "토요일";

switch (day) {
  case "토요일":
  case "일요일":
    console.log("주말입니다.");
    break;
  default:
    console.log("평일입니다.");
}

이 코드는 토요일과 일요일 모두 같은 문장을 출력합니다.

중복 코드를 줄일 수 있어서 꽤 유용합니다.

삼항 연산자: 짧게 쓰는 if...else

이제 삼항 연산자를 볼 차례입니다.

이름은 조금 무섭지만, 실제 모습은 꽤 간단합니다.

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

이건 if...else를 짧게 쓴 표현입니다.4

예를 들어 성인 여부를 문자열로 저장하고 싶다면 이렇게 쓸 수 있습니다.

let age = 17;
let message = age >= 18 ? "성인" : "미성년자";

console.log(message);

age >= 18이 참이면 "성인", 거짓이면 "미성년자"가 message에 저장됩니다.

같은 내용을 if...else로 쓰면 이렇습니다.

let age = 17;
let message;

if (age >= 18) {
  message = "성인";
} else {
  message = "미성년자";
}

console.log(message);

둘 다 맞는 코드입니다. 다만 단순한 값 선택이라면 삼항 연산자가 더 짧고 깔끔할 수 있습니다.

삼항 연산자는 이럴 때 좋다

삼항 연산자는 특히 값 하나를 정할 때 잘 어울립니다.

let isMember = true;
let discount = isMember ? 0.1 : 0;

console.log(discount);

또는 문장 속에서 짧게 상태를 넣을 수도 있습니다.

let isDarkMode = true;
let text = `현재 모드는 ${isDarkMode ? "다크 모드" : "라이트 모드"}입니다.`;

console.log(text);

개수에 따라 문장을 조금 다르게 만들 수도 있습니다.

let count = 1;
let itemText = `장바구니에 상품이 ${count}개 있습니다.`;

console.log(itemText);

조금 더 응용하면 이렇게도 쓸 수 있습니다.

let count = 1;
let messageText = count === 1 ? "상품이 1개 있습니다." : `상품이 ${count}개 있습니다.`;

console.log(messageText);

다만 초보자라면 처음에는 너무 화려하게 쓰기보다, "짧은 if...else" 정도로 이해하면 충분합니다.

삼항 연산자를 너무 욕심내면 생기는 일

삼항 연산자는 짧아서 매력적이지만, 너무 많이 이어 붙이면 오히려 읽기 어렵습니다.4

let score = 75;
let result = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";

동작은 합니다. 하지만 처음 보는 사람은 잠깐 멈칫하게 됩니다.

이럴 때는 오히려 if...else if...else가 더 낫습니다.

let score = 75;
let result;

if (score >= 90) {
  result = "A";
} else if (score >= 80) {
  result = "B";
} else if (score >= 70) {
  result = "C";
} else {
  result = "D";
}

짧다고 항상 좋은 것은 아닙니다. 읽기 쉬운 코드가 좋은 코드입니다.

if, switch, 삼항 연산자 중 무엇을 써야 할까

처음에는 셋이 비슷해 보여도, 각자 잘 어울리는 자리가 있습니다.

  • if: 범위 비교, 복잡한 조건, 논리 연산이 필요한 경우

  • switch: 하나의 값을 여러 고정된 값과 비교하는 경우

  • 삼항 연산자: 간단한 값 선택을 짧게 표현하고 싶은 경우

예를 들어 점수 판정은 if가 자연스럽습니다.

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
}

메뉴 선택은 switch가 잘 어울립니다.

switch (menu) {
  case "coffee":
    console.log("커피를 주문합니다.");
    break;
  case "tea":
    console.log("차를 주문합니다.");
    break;
}

간단한 메시지 선택은 삼항 연산자가 편합니다.

let message = isDarkMode ? "다크 모드" : "라이트 모드";

처음에는 "무조건 이걸 써야 한다"보다, 가장 읽기 쉬운 방법을 고른다고 생각하면 됩니다.

실전 예제: 할인율 계산하기

지금까지 배운 내용을 한 번에 엮어보겠습니다.

회원 등급에 따라 할인율을 정하는 예제입니다.

let grade = "VIP";
let discount;

if (grade === "VIP") {
  discount = 0.2;
} else if (grade === "GOLD") {
  discount = 0.1;
} else if (grade === "SILVER") {
  discount = 0.05;
} else {
  discount = 0;
}

console.log(`할인율은 ${discount * 100}%입니다.`);

같은 내용을 switch로 바꾸면 이렇게 쓸 수 있습니다.

let grade = "VIP";
let discount;

switch (grade) {
  case "VIP":
    discount = 0.2;
    break;
  case "GOLD":
    discount = 0.1;
    break;
  case "SILVER":
    discount = 0.05;
    break;
  default:
    discount = 0;
}

console.log(`할인율은 ${discount * 100}%입니다.`);

그리고 아주 단순한 경우라면 삼항 연산자로도 가능합니다.

let isMember = true;
let discount = isMember ? 0.1 : 0;

console.log(`할인율은 ${discount * 100}%입니다.`);

셋 다 "조건에 따라 다른 결과를 만든다"는 점은 같지만, 표현 방식이 다릅니다.

자주 하는 실수

초보자가 조건문에서 자주 하는 실수를 미리 보면 훨씬 덜 헤맬 수 있습니다.

첫째, =와 ===를 헷갈리는 경우입니다.

let age = 20;

if (age === 20) {
  console.log("정확히 20살입니다.");
}

=는 값을 넣는 대입, ===는 같은지 확인하는 비교입니다. 조건문에서는 대부분 비교가 필요합니다.

둘째, switch에서 break를 빼먹는 경우입니다.

switch (color) {
  case "red":
    console.log("빨강");
    break;
}

셋째, 조건의 순서를 잘못 쓰는 경우입니다.

if (score >= 60) {
  console.log("합격");
} else if (score >= 90) {
  console.log("우수 합격");
}

이 코드는 95점이어도 첫 번째에서 끝납니다. 더 구체적인 조건을 먼저 써야 합니다.

넷째, 삼항 연산자를 너무 복잡하게 쓰는 경우입니다.

짧게 쓰는 것은 좋지만, 읽기 어려워지면 오히려 손해입니다.

마무리

조건문은 프로그램에 처음으로 판단력을 넣어주는 도구입니다.

지금까지 배운 내용을 한 문장으로 정리하면 이렇습니다.

  • if는 조건이 참일 때 실행한다.

  • else는 조건이 거짓일 때 실행한다.

  • else if는 여러 조건을 순서대로 검사한다.

  • switch는 하나의 값을 여러 경우와 비교할 때 편리하다.

  • 삼항 연산자는 간단한 if...else를 짧게 표현한다.

이제 여러분의 코드는 단순히 "적힌 대로 실행되는 코드"를 넘어, 상황을 보고 다르게 반응하는 코드가 되기 시작했습니다.

다음 장에서는 이 판단력을 한 단계 더 발전시켜, 같은 작업을 여러 번 자동으로 처리하는 반복문을 배웁니다. 한 번 판단할 수 있게 되었으니, 이제 그 판단을 여러 번 시키는 방법을 배울 차례입니다.

참고

1MDN if...else

2Conditional (ternary) operator - MDN

3MDN switch

4JavaScript ternary operator

책 목록

처음부터 제대로 배우는 JavaScript 기초

전체 목차 보기

이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.

틸노트는 사용자가 AI를 활용해 노트를 쉽게 작성하거나 편집할 수 있는 서비스입니다.

회원 가입

AI 스퀘어 단톡방에 함께해요

AI 활용과 틸노트 사용 팁을 나누는 오픈채팅방입니다. 입장 비밀번호는 tilnote입니다.

참여하기
이용약관·개인정보처리방침