JavaScript 조건문 - if·else·비교 연산자·=== 와 ==·truthy·경계값

1.`if`와 `else` — 갈림길 만들기

1강에서 코드는 위에서 아래로 차례대로 실행된다고 했습니다. 조건문은 이 흐름에 갈림길을 만듭니다. if (조건) { … }이라고 쓰면 괄호 안의 조건이 참일 때만 중괄호 안의 코드를 실행하고, 거짓이면 건너뜁니다. 조건이 거짓일 때 할 일이 따로 있으면 그 뒤에 else { … }를 붙입니다. 두 갈래 중 정확히 한쪽만 실행됩니다.

조건 자리에는 결과가 true 또는 false가 되는 식을 씁니다. 2강의 불리언이 바로 여기서 쓰입니다. age >= 19는 age가 19 이상이면 true, 아니면 false가 되는 식입니다. 조건식을 먼저 console.log로 찍어 보면 조건문이 어느 쪽으로 갈지 미리 알 수 있어서, 조건문이 뜻대로 움직이지 않을 때 원인을 찾는 데 도움이 됩니다.

중괄호 안의 코드는 두 칸 들여 써서 '이 코드는 이 조건에 딸려 있다'는 것을 눈으로 보이게 합니다. 실행기는 들여쓰기를 보지 않고 중괄호로 구분하지만, 사람은 들여쓰기로 구조를 읽습니다. 들여쓰기가 어긋난 코드는 읽는 사람을 속일 수 있으니 늘 맞춰 둡니다. 중괄호 안의 코드가 한 줄뿐이어도 중괄호를 생략하지 않는 편이 나중에 줄을 더할 때 실수가 적습니다.

조건식의 값을 먼저 찍어 보면 어느 갈래로 갈지 보입니다

const age = 17;
console.log(age >= 19);
if (age >= 19) {
  console.log("성인 요금");
} else {
  console.log("청소년 요금");
}

출력

false
청소년 요금

2.`else if` — 여러 갈래는 위에서부터 차례로

갈래가 셋 이상이면 else if를 이어 붙입니다. 실행기는 위에서부터 조건을 하나씩 검사해서 처음으로 참인 갈래 하나만 실행하고 나머지는 모두 건너뜁니다. 아무 조건도 참이 아니면 마지막 else가 실행됩니다. 그래서 else는 '위의 어느 경우도 아닌 나머지 전부'를 맡는 자리입니다.

'처음 참인 것 하나만'이라는 규칙 때문에 조건의 순서가 중요합니다. 점수로 등급을 매긴다면 높은 기준부터 차례로 검사해야 합니다. 95점은 score >= 90도 참이고 score >= 80도 참인데, 80 조건을 먼저 쓰면 95점이 B를 받습니다. 높은 기준부터 내려가면 뒤의 조건에서는 '앞의 조건이 이미 거짓이었다'는 사실을 깔고 갈 수 있어서 score >= 80 && score < 90처럼 범위를 양쪽으로 쓸 필요도 없어집니다.

조건문을 쓰기 전에 표로 정리해 보면 빠진 구간과 겹치는 구간을 찾기 쉽습니다. 아래 예처럼 '90 이상 A, 80 이상 B, 70 이상 C, 나머지 F'라고 정했다면 표에 적은 그대로 위에서부터 옮기면 됩니다. 등급 기준은 예시이며, 실제 기준은 학교·회사마다 다릅니다.

높은 기준부터 검사하면 처음 참인 갈래 하나만 실행됩니다

const 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");
}

출력

95점인데 B가 나옵니다 — 두 번째 갈래에는 영영 닿지 않습니다

// 순서를 잘못 쓴 예
const s = 95;
if (s >= 80) {
  console.log("B");
} else if (s >= 90) {
  console.log("A");
}

출력

3.비교 연산자와 `===` vs `==`

두 값을 비교하는 연산자는 크다(>), 작다(<), 크거나 같다(>=), 작거나 같다(<=), 같다(===), 다르다(!==)입니다. 결과는 늘 true 또는 false입니다. 같은지 비교할 때 =를 하나만 쓰면 비교가 아니라 값을 넣는 대입이 되니 주의하세요. 이 실수는 아주 흔하고, 경우에 따라 오류 없이 엉뚱하게 동작합니다.

