조건문
1. 조건문
조건문은 주어진 조건이 참(Truthy)인지 거짓(Falsy)인지에 따라 코드의 실행 여부를 결정합니다. 마치 길을 가다가 신호등을 만났을 때, 초록불이면 가고 빨간불이면 멈추는 것과 비슷합니다.
이를 코드로 표현해보면 아래와 같죠. 자바스크립트 문법이 아니라 영어 문법대로 읽어보세요. 초록불을 false로도 바꿔보세요.
조건문이 왜 필요할까요? 조건문을 사용하면 조건에 따라 다양한 처리를 할 수 있습니다. 예를 들어, 사용자가 로그인했는지 여부에 따라 다른 화면을 보여주거나, 쇼핑몰에서 특정 조건을 만족하는 상품만을 필터링할 때 조건문이 유용합니다.
1.1. if문
다음은 기본적인 if문의 예시입니다.
if (조건식) {
// 조건을 만족했을 때 실행될 코드
}if (조건식) {
// 조건을 만족했을 때 실행될 코드
}중괄호 생략
중괄호 안의 코드가 한 줄 뿐이라면 중괄호를 아래와 같이 생략해서 한 줄로 작성할 수 있습니다.
if (true) console.log('중괄호를 생략했습니다.');if (true) console.log('중괄호를 생략했습니다.');하지만 여러 사람이 함께 코드를 읽고 수정할 경우, 가독성을 위해 중괄호를 사용하는 것이 좋습니다. 특히 짧은 코드가 항상 좋은 코드라고 생각하지 않는 것이 좋습니다.
1.2. if - else 문
if문은 조건이 참일 때만 실행되기 때문에, 위 조건이 만족하지 않을 때 실행할 코드가 필요할 때는 else문을 사용합니다. else문은 단독으로 사용할 수 없으며 if문과 함께 사용해야 합니다.
if (조건식) {
// 조건을 만족했을 때 실행될 코드
} else {
// 조건을 만족하지 않았을 때 실행될 코드
}if (조건식) {
// 조건을 만족했을 때 실행될 코드
} else {
// 조건을 만족하지 않았을 때 실행될 코드
}1.3. if - else if - else 문
여러 조건을 처리해야 할 때는 else if를 사용하여 다양한 경우를 처리할 수 있습니다. 이는 시험 점수에 따라 등급을 나누는 것과 비슷합니다.
if (조건식1) {
// 조건식1이 참일 때 실행될 코드
} else if (조건식2) {
// 조건식2가 참일 때 실행될 코드
} else {
// 모든 조건이 거짓일 때 실행될 코드
}if (조건식1) {
// 조건식1이 참일 때 실행될 코드
} else if (조건식2) {
// 조건식2가 참일 때 실행될 코드
} else {
// 모든 조건이 거짓일 때 실행될 코드
}조건식의 평가 순서는 위에서 아래로 순차적으로 진행됩니다. if문의 조건식이 먼저 평가되고, 이 조건이 거짓인 경우에만 다음 else if문의 조건식의 평가로 넘어갑니다. 참인 조건을 만날 때까지 순차적으로 평가되며, 참인 조건을 만나면 해당 블록의 코드가 실행하고 조건문을 종료합니다. 참인 조건이 없는 경우 else 블록의 코드가 실행됩니다.
2. 삼항 연산자 (Conditional ternary operator)
삼항 연산자는 if-else문을 더 간결하게 표현할 수 있는 조건부 연사자입니다. 주로 간단한 조건식에서 사용되며, 코드를 한 줄로 작성할 수 있습니다.
조건식 ? (조건식이 참일 때 실행되는 코드) : (조건식이 거짓일 때 실행되는 코드)조건식 ? (조건식이 참일 때 실행되는 코드) : (조건식이 거짓일 때 실행되는 코드)조건식이 참이면 콜론(:) 앞의 코드가 실행되고, 조건식이 거짓이면 콜론 뒤의 코드가 실행됩니다. 또한 삼항 연산자는 값으로 사용될 수 있기 때문에 변수에 할당할 수 있습니다.
if문과 삼항 연산자의 차이
- 삼항 연산자는 표현식으로 값을 반환하고 변수에 할당할 수 있습니다.
- if문은 문(statement)으로 코드 블록을 실행하고, 값의 반환은 하지 않습니다.
삼항 연산자는 중첩하여 사용할 수 있으며, 조건에 따라서 다양한 값을 반환할 수 있습니다. 아래 코드는 시험 점수에 따라 학점을 반환하는 코드입니다. if문으로 작성했던 코드와 비교하여 삼항 연산자를 이용하면 코드를 가볍게 만들 수 있습니다. 하지만 삼항 연산자가 여러 조건을 비교하여 중첩될 경우 가독성이 떨어질 수 있습니다.
let score = 85;
let grade =
score >= 90
? 'A'
: score >= 80
? 'B'
: score >= 70
? 'C'
: score >= 60
? 'D'
: 'F';
console.log(`당신의 학점은 ${grade}입니다.`);let score = 85;
let grade =
score >= 90
? 'A'
: score >= 80
? 'B'
: score >= 70
? 'C'
: score >= 60
? 'D'
: 'F';
console.log(`당신의 학점은 ${grade}입니다.`);3. switch 문
if-else 조건문 외에도, switch 문을 사용하여 여러 조건에 대한 실행 코드를 작성할 수 있습니다. switch문은 여러 조건을 비교할 때 유용합니다. if-else문과 같이 switch 문도 조건에 따라 코드의 분기가 일어나는 구조입니다.
switch문은 하나의 표현식을 여러 값과 비교하여 실행할 코드를 결정합니다.
switch (표현식) {
case 값1:
// 값1에 대한 실행 코드
break;
case 값2:
// 값2에 대한 실행 코드
break;
...
default:
// 모든 case에 해당하지 않을 때 실행될 코드
break;
}switch (표현식) {
case 값1:
// 값1에 대한 실행 코드
break;
case 값2:
// 값2에 대한 실행 코드
break;
...
default:
// 모든 case에 해당하지 않을 때 실행될 코드
break;
}값의 비교
표현식과 case 값의 비교는 엄격한 비교(일치 연산) 으로 수행됩니다. 따라서 값과 자료형이 일치해야 합니다.
예를 들어, 요일에 따라 다른 메시지를 출력하는 코드를 작성해 보겠습니다.
3.1. break
break문은 switch문에서 중요한 역할을 합니다. 위의 코드처럼 break가 없다면, 조건이 참인 case 이후 조건 평가 없이 모든 코드를 실행합니다. 이 현상을 fall through라고 합니다. 이를 방지하기 위해 각 case 뒤에 break를 추가해야 합니다. break를 만나면 switch문을 빠져나오게 됩니다. break를 추가하여 코드를 수정해보겠습니다.
3.2. default
switch문에는 default문을 추가할 수 있습니다. default문은 모든 case에 해당하지 않을 때 실행됩니다. default는 필수가 아닌 선택사항입니다.