조건에 따라 다르게 취해야할 때, if문과 ‘물음표’ 연산자라고도 불리는 조건부 연산자 ?를 사용한다.
1) 'if’문
if()문은 괄호 안에 들어가는 조건을 실행하는데 그 결과가 true이면 코드 블록이 실행된다.
let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');
if (year == 2015) alert( '정답입니다!' );예시 조건(year == 2015)보다 조건문믈 더 복잡하게 할 수 있다. 조건이 true일 때 코드를 실행하고 싶다면 중괄호로 코드 블록을 감싸면 된다.
if (year == 2015) {
alert( "정답입니다!" );
alert( "아주 똑똑하시네요!" );
}if문을 쓸 때는 조건이 참일 경우 실행되는 구문이 한 줄만있더라도 중괄호 {}를 사용해 코드를 블록으로 감싸는 것이 코드의 가독성을 높일 수 있다.
2) 불린형으로 변환
if()문은 괄호 안의 표현식을 실행하고 그 결과를 불린값으로 변환한다.
숫자 0, 빈 문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false가 된다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 한다.
이 외의 값은 불린형으로 변환시 true가 되므로 ‘truthy(참 같은)’ 값이다.
이에따라 아래 코드 블록은 절대 실행되지 않는다.
if (0) { // 0은 falsy
...
}아래 예시의 코드 블록은 실행된다.
if (1) { // 1은 truthy
...
}아래와 같이 실행을 통해 확정된 불린값을 if문에 전달할 수도 있다.
let cond = (year == 2015); // 동등 비교를 통해 true/false 여부를 결정
if (cond) {
...
}3) 'else’
if에는 else를 붙일 수 있다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.
let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');
if (year == 2015) {
alert( '정답입니다!' );
} else {
alert( '오답입니다!' ); // 2015 이외의 값을 입력한 경우
}4) 'else if’로 복수 조건 처리
조건 여러 개를 처리해야 할 경우 else if를 사용한다.
let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');
if (year < 2015) {
alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
alert( '숫자를 좀 더 내려보세요.' );
} else {
alert( '정답입니다!' );
}위 예시에서, 자바스크립트는 if(year < 2015)를 먼저 실행하여 이 조건이 거짓이라면 다음 조건 else if(year > 2015)를 실행한다. 이 조건 또한 거짓일 경우, else 절 내의 alert를 실행한다.
5) 조건부 연산자 ‘?’
조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다.
let accessAllowed;
let age = prompt('나이를 입력해 주세요.', '');
if (age > 18) {
accessAllowed = true;
} else {
accessAllowed = false;
}
alert(accessAllowed);'물음표(question mark) 연산자’라고도 불리는 '조건부(conditional) 연산자’를 사용하면 위 예시를 더 짧고 간결하게 변형할 수 있다.
조건부 연산자는 물음표?로 표시한다. 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고 불리기도 한다.
let result = condition ? value1 : value2;condition이 truthy라면 value1이, 그렇지 않으면 value2가 실행된다.
let accessAllowed = (age > 18) ? true : false;age > 18의 괄호는 아래와 같이 생략 가능하다.
물음표 연산자는 우선순위가 낮으므로 비교 연산자(>)가 실행되고 난 뒤에 실행된다.
// 비교 연산 'age > 18'이 먼저 실행
// (조건문을 괄호로 감쌀 필요 없다.)
let accessAllowed = age > 18 ? true : false;괄호가 있으나 없으나 차이는 없지만 코드 가독성을 위해 괄호를 사용하는 편이 좋다.
6) 다중 ‘?’
물음표 연산자?를 여러 개 연결사용하여 복수 조건을 처리할 수 있다.
let age = prompt('나이를 입력해주세요.', 18);
let message = (age < 3) ? '아기야 안녕?' :
(age < 18) ? '안녕!' :
(age < 100) ? '환영합니다!' :
'나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
alert( message );- 첫 번째 물음표 조건문 age < 3을 실행
- 결과가 참이면 '아기야 안녕?'를 출력. 그렇지 않다면 첫 번째 콜론 ":"에 이어지는 조건문 age < 18실행
- 그 결과가 참이면 '안녕!'을 출력. 그렇지 않다면 다음 콜론 ":"에 이어지는 조건문 age < 100을 실행
- 그 결과가 참이면 '환영합니다!'를 출력. 그렇지 않다면 마지막 콜론 ":" 이후의 표현식인 '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'를 출력.
else if를 이용하여 위 코드를 아래와 같이 변형할 수 있다.
if (age < 3) {
message = '아기야 안녕?';
} else if (age < 18) {
message = '안녕!';
} else if (age < 100) {
message = '환영합니다!';
} else {
message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}7) 부적합한 ‘?’
물음표?를 if 대용으로 쓰는 경우를 종종 볼 수있다.
let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');
(company == 'Netscape') ?
alert('정답입니다!') : alert('오답입니다!');위 예시에선 실행 결과를 변수에 할당하지 않고 결과에 따라 실행되는 표현식이 달라지도록 했다.
하지만 이러한 물음표 연산자를 사용하지 않는 편이 좋다. if문을 사용할 때 보다 코드 길이가 짧아진다는 점 때문에 물음표?를 if 대신 쓰기 좋다고 생각할 수 있지만, 코드 가독성은 떨어진다.
아래는 if를 사용한 코드이다.
let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');
if (company == 'Netscape') {
alert('정답입니다!');
} else {
alert('오답입니다!');
}코드를 읽을 때 우리의 눈은 수직으로 움직이기 때문에 수평으로 길게 늘어진 코드보다는 여러 줄로 나뉘어 작성된 코드 블록이 더 읽기 좋다.
물음표 연산자?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌. 여러 문장을 만들어 처리할 때는 if를 사용하자.