JavaScript에는 '같다'가 두 가지 있습니다. ===(엄격한 같음)는 자료형과 값이 모두 같아야 true입니다. ==(느슨한 같음)는 자료형이 다르면 2강에서 본 암묵적 형 변환을 한 다음 비교합니다. 그래서 1 == "1"은 true, 0 == ""도 true가 됩니다. 규칙이 복잡해서 예상하기 어렵기 때문에 거의 모든 코딩 안내서와 검사 도구가 ===와 !==만 쓰라고 권합니다. 이 과정에서도 늘 ===를 씁니다.

문자열끼리도 비교할 수 있습니다. ===는 글자가 하나도 빠짐없이 같아야 하므로 "민수" === "민수 "(끝에 빈칸)는 false입니다. 사용자 입력을 비교할 때 앞뒤 공백 때문에 일치하지 않는 일이 흔해서 7강에서 trim으로 정리하는 법을 배웁니다. 문자열에 <, >를 쓰면 사전 순서에 가까운 글자 코드 순서로 비교하는데, "10" < "9"가 true가 되는 것처럼 숫자처럼 보이는 문자열은 엉뚱하게 비교되니 먼저 숫자로 바꿉니다.

==는 형 변환 뒤 비교해서 결과가 예상과 달라집니다

console.log(3 > 2, 3 >= 3, 3 !== 3);
console.log(1 === "1", 1 == "1");
console.log(0 == "", 0 === "");
console.log(null == undefined, null === undefined);

출력

true true false
false true
true false
true false

숫자처럼 보이는 문자열은 숫자로 바꾼 뒤 비교합니다

console.log("민수" === "민수 ");
console.log("10" < "9", 10 < 9);
console.log(Number("10") < Number("9"));

출력

false
true false
false

비교 연산자 정리
연산자	뜻	예	결과
`===`	자료형과 값이 모두 같다	`5 === 5`	`true`
`!==`	같지 않다(엄격)	`5 !== "5"`	`true`
`>` / `<`	크다 / 작다	`3 < 2`	`false`
`>=` / `<=`	크거나 같다 / 작거나 같다	`60 >= 60`	`true`
`==`	형 변환 뒤 같다(쓰지 않음)	`1 == "1"`	`true`

4.논리 연산자 — 그리고 `&&`, 또는 `||`, 아니다 `!`

조건을 여러 개 묶을 때는 논리 연산자를 씁니다. A && B는 A와 B가 모두 참일 때만 참이고, A || B는 둘 중 하나라도 참이면 참입니다. !A는 참과 거짓을 뒤집습니다. '회원이면서 3만 원 이상 샀다'는 &&, '회원이거나 3만 원 이상 샀다'는 ||입니다. 우리말의 '그리고'와 '또는'이 일상에서는 느슨하게 쓰이니, 조건을 말로 정한 뒤 어느 쪽인지 한 번 더 확인하는 것이 좋습니다.

&&와 ||는 왼쪽만 보고 답이 정해지면 오른쪽은 계산하지 않습니다. A && B에서 A가 거짓이면 B와 상관없이 거짓이므로 B를 보지 않고, A || B에서 A가 참이면 B를 보지 않습니다. 이를 이용해 user !== null && user.age >= 19처럼 쓰면 user가 null일 때 오른쪽을 읽지 않으므로 2강에서 본 TypeError를 피할 수 있습니다. 순서를 바꾸면 이 보호가 사라집니다.

&&와 ||를 한 식에 섞으면 &&가 먼저 계산됩니다. 하지만 이 우선순위를 외워서 쓰기보다 괄호로 묶어 의도를 드러내는 편이 훨씬 안전합니다. 범위를 나타낼 때 수학처럼 10 <= x <= 20이라고 쓰면 오류는 나지 않지만 뜻대로 동작하지 않습니다. 반드시 x >= 10 && x <= 20처럼 두 비교로 나누어 씁니다.

가상의 쇼핑몰 조건

const isMember = false;
const total = 32000;
console.log(isMember && total >= 30000);
console.log(isMember || total >= 30000);
console.log(!isMember);

출력

false
true
true

10 <= x가 먼저 true가 되고, true <= 20은 1 <= 20으로 바뀌어 참이 됩니다

