모던 JavaScript 튜토리얼을 따라가면서 정리합니다.
2.10. if와 ‘?’를 사용한 조건 처리
‘if’문
if문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환한다.
- falsy(거짓 같은) 값: 숫자 0, 빈 문자열
"",null,undefined,NaN와 같이 불린형으로 변환 시false가 되는 값 - truthy(참 같은) 값: falsy 값 이외의 값은 불린형으로 변환 시
true가 된다.
조건부 연산자 ‘?’
조건에 따라 다른 값을 변수에 할당해줘야 할 때 사용한다.
1
let result = condition ? value1 : value2;
다음 if else 문을 조건부(conditional) 연산자(물음표(question mark) 연산자; 삼항(ternary) 연산자)를 사용하여 간결하게 변형할 수 있다.
1
2
3
4
5
6
7
8
let accessAllowed;
let age = prompt('나이를 입력해 주세요.', '');
if (age > 18) {
accessAllowed = true;
} else {
accessAllowed = false;
}
1
2
3
let accessAllowed = (age > 18) ? true : false;
// let accessAllowed = age > 18 ? true : false;
// let accessAllowed = age > 18;
부적절한 ‘?’
물음표 ?를 if 대용으로 쓰는 경우가 종종 있다. 다음과 같이 물음표 연산자를 사용하는 것은 좋지 않다.
1
2
3
4
let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');
(company == 'Netscape') ?
alert('정답입니다!') : alert('오답입니다!');
물음표 연산자 ?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 따라서 목적에 부합하도록 평가 결과를 변수에 할당할 때 사용하는 것이 좋다.
위 코드는 다음과 같이 바꿔 쓰는 것이 가독성에 더 좋다.
1
2
3
4
5
6
7
let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');
if (company == 'Netscape') {
alert('정답입니다!');
} else {
alert('오답입니다!');
}
과제
if와 문자열 0
다음 코드에서 alert은 실행된다. "0"은 truthy한 값이기 때문에 불린형으로 바꿨을때 true가 반환된다. 빈 문자열을 제외한 모든 문자열은 논리 평가 시 true를 반환한다.
1
2
3
if ("0") {
alert( 'Hello' );
}
‘if’를 ‘?’로 교체하기
1
2
3
4
5
6
7
let result;
if (a + b < 4) {
result = '미만';
} else {
result = '이상';
}
위 코드는 다음과 같이 변형될 수 있다.
1
let result = (a + b < 4) ? '미만' : '이상'
‘if…else’를 ‘?’로 교체하기
1
2
3
4
5
6
7
8
9
10
11
let message;
if (login == '직원') {
message = '안녕하세요.';
} else if (login == '임원') {
message = '환영합니다.';
} else if (login == '') {
message = '로그인이 필요합니다.';
} else {
message = '';
}
위 코드는 다음과 같이 변형될 수 있다.
1
2
3
4
5
let message =
(login == '직원') ? '안녕하세요' :
(login == '임원') ? '환영합니다.' :
(login == '') ? '로그인이 필요합니다.' :
'';