모든 유용한 프로그램은 결국 결정 지점에 도달합니다. 이 버튼이 폼을 제출해야 할까요, 아니면 에러를 보여줘야 할까요? 이 사용자가 관리자 대시보드를 볼까요, 아니면 게스트 뷰를 볼까요? JavaScript는 조건문을 통해 이러한 질문에 답합니다. 조건문은 코드의 제어 밸브와 같습니다. 표현식이 true 또는 false로 평가되는지에 따라 한 경로를 열고 다른 경로는 닫습니다. 조건문이 없다면, 스크립트는 사용자의 동작에 전혀 반응하지 못한 채 위에서 아래로 그대로 흘러가 버릴 것입니다.
가장 단순한 분기: if
if 문은 가장 먼저 통과하게 되는 문과 같습니다. 괄호 안에 조건을 넣습니다. 그 조건이 true로 결정되면 아래의 코드 블록이 실행됩니다. 만약 false로 결정되면 JavaScript는 해당 블록을 완전히 건너뛰고 파일의 다음 부분을 계속 실행합니다.
이는 단순한 일회성 확인에 딱 필요한 방식입니다. 서버로 데이터를 보내기 전에 폼 필드의 유효성을 검사하는 상황을 가정해 보세요.
const email = document.getElementById("email").value;
if (email === "") {
alert("Please enter your email.");
}
이메일이 없으면 제출도 없습니다. 로직은 단순하고 명확합니다. 방어해야 할 특별한 케이스가 하나뿐이고 별도의 대안 동작이 필요하지 않을 때 if를 사용하세요.
양자택일 처리하기: if...else
대부분의 실제 결정은 두 가지 측면을 가집니다. if...else 쌍은 바로 그 상황을 다룹니다. 조건이 참일 때 실행되는 블록이 있고, 거짓일 때 실행되는 블록이 있습니다. 이 두 경로는 상호 배타적입니다.
페이지 로드 시 다크 모드 여부를 확인하는 상황을 생각해 보세요.
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (prefersDark) {
document.body.classList.add("dark");
} else {
document.body.classList.add("light");
}
브라우저는 두 클래스를 동시에 추가하는 일이 절대 없습니다. 하나의 경로를 선택해 실행한 뒤 다음으로 넘어갑니다. 로직이 두 가지 가능한 결과로 깔끔하게 나뉠 때마다 이 구조를 사용하면 됩니다.
여러 경로: if...else if...else
모든 문제가 두 가지 선택지로 나뉘는 것은 아닙니다. 때로는 여러 가능성의 사다리가 필요할 때가 있습니다. if...else if...else 체인을 사용하면 여러 조건을 순차적으로 테스트할 수 있습니다. JavaScript는 위에서 아래로 조건을 평가하며, 조건이 참인 첫 번째 블록을 실행합니다. 일단 일치하는 블록을 찾으면 나머지 사다리는 무시됩니다.
숫자 점수를 학점으로 매핑하는 것이 전형적인 예시입니다.
const score = 87;
let grade;
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else if (score >= 70) {
grade = "C";
} else {
grade = "F";
}
여기서는 순서가 매우 중요합니다. 만약 score >= 90을 확인하기 전에 score >= 70을 먼저 확인한다면, 거의 모든 합격 점수가 첫 번째 참인 조건에 걸려 C 등급에 갇히게 될 것입니다. 조건을 가장 구체적인 것부터 가장 덜 구체적인 순서로 배치하고, 마지막에는 항상 else를 사용하여 조건에 걸리지 않은 나머지 경우를 처리하도록 체인을 마무리하세요.
고정된 값 매칭하기: switch
하나의 변수를 알려진 상수 목록과 비교할 때, 긴 if...else 체인은 코드를 지저분하게 만듭니다. switch 문은 이를 깔끔하게 정리해 줍니다. 표현식을 한 번 평가한 다음, 엄격한 일치(===)를 사용하여 case 레이블과 비교합니다. 옵션이 개별적이고 이름이 지정되어 있을 때 코드를 훨씬 읽기 쉽게 만들어 줍니다.
현재 요일에 따라 매장 운영 시간을 설정하는 경우를 살펴보겠습니다.
const day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday hours: 10am - 4pm");
break;
case 6:
console.log("Saturday hours: 9am - 6pm");
break;
default:
console.log("Weekday hours: 8am - 8pm");
}
break 사용에 주의하세요. break를 생략하면 실행이 다음 case로 흘러내려가 계속 진행됩니다. 이러한 동작이 가끔 유용할 때도 있지만, 대부분의 경우 소리 없는 버그를 유발합니다. 올바르게 사용하면 switch는 의도를 한눈에 명확히 보여주며 관련 분기들을 하나의 깔끔한 열로 정렬해 줍니다.
간결한 결정: 삼항 연산자
? :로 작성되는 삼항 연산자는 문(statement)이 아니라 표현식(expression)입니다. 이 차이가 중요합니다