const x = 25;
console.log(10 <= x <= 20); // 뜻대로 안 됨
console.log(x >= 10 && x <= 20);

출력

true
false

5.truthy와 falsy — 불리언이 아닌 값도 조건이 된다

if의 괄호 안에 불리언이 아닌 값을 넣어도 오류가 나지 않습니다. JavaScript는 그 값을 참이나 거짓으로 바꾸어 판단합니다. 거짓으로 취급되는 값(falsy)은 정해져 있습니다. false, 0, -0, 0n, 빈 문자열 "", null, undefined, NaN입니다. 이 목록에 없는 값은 모두 참으로 취급됩니다(truthy). 빈 배열 []과 빈 객체 {}, 글자 "0"과 "false"도 truthy라는 점이 자주 헷갈립니다.

이 성질 덕분에 if (name) { … }처럼 '값이 들어 있으면'을 짧게 쓸 수 있습니다. 하지만 함정이 있습니다. 개수나 금액에서 0은 정상적인 값인데 falsy입니다. 재고가 0개인 상품을 if (stock)으로 검사하면 '재고 정보가 없음'과 '재고가 0개'가 같은 갈래로 들어갑니다. AI가 써 준 코드에서도 자주 보이는 실수입니다.

그래서 무엇을 확인하려는지 분명할 때는 조건을 구체적으로 씁니다. 값이 비어 있는지 보려면 stock === null이나 stock === undefined, 0보다 큰지 보려면 stock > 0, 빈 문자열인지 보려면 name === ""처럼 씁니다. 어떤 값이 truthy인지 궁금하면 Boolean(값)으로 직접 확인할 수 있습니다.

"0"과 빈 배열은 truthy입니다

console.log(Boolean(0), Boolean(""), Boolean(null));
console.log(Boolean(NaN), Boolean(undefined));
console.log(Boolean("0"), Boolean("false"));
console.log(Boolean([]), Boolean(-1));

출력

false false false
false false
true true
true true

0을 정상 값으로 다루려면 조건을 구체적으로 씁니다

const stock = 0;
if (stock) {
  console.log("구매 가능");
} else {
  console.log("재고 정보 없음?"); // 0개인데 여기로 옴
}
if (stock === null) {
  console.log("재고 정보 없음");
} else if (stock > 0) {
  console.log("구매 가능");
} else {
  console.log("품절");
}

출력

재고 정보 없음?
품절

6.경계값 — 조건문은 경계에서 틀린다

조건문의 버그는 대부분 경계에서 생깁니다. '60점 이상 합격'을 score > 60으로 쓰면 60점이 불합격이 됩니다. 59점과 61점으로만 시험해 보면 이 실수를 찾을 수 없습니다. 그래서 조건문을 확인할 때는 경계 바로 아래, 경계 그 자체, 경계 바로 위의 값을 꼭 넣어 봅니다. 여기에 가장 작은 값(0)과 가장 큰 값(100), 그리고 들어오면 안 되는 값(음수, 100 초과)까지 더하면 대부분의 실수가 드러납니다.

규칙을 말로 정할 때부터 경계를 분명히 해야 합니다. '만 19세 이상', '3만 원 이상 무료 배송', '10개 초과 시 할인'에서 '이상'은 >=, '초과'는 >, '이하'는 <=, '미만'은 <입니다. 요구사항이 '3만 원부터'처럼 애매하면 코드를 쓰기 전에 3만 원 정각이 어느 쪽인지 확인하는 것이 맞습니다. AI에게 코드를 부탁할 때도 경계를 말로 분명히 적어 주면 결과가 훨씬 정확해집니다.

확인할 값을 표로 정리해 두면 그것이 그대로 테스트 케이스가 됩니다. 이 과정의 실습장 채점기가 하는 일도 같습니다. 정해 둔 입력을 넣고 기대값과 비교합니다. 5강에서 함수를 배우면 이런 테스트를 더 쉽게 만들 수 있고, 10강에서는 AI가 짠 코드를 이 방법으로 검증합니다.

