Learn JavaScript조건문
항상 똑같은 일만 하는 프로그램은 쓸모가 별로 없습니다. 로그인한 방문자에게는 한 가지 메시지를 보여주고 낯선 사람에게는 다른 메시지를 보여주는 페이지, 18세는 통과시키지만 12세는 통과시키지 않는 폼, 이기고 졌는지를 알려주는 게임이 필요할 때가 있습니다. 이런 것들은 모두 질문을 던지고 그 답에 따라 행동하는 방법이 필요합니다. 조건문이 바로 그런 역할을 합니다. 조건문을 사용하면 어떤 것이 참인지에 따라 코드가 무엇을 실행할지 선택할 수 있습니다.
필요한 재료는 이미 갖고 있습니다. 비교 연산자와 논리 연산자가 참 또는 거짓의 답을 만들어내고, 이 장에서는 그 답에 따라 행동하는 방법을 다룹니다.
조건이 참일 때만 코드 실행하기
**if문**은 조건이 참일 때만 코드 블록을 실행합니다. if라는 단어를 쓰고, 괄호 안에 조건을 적고, 중괄호 안에 실행할 블록을 작성합니다. 조건이 참이면 블록이 실행됩니다. 참이 아니면 JavaScript는 블록을 건너뛰고 다음으로 넘어갑니다.
const age = 20;
if (age >= 18) {
console.log("You can enter."); // You can enter.
}age >= 18이라는 조건은 참이거나 거짓입니다. 여기서는 age가 20이므로 참이 되어 메시지가 출력됩니다. age를 12로 바꾸면 조건이 거짓이 되어 블록이 건너뛰어지고 아무것도 출력되지 않습니다.
조건이 거짓일 때를 위한 대안이 필요한 경우가 많습니다. 이때 사용하는 것이 바로 else입니다:
const age = 12;
if (age >= 18) {
console.log("You can enter.");
} else {
console.log("Come back when you are older."); // Come back when you are older.
}두 블록 중 정확히 하나만 실행되며, 둘 다 실행되는 경우는 없습니다. 결과가 두 가지보다 많을 때는 else if를 사용해 또 다른 조건을 확인할 수 있습니다:
const score = 74;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 70) {
console.log("Grade: B"); // Grade: B
} else {
console.log("Grade: C");
}JavaScript는 위에서부터 각 조건을 확인하며 처음으로 참이 되는 조건에서 멈춥니다. 74점은 >= 90은 아니지만 >= 70이므로 Grade: B가 출력되고, else는 확인하지 않습니다.
if는 괄호 안 조건이 참일 때만 블록을 실행하고, else는 조건이 거짓일 때를 위한 대안을 제공합니다. 결과가 두 가지보다 많다면 else if를 추가하세요. JavaScript는 위에서부터 확인해 처음 일치하는 조건에서 멈추므로, 조건의 순서를 의미 있게 배치해야 합니다. 삼항 연산자로 값 선택하기
때로는 if / else가 하는 일이 딱 하나, 두 값 중 하나를 고르는 것뿐인 경우가 있습니다. 이럴 때 쓰는 더 짧은 형태가 **삼항 연산자**입니다. 조건을 쓰고, ?를 쓰고, 참일 때 사용할 값을 쓰고, :를 쓰고, 거짓일 때 사용할 값을 씁니다.
const age = 20;
const message = age >= 18 ? "Welcome" : "Too young";
console.log(message); // Welcome이것을 질문처럼 읽어 보세요. age >= 18인가요? 그렇다면 message는 "Welcome"이 되고, 그렇지 않다면 "Too young"이 됩니다. if / else가 내리는 것과 똑같은 결정을 한 줄로 표현한 것입니다.
삼항 연산자는 저장하거나 출력할 값을 고를 때 가장 빛을 발합니다. 한쪽 분기에서 여러 가지 일을 해야 한다면 if문이 더 명확하므로, 양쪽이 모두 단일 값일 때만 삼항 연산자를 사용하세요.
condition ? valueIfTrue : valueIfFalse. 저장하거나 출력할 값을 고를 때 특히 빛을 발합니다. 분기가 단일 값을 반환하는 것 이상의 일을 해야 한다면 대신 완전한 if를 사용하세요. 그러는 편이 더 명확하게 읽힙니다. switch로 하나의 값을 고정된 케이스들과 비교하기
하나의 값을 정해진 여러 가지 가능성과 비교해야 할 때는 긴 if / else if 체인보다 **switch문**이 더 깔끔할 수 있습니다. 확인할 값을 지정한 다음, 그 값과 비교할 케이스들을 나열합니다.
const day = "Tue";
switch (day) {
case "Sat":
console.log("Weekend");
break;
case "Sun":
console.log("Weekend");
break;
default:
console.log("Weekday"); // Weekday
}switch는 day를 각 case와 차례로 비교합니다. 일치하는 항목을 찾으면 그 case의 코드를 실행합니다. break는 여기서 멈추라는 뜻이고, 이것이 없으면 JavaScript는 계속 다음 case로 넘어가며 실행합니다. default는 어떤 case도 일치하지 않을 때 실행되는 대안으로, 체인의 마지막 else와 비슷한 역할을 합니다.
break를 빠뜨리는 것이 switch에서 가장 흔히 하는 실수입니다. break를 빼먹으면 일치한 case를 실행한 뒤 break나 끝에 도달할 때까지 그 아래의 모든 case를 계속 실행하게 되는데, 이는 거의 항상 의도한 바가 아닙니다.
switch는 하나의 값을 여러 case 옵션과 비교해 일치하는 것을 실행하며, default가 그 무엇과도 일치하지 않을 때의 대안이 됩니다. 각 case는 항상 break로 끝내야 합니다. 그렇지 않으면 JavaScript는 아래에 있는 case들을 계속 실행합니다. 이 break 누락은 거의 누구나 한 번쯤은 저지르는 실수입니다. 올바른 도구 선택하기
이제 결정을 내리는 세 가지 방법을 알게 되었고, 어떤 것을 선택할지는 상황에 얼마나 잘 맞는지에 달려 있습니다. 대부분의 분기, 특히 조건이 범위이거나 여러 조건의 조합일 때는 if / else if / else 체인을 사용하세요. 저장하거나 출력할 두 값 중 하나를 고를 때는 삼항 연산자를 사용하세요. 하나의 값을 몇 가지 고정된 선택지와 비교할 때는 switch를 사용하세요.
이 중 어느 것도 다른 것보다 더 고급이거나 뛰어난 것은 아닙니다. 여러분의 결정을 가장 명확하게 표현하는 것을 선택하세요. 확신이 서지 않는다면 if문이 언제나 안전한 기본 선택입니다.
if 체인을 사용하고, 두 값 중 하나를 고를 때는 삼항 연산자를, 하나의 값을 고정된 선택지와 매칭할 때는 switch를 사용하세요. 어느 것도 다른 것보다 더 화려하거나 대단한 것은 아닙니다. 결정을 가장 명확하게 표현하는 것을 고르고, 확신이 없다면 기본적으로 if를 사용하세요. 조건문, 그 다음은?
조건문은 프로그램이 정해진 스크립트에 머무르지 않고 입력에 반응하도록 만들어주는 도구입니다. 조건문은 정말 자주 사용하게 되며, 주변의 다른 모든 것과 결합됩니다. 참 또는 거짓의 답은 연산자에서 나오고, 여기서 배운 결정들은 반복문으로 데이터에 대해 반복해서 실행하고 함수로 묶어낼 수 있게 되었을 때 진짜 힘을 발휘합니다.
다음 장인 반복문에서는 제어 흐름의 나머지 절반을 다룹니다. 코드를 실행할지 여부를 선택하는 것뿐 아니라, 조건이 멈추라고 알려줄 때까지 코드를 계속 반복해서 실행하는 방법입니다.