모든 프로그램은 반응해야 합니다. 사용자가 버튼을 클릭하거나, API가 데이터를 반환하거나, 폼 필드가 비워지는 등의 상황 말이죠. 분기할 방법이 없다면, 코드는 실제로 어떤 일이 일어나고 있는지와 상관없이 단순히 한 줄씩 실행될 뿐입니다. 조건문은 JavaScript에 선택할 수 있는 능력을 부여합니다. 조건문은 함수 내부의 의사 결정자이자, 어떤 코드를 실행하고 어떤 코드를 건너뛸지 결정하는 문지기 역할을 합니다. 조건문을 잘 작성하는 법을 익히고 나면, 경직된 스크립트를 작성하는 데 그치지 않고 실제로 반응하는 소프트웨어를 만들기 시작할 것입니다.
조건문이 중요한 이유
제어 흐름(Control flow)은 로직의 중추입니다. 서버에 비밀번호를 전송하기 전에 유효성을 검사할 때 조건문을 사용합니다. 세금을 계산하기 전에 장바구니가 비어 있는지 확인합니다. 네트워크 요청이 실패했는지 감지하여 빈 화면 대신 에러 메시지를 보여줄 수도 있습니다. 이러한 시나리오는 모두 '무언가를 평가한 뒤, 그에 따라 행동한다'는 동일하고 단순한 아이디어에 기반합니다.
조건문이 없다면 여러분의 애플리케이션은 대화가 아닌 독백이 될 것입니다. 다양한 데이터 시나리오를 처리하거나, 에러를 우아하게 관리하거나, 사용자의 행동에 의미 있게 반응할 수 없게 됩니다. 조건문을 통해 현실 세계의 불확실성 속에서도 프로그램이 어떻게 실행될지 제어할 수 있습니다.
기본 if 문
가장 간단하게 시작할 수 있는 방법은 단독 if 문입니다. "이 조건이 참이면, 이 작업을 수행하라"는 뜻입니다. 그게 전부입니다. 대안이나 다른 경로는 없습니다.
if (x % 2 === 0) {
console.log("Even");
}
이 코드 조각에서 나머지 연산자(modulus operator)는 x가 2로 나누어떨어지는지 확인합니다. 나머지가 0이면 콘솔에 문자열을 출력합니다. 만약 x가 홀수라면 아무 일도 일어나지 않습니다. 해당 블록은 무시되고 실행은 그 아래로 계속됩니다.
이러한 '조용한 무시'는 중요합니다. 때로는 단 하나의 동작만을 보호하고 싶을 때가 있기 때문입니다. 예를 들어 버튼이 활성화되었을 때만 CSS 클래스를 추가하거나, 입력값이 비어 있지 않을 때만 배열에 항목을 추가하고 싶을 수 있습니다. 단독 if 문은 불필요한 로직을 작성할 필요 없이 이러한 순간들을 처리해 줍니다.
if-else로 대안 추가하기
실제 의사 결정은 대개 두 가지 측면을 가집니다. 사용자가 충분한 연령인지 아닌지, 결제가 성공했는지 실패했는지와 같은 식입니다. if-else 구조는 이 두 가지를 모두 다룹니다.
if (age >= 18) {
console.log("Adult");
} else {
console.log("Not an Adult");
}
else 블록은 첫 번째 조건이 거절한 모든 것을 잡아냅니다. 이는 깔끔한 이진 분기(binary branch)를 만듭니다. 이 패턴은 토글, 권한 설정, 피처 플래그(feature flags)에 유용합니다. 각 블록 내부의 로직은 집중된 상태를 유지하세요. 만약 하나의 분기에 너무 많은 작업을 쌓아두고 있다면, 이는 보통 작업을 더 작은 함수로 나누어야 한다는 신호입니다.
else if로 여러 경로 확인하기
인생에서 선택지가 단 두 가지만 있는 경우는 드뭅니다. 숫자를 양수, 음수, 또는 0으로 분류해야 할 수도 있고, 무게 구간에 따라 배송비를 책정해야 할 수도 있습니다. 순차적인 다중 비교가 필요할 때는 else if를 사용하세요.
if (x > 0) {
console.log("Positive");
} else if (x < 0) {
console.log("Negative");
} else {
console.log("Zero");
}
JavaScript는 이를 위에서 아래로 평가합니다. 조건 중 하나라도 통과하면 해당 블록을 실행하고 나머지는 무시합니다. 순서가 중요합니다. 만약 x > 100을 확인한 뒤에 x > 0을 확인한다면, 더 느슨한 조건이 먼저 걸러지기 때문에 더 엄격한 조건은 절대 실행되지 않을 것입니다. else if를 우선순위 목록이라고 생각하세요.
switch 문
하나의 값을 여러 개의 개별 옵션과 비교할 때, 길게 늘어진 else if 문은 반복적으로 느껴질 수 있습니다. switch 문은 이를 깔끔하게 정리해 줍니다. 표현식을 case 절과 일치시켜 일치하는 블록을 실행합니다.
switch (true) {
case marks >= 90:
Branch = "Computer science";
break;
case marks >= 80:
Branch = "Mechanical";
break;
default:
Branch = "Other";
}
이 예제는 switch(true)를 사용하여 불리언(boolean) 조건을 직접 평가합니다. 이는 로직이 정확한 일치보다는 범위에 의존할 때 자주 사용되는 JavaScript 패턴입니다. break 키워드는 필수적입니다. break가 없으면 일치 여부와 상관없이 실행이 다음 case로 넘어가 버리는데(fall through), 이는 대개 의도한 결과가 아닙니다. default 절은 마지막 else처럼 작동하여 이전 case들에 해당하지 않는 모든 것을 잡아냅니다.
switch 문은 명확하고 고정된 옵션이 있을 때 빛을 발합니다. 특히 각 분기가 단순히 값을 할당하거나 단일 함수를 호출하는 경우, 길게 늘어선 else if 블록보다 훑어보기가 훨씬 쉽습니다.
삼항 연산자
짧은 이진 결정을 내릴 때는 삼항 연산자를 사용하여 코드를 간결하게 유지할 수 있습니다. 삼항 연산자는 세 개의 피연산자를 가집니다: 조건, 참일 때의 값, 거짓일 때의 값.
const result = (age >= 18) ? "Eligible" : "Not eligible";
빠른 값 할당이나 인라인 반환(inline return)에 사용할 수 있습니다. 결과가 단순한 표현식일 때 효과적입니다. 삼항 연산자를 3단계 이상 중첩하고 싶은 유혹을 뿌리치세요. 중첩된 삼항 연산자는 코드 줄 수는 줄여줄지 몰라도 가독성을 해칩니다. 로직이 복잡해진다면, 파일을 열어볼 다음 개발자를 위해 if-else 블록을 사용하는 것이 훨씬 친절한 선택입니다.
중첩된 결정
복잡한 로직은 때때로 후속 질문을 필요로 합니다. 결정을 더 정교하게 만들기 위해 if 문 안에 또 다른 if 문을 중첩할 수 있습니다.
if (weather === "sunny") {
if (temp > 30) {
console.log("