'60점 이상 합격'(0~100점)을 확인하는 테스트 값
입력	고른 까닭	기대 결과	`score > 60`으로 잘못 쓰면
`59`	경계 바로 아래	불합격	불합격
`60`	경계 그 자체	합격	불합격 (버그 발견)
`61`	경계 바로 위	합격	합격
`0` / `100`	가장 작은·큰 값	불합격 / 합격	불합격 / 합격
`-5` / `120`	들어오면 안 되는 값	잘못된 점수로 처리	불합격 / 합격 (검사 없음)

예제가상의 쇼핑몰 규칙입니다. '주문 금액 30,000원 이상이거나 회원이면 배송비 0원, 아니면 3,000원'. 이 규칙을 확인할 테스트 값을 고르고 코드로 결과를 확인해 보세요.

const orders = [[29999, false], [30000, false], [0, true]];
for (const [total, isMember] of orders) {
  let fee = 3000;
  if (total >= 30000 || isMember) {
    fee = 0;
  }
  console.log(total, isMember, fee);
}

출력

29999 false 3000
30000 false 0
0 true 0

1단계 경계 찾기: 금액의 경계는 30,000원이고 '이상'이므로 >=입니다. 회원 여부는 참·거짓 두 가지입니다.
2단계 테스트 값 고르기: 비회원으로 29,999원·30,000원, 그리고 회원으로 0원(아주 작은 금액에서도 회원이면 무료인지)을 고릅니다.
3단계 조건 쓰기: total >= 30000 || isMember가 참이면 0, 아니면 3000입니다.
검산: 29,999원 비회원만 3,000원이고 나머지는 0원이어야 합니다. 30,000원이 3,000원으로 나오면 >를 잘못 쓴 것입니다.

답29,999원(비회원) → 3000, 30,000원(비회원) → 0, 0원(회원) → 0

예제 코드의 for … of는 4강에서 배울 반복문이고, [29999, false]처럼 대괄호로 묶은 목록은 6강에서 배울 배열입니다. const [total, isMember]는 그 목록의 첫째·둘째 값을 차례로 두 이름에 담는 문법입니다. 지금은 '경우를 하나씩 꺼내 같은 조건문에 넣어 본다'는 것만 보면 됩니다.

📌 핵심 정리

if·else if·else는 위에서부터 검사해 처음 참인 갈래 하나만 실행한다 — 순서가 중요하다
같은지 비교할 때는 늘 ===·!==를 쓴다 — ==는 형 변환 뒤 비교해 예측하기 어렵다
&&는 모두 참, ||는 하나라도 참, !는 뒤집기이며, 범위는 x >= 10 && x <= 20처럼 나눠 쓴다
falsy는 false·0·""·null·undefined·NaN 등이고, 0이 정상 값이면 조건을 구체적으로 쓴다
조건문은 경계 바로 아래·경계·바로 위와 양 끝 값, 잘못된 값으로 테스트한다

✍️ 확인 문제

먼저 풀어 본 뒤 '정답과 해설'을 펼치세요.

Q1. const s = 95;일 때, if (s >= 80) {…B…} else if (s >= 90) {…A…}가 출력하는 것은?

①A②B③A와 B 둘 다④아무것도 출력하지 않는다

⭕ 정답입니다

❌ 다시 생각해 보세요

정답과 해설

정답 ② B

처음 참인 갈래 하나만 실행됩니다. 95는 s >= 80이 이미 참이라 B가 나오고, 두 번째 갈래는 검사하지도 않습니다. 높은 기준부터 써야 합니다.

Q2. 다음 중 결과가 true인 것은?

①1 === "1"②0 === ""③1 == "1"④"민수" === "민수 "

⭕ 정답입니다

❌ 다시 생각해 보세요

정답과 해설

정답 ③ 1 == "1"

==는 문자열 "1"을 숫자로 바꾼 뒤 비교해 true가 됩니다. ===는 자료형이 다르면 false입니다. 이런 예측의 어려움 때문에 ===를 씁니다.

Q3. 다음 중 falsy가 아닌(truthy인) 값은?

①0②""③"0"④null

⭕ 정답입니다

❌ 다시 생각해 보세요

정답과 해설

정답 ③ "0"

글자 "0"은 빈 문자열이 아니므로 truthy입니다. 숫자 0, 빈 문자열, null은 falsy입니다.

Q4. '만 19세 이상 성인'을 확인하는 조건문을 테스트할 때 꼭 넣어야 할 나이 세 개를 고르면?

