-
[JS] 조건문 알아보기Front-end/Javascript 2020. 11. 29. 22:17
조건문
조건문은 조건식의 값에 따라 실행 흐름을 분기합니다.
if / else 문
if / else는 만약 ...라면, 그렇지 않으면... 방식의 처리를 담당합니다.
if (조건식) { // 조건식이 true 일 때 실행 } else { // 조건식이 false 일 때 실행 }
괄호 안에는 만약에 대한 조건식이 포함되며, true일 경우 윗 블록이 실행되며 false일 경우 아랫 블록이 실행됩니다.
var count = 10; if (count > 0) { console.log(`count는 0보다 이상`); } else { console.log(`count는 0보다 이하`); }
count가 0보다 크다면 이상이, 0보다 작다면 이하가 나올 것입니다.
if / else if / else 문
else if는 만약 ~라면의 조건을 추가한다고 생각하면 편합니다.
var count = 7; if (count > 10) { console.log(`count는 10보다 이상`); } else if (count > 5) { console.log(`count는 5보다 이상`); } else { console.log(`count는 0보다 이하`); }
else if 조건에는 if와 마찬가지로 소괄호(()) 안에 조건을 입력하고 블록 내에 조건에 대한 코드를 입력합니다.
현재 예제에서는 count가 7이므로 if문의 조건을 패스하고(false기 때문) else if문을 만족해 5보다 이상 값이 출력될 것입니다.
보통 조건문 자체를 그대로 사용하는 경우도 있지만 보통함수
에서 어떤 값을 처리하기 위해 많이 사용하곤 합니다. if / else를 사용해 간단한 함수를 만들어보겠습니다.function isAdult(age) { if (age > 19) { console.log(`${age}세는 성인입니다.`); } else { console.log(`${age}세는 미성년자입니다.`); } }
나이를 인수로 받아 성인, 미성년을 구분하는 간단한 함수입니다.
또한 연산자에서 살펴봤던 조건(삼항) 연산자를 통해서도 위 예제와 같이 활용 가능합니다.function isAdult(age) { age > 19 ? console.log(`${age}세는 성인입니다.`) : console.log(`${age}세는 미성년자입니다.`); }
위 예제처럼 어떤 값을 받아 판단하고 조건에 맞는 상황을 출력, 가공할 때 매우 유용하게 사용됩니다.
switch 문
switch문을 사용하면 분기점 여러 개를 더욱 간결하게 표현할 수 있습니다.
switch (표현식) { case 표현식 1 : 실행문 1 case 표현식 2 : 실행문 2 case 표현식 3 : 실행문 3 case 표현식 n : 실행문 n ... default : 실행문 n + 1 }
표현식에 어떤 값을 넣으면 그 표현식에 대한 인수값이 case별로 정해진 표현식에 맞는 경우 해당 case의 실행문을 실행하는 구조입니다.
switch (n) { case 1: console.log("One"); break; case 2: console.log("Two"); break; case 3: console.log("Three"); break; default: console.log("Other"); }
여기서
표현식은 n
이고, n이 1, 2, 3일 경우 그리고 아닐 경우 각 숫자의 영문을 출력하는 예제입니다.
그런데 표현식에 대한 case가 끝나면 어떻게 조건을 끝낼까요?
바로break
를 통해 문장에서 빠져나옵니다. break 문이 실행되는 순간 블록 문장에서 빠져나와 다음 작업을 시작합니다.
switch의 case에는 시작만 명시할 뿐 분기의 끝이 표현되어있지 않기 때문에 break를 통해 문장에서 빠져나오는 것이죠.
따라서 각 case의 실행문의 마지막에는 일반적으로 break 문을 넣습니다.'Front-end > Javascript' 카테고리의 다른 글
[JS] 클래스 알아보기 (0) 2020.11.29 [JS] 반복문 알아보기 (0) 2020.11.29 [JS] 이벤트 알아보기 (0) 2020.11.29 [JS] 연산자 알아보기 (0) 2020.11.29 [JS] 함수 알아보기 (0) 2020.11.29