if 문의 기본 구조
if 문은 조건이 참일 때만 특정 코드 블록을 실행합니다. 구조는 간단합니다. if 키워드, 괄호 안의 조건, 그리고 중괄호로 감싼 블록이 순서대로 오면 됩니다.
age >= 18이라는 조건이 true이므로 블록이 실행됩니다. 만약 age가 16이었다면 조건이 false가 되어 자바스크립트는 블록 전체를 그냥 건너뜁니다.
블록 안에 문장이 하나뿐이라면 중괄호는 기술적으로 생략해도 되지만, 그래도 항상 붙이세요. 중괄호 없는 if문은 나중에 누군가 두 번째 줄을 추가하면서 그 줄이 블록 안에 포함되지 않는다는 걸 깜빡해서 생기는 대표적인 버그의 원인입니다.
else: 조건이 거짓일 때 실행되는 분기
조건이 거짓일 때 다른 코드를 실행하려면 if와 else를 함께 씁니다:
두 갈래 중 정확히 하나만 실행됩니다. 둘 다 실행되거나, 아무것도 실행되지 않는 일은 절대 없죠. else는 자체 조건을 받지 않습니다. 그저 "if가 거짓일 때"를 받아주는 기본 처리 구문일 뿐입니다.
else if로 여러 조건 분기하기
경우의 수가 두 개를 넘어갈 때는 else if로 이어 붙이면 됩니다. 자바스크립트는 조건을 위에서부터 차례대로 검사하다가, 참이 되는 첫 번째 조건을 만나면 거기서 멈춥니다:
하나의 분기만 실행됩니다. 조건이 하나 매칭되면 나머지는 설령 참이더라도 건너뜁니다. 그래서 순서가 중요한 거죠. 만약 체인을 뒤집어서 score >= 60을 먼저 검사한다면, 60점 이상인 사람은 전부 D를 받게 됩니다.
마지막 else는 선택 사항이지만, 붙여 두면 "앞의 조건 중 아무것도 맞지 않으면 이걸 실행해"라는 의도가 분명해집니다.
if문 조건에는 어떤 표현식이든 올 수 있다
괄호 안에 꼭 비교 연산만 들어가야 하는 건 아닙니다. 어떤 표현식이든 올 수 있고, 자바스크립트가 그 결과를 불리언으로 변환해 줍니다:
비어 있지 않은 문자열은 truthy입니다. 반면 0과 빈 문자열은 falsy라서 items.length가 0이면 else 가지로 빠지죠. "뭔가 값이 들어 있는지 확인하고 싶을 때" 자바스크립트에서 쓰는 관용적인 방법입니다.
falsy 값 목록은 의외로 짧으니까 그냥 외워두는 게 편합니다. false, 0, -0, 0n, "", null, undefined, NaN 이렇게 전부입니다. 이 외에는 전부 truthy예요. "0", "false", [], {}도 모두 truthy인데, 특히 빈 배열과 빈 객체에서 많이들 헷갈립니다.
조건 조합하기: &&와 ||
여러 조건을 한꺼번에 묶을 때는 &&(AND)와 ||(OR)를 씁니다:
&&는 양쪽 모두 truthy여야 하고, ||는 둘 중 하나만 truthy면 됩니다. 둘 다 단락 평가(short-circuit)를 하는데, &&는 falsy 값을 만나면 거기서 멈추고 ||는 truthy 값을 만나면 멈춥니다. 이 동작은 두 번째 조건에 부수 효과가 있거나 에러가 날 수 있을 때 특히 중요합니다. 예를 들어 user && user.name은 user가 null이어도 터지지 않고 안전하게 undefined를 돌려줍니다.
여러 연산자가 섞인 조건은 괄호로 묶어서 우선순위를 명확히 해두세요:
괄호를 빼면 &&가 ||보다 우선순위가 높게 묶이는데, 이게 보통 우리가 읽으면서 기대하는 순서와는 반대라서 헷갈리기 쉽습니다.
== vs === (무조건 === 쓰세요)
if 조건문 안에서 값을 비교할 때는 ==, != 말고 ===, !==를 쓰세요:
==는 비교 전에 타입을 먼저 변환하기 때문에 "" == 0이 true가 되거나 null == undefined가 true가 되는 당황스러운 상황이 생깁니다. 반면 ===는 타입 변환 없이 타입과 값이 모두 같은지를 비교합니다. 기본적으로 ===를 쓰는 걸 권장합니다. 딱 하나 자주 쓰는 예외가 있다면 x == null인데, 이렇게 쓰면 null과 undefined를 한 번에 체크할 수 있습니다.
자바스크립트 삼항 연산자
두 값 중에 하나를 고르는 상황이라면, 온전한 if/else보다 삼항 연산자 condition ? a : b가 훨씬 깔끔할 때가 많습니다:
삼항 연산자는 표현식 입니다. 즉, 값을 만들어 낸다는 뜻이죠. 문장(statement)인 if/else와 결정적으로 다른 점이 바로 여기에 있습니다. 결과값이 필요한 상황(변수에 할당하거나, return하거나, 문자열을 조립할 때)에는 삼항 연산자를 쓰고, 부수 효과(side effect)를 실행해야 할 때는 if/else를 쓰세요.
삼항 연산자를 연달아 이어 쓸 수도 있긴 한데, 가독성이 순식간에 바닥을 칩니다:
// 이렇게 하지 마세요:
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
연쇄적으로 조건을 검사해야 한다면 다시 else if를 쓰는 게 맞습니다.
중첩 if와 평탄한 else if 비교
어떤 조건은 다른 조건 안에서만 의미가 있을 때가 있습니다. 이런 경우라면 중첩해서 써도 괜찮습니다.
하지만 중첩이 3~4단계까지 깊어지면 코드 냄새(code smell)로 봐야 합니다. 이럴 때는 early return으로 풀어내거나 조건을 하나로 합쳐서 평탄하게 만드세요.
조기 리턴(early return)을 쓰면 각 분기가 짧아지고 들여쓰기 레벨도 일정하게 유지됩니다. if문이 피라미드처럼 중첩된 코드보다 훨씬 눈에 잘 들어오죠.
자주 하는 실수: if문 안에서 대입 연산자 쓰기
=는 대입, ===는 비교입니다. 조건문 안에서 이 둘을 헷갈리면 아주 전형적인 버그가 생깁니다:
status = "done"는 status에 "done"을 대입하면서 동시에 "done"으로 평가됩니다. 이 값은 truthy라서 블록은 항상 실행되고, 변수는 조용히 덮어써진 상태가 되죠. 린터는 이런 실수를 잡아주지만, strict 모드는 잡아주지 않습니다. 비교할 의도라면 ===를 쓰는 습관을 들이세요.
다음은 switch
하나의 값을 여러 후보와 비교해야 할 때는 긴 else if 체인이 금방 지루하게 느껴집니다. 자바스크립트의 switch문은 바로 이런 상황을 위해 만들어진 문법이에요. 대신 break와 fall-through(폴스루)와 관련된 특유의 함정이 있는데, 이 내용은 다음 장에서 다루겠습니다.
자주 묻는 질문
자바스크립트에서 if/else 문은 어떻게 작성하나요?
if 뒤 괄호 안에 조건식을 넣고, 중괄호로 실행할 블록을 감쌉니다. 그 뒤에 else와 또 다른 블록을 붙이면 조건이 거짓일 때 실행되죠. 예: if (age >= 18) { console.log('adult'); } else { console.log('minor'); }. 조건 자리에는 어떤 표현식이든 올 수 있고, 자바스크립트가 알아서 boolean으로 변환합니다.
else if와 중첩 if는 어떻게 다른가요?
else if는 여러 조건을 순서대로 체크하다가 처음 참이 되는 분기 하나만 실행하고 끝냅니다. 반면 중첩 if는 if 안에 또 다른 if를 넣어서, 보통 첫 조건이 참일 때만 두 번째 조건을 따로 검사할 때 씁니다. 분기를 쭉 나열하는 거라면 깊은 중첩보다 평평한 else if 체인이 훨씬 읽기 쉽습니다.
삼항 연산자는 언제 if/else 대신 쓰면 좋나요?
condition ? a : b처럼 두 값 중 하나를 골라 표현식 안에서 써야 할 때가 딱입니다. 변수에 할당하거나, 함수에서 값을 리턴하거나, 문자열을 조립할 때 유용하죠. 반대로 분기마다 부수 효과가 있는 문장을 실행해야 하거나 한쪽이 길어진다면 if/else가 낫습니다. 삼항을 줄줄이 이어 붙이면 금방 읽기 힘들어지니 주의하세요.
if (0)과 if (false)는 왜 똑같이 동작하나요?
사실 똑같이 동작합니다 — 둘 다 블록을 건너뛰죠. 자바스크립트는 조건을 boolean으로 변환하는데, 0, '', null, undefined, NaN, false가 모두 falsy로 취급됩니다. 함정은 따로 있어요. '0'(빈 문자열이 아닌 문자열)이나 [](빈 배열)은 truthy라서, 다른 언어에서 넘어온 분들이 종종 당황합니다.