①1, 50, 100②18, 19, 20③10, 20, 30④19, 19, 19

⭕ 정답입니다

❌ 다시 생각해 보세요

정답과 해설

정답 ② 18, 19, 20

경계 바로 아래(18), 경계 그 자체(19), 경계 바로 위(20)입니다. 19가 성인으로 나오지 않으면 >를 잘못 쓴 것입니다.

Q5. x가 10 이상 20 이하인지 확인하는 조건식을 쓰세요.

내 답

정답과 해설

정답 x >= 10 && x <= 20

10 <= x <= 20은 앞의 비교 결과(true/false)를 다시 20과 비교하므로 뜻대로 동작하지 않습니다. 두 비교를 &&로 이어야 합니다.

🧪 코드 실습

조건문으로 함수를 완성하는 실습입니다. 채점기는 경계값을 포함한 여러 입력을 넣어 봅니다.

코드는 이 브라우저 안의 격리된 공간에서만 실행되고 서버로 보내지 않습니다. 네트워크에는 접속할 수 없고, 2초가 넘으면 멈춥니다. 고친 코드는 이 브라우저에만 저장됩니다. Ctrl+Enter(⌘+Enter)로 실행하고, Tab 키는 공백 두 칸입니다(Esc 다음 Tab 은 다음 칸으로 이동).

자바스크립트가 꺼져 있어 실행할 수는 없지만, 문제와 처음 코드, 자동 검사 내용, 예시 답안은 그대로 읽을 수 있습니다.

1성인인지 판단하기

isAdult(age)는 나이 age(숫자)가 19 이상이면 true, 아니면 false를 돌려줍니다.

코드 · 저장해 둔 코드

function isAdult(age) {
  // TODO: 19 이상이면 true
  return age > 19;
}

자동 검사

isAdult(18)기대값 false
isAdult(19)기대값 true
isAdult(20)기대값 true
isAdult(0)기대값 false

💡 힌트

'이상'은 경계를 포함합니다. 19를 넣어 보세요.

예시 답안 보기

function isAdult(age) {
  return age >= 19;
}

2점수로 등급 매기기

grade(score)는 0~100점 점수를 받아 90 이상 "A", 80 이상 "B", 70 이상 "C", 그 밖에는 "F"를 돌려줍니다.

코드 · 저장해 둔 코드

function grade(score) {
  if (score >= 70) {
    return "C";
  } else if (score >= 80) {
    return "B";
  }
  // TODO: 순서를 바로잡고 A 와 F 를 더하세요
  return "?";
}

자동 검사

grade(100)기대값 "A"
grade(90)기대값 "A"
grade(89)기대값 "B"
grade(70)기대값 "C"
grade(69)기대값 "F"
grade(0)기대값 "F"

💡 힌트

높은 기준부터 검사합니다. return을 만나면 함수가 바로 끝나므로 뒤의 조건은 보지 않습니다.

예시 답안 보기

function grade(score) {
  if (score >= 90) {
    return "A";
  } else if (score >= 80) {
    return "B";
  } else if (score >= 70) {
    return "C";
  } else {
    return "F";
  }
}

3배송비 계산

가상의 쇼핑몰 규칙입니다. shippingFee(total, isMember)는 주문 금액 total이 30000 이상이거나 회원(isMember가 true)이면 0, 아니면 3000을 돌려줍니다. 단, 주문 금액이 0 이하(빈 주문)이면 회원 여부와 상관없이 0을 돌려주세요.

코드 · 저장해 둔 코드

function shippingFee(total, isMember) {
  // TODO: 빈 주문, 무료 배송 조건을 차례로 확인하세요
  return 3000;
}

자동 검사

shippingFee(29999, false)기대값 3000
shippingFee(30000, false)기대값 0
shippingFee(5000, true)기대값 0
shippingFee(0, false)기대값 0
shippingFee(1, false)기대값 3000

💡 힌트

빈 주문을 먼저 걸러 내고, 그다음 total >= 30000 || isMember를 검사합니다.

예시 답안 보기

function shippingFee(total, isMember) {
  if (total <= 0) {
    return 0;
  }
  if (total >= 30000 || isMember) {
    return 0;
  }
  return 3000;
}

4입장료와 잘못된 입력

가상의 박물관 입장료입니다. ticketPrice(age)는 7세 미만 0, 7세 이상 19세 미만 3000, 19세 이상 65세 미만 6000, 65세 이상 0을 돌려줍니다. 나이가 음수이거나 숫자가 아니면(typeof age !== "number") null을 돌려주세요.

코드 · 저장해 둔 코드

function ticketPrice(age) {
  // TODO: 잘못된 입력을 먼저 걸러 내세요 (null)
  if (age < 7) {
    return 0;
  }
  // TODO: 나머지 구간
  return 6000;
}

자동 검사

ticketPrice(6)기대값 0
ticketPrice(7)기대값 3000
ticketPrice(19)기대값 6000
ticketPrice(65)기대값 0
ticketPrice(-1)기대값 null
ticketPrice("20")기대값 null

💡 힌트

typeof age !== "number" || age < 0을 맨 앞에서 검사하면 뒤의 조건은 올바른 숫자만 다룹니다. '미만'은 <입니다.

예시 답안 보기

function ticketPrice(age) {
  if (typeof age !== "number" || age < 0) {
    return null;
  }
  if (age < 7) {
    return 0;
  } else if (age < 19) {
    return 3000;
  } else if (age < 65) {
    return 6000;
  }
  return 0;
}

🤖 AI에게 이렇게 물어보세요

복사해서 [ ] 부분을 내 상황으로 바꿔 쓰세요. 답을 그대로 믿지 말고 본문과 비교해 확인하세요.

조건 규칙을 코드로 옮기기 전에

다음 규칙을 JavaScript 조건문으로 옮기려고 해. 코드를 쓰기 전에 먼저 경계값(이상·초과·이하·미만)이 애매한 곳을 질문해 주고, 모든 경우를 입력·기대 결과 표로 정리해 줘. 표의 각 줄이 테스트 케이스가 되게 해 줘. 규칙: [규칙 설명]

AI가 써 준 조건문을 검토할 때

아래 조건문에서 (1) `else if` 순서 때문에 닿지 않는 갈래, (2) `==` 사용, (3) 0이나 빈 문자열을 falsy로 잘못 걸러 내는 곳, (4) 경계값이 규칙과 다른 곳이 있는지 하나씩 확인해 줘. 각 문제마다 그것을 드러내는 입력 값을 함께 알려 줘. 규칙: [규칙] 코드: [코드 붙여 넣기]

truthy·falsy 감각을 연습하고 싶을 때

JavaScript truthy·falsy와 `===`/`==` 비교에 관한 예측 문제 10개를 만들어 줘. 각 문제는 `if (값)`이 어느 갈래로 가는지 묻는 형식으로 하고, 답은 숨겨 두었다가 내가 답하면 까닭과 함께 알려 줘.

🧰 관련 도구

이 강의에서 다룬 JSON·정규식·텍스트를 바로 확인하고 다듬어 볼 수 있는 도구입니다. 실제 개인정보나 비밀번호는 붙여 넣지 마세요.

참고

MDN Web Docs — JavaScript 안내서(Guide)의 제어 흐름과 오류 처리(if...else), 표현식과 연산자
MDN Web Docs — Falsy·Truthy 용어 설명, 동치 비교와 동일성(Equality comparisons and sameness)
소프트웨어 테스트 입문서의 경계값 분석에 관한 일반적 내용

학습 목표를 모두 이뤘다면 완료를 눌러 진도에 기록하세요.

조건문 — 상황에 따라 다른 길로 가기

1.`if`와 `else` — 갈림길 만들기

2.`else if` — 여러 갈래는 위에서부터 차례로

3.비교 연산자와 `===` vs `==`

4.논리 연산자 — 그리고 `&&`, 또는 `||`, 아니다 `!`

5.truthy와 falsy — 불리언이 아닌 값도 조건이 된다

6.경계값 — 조건문은 경계에서 틀린다

📌 핵심 정리

✍️ 확인 문제

🧪 코드 실습

1성인인지 판단하기

2점수로 등급 매기기

3배송비 계산

4입장료와 잘못된 입력

🤖 AI에게 이렇게 물어보세요

🧰 관련 도구

💻 코딩 기초