출처: https://ko.javascript.info/ifelse
if와 ‘?’를 사용한 조건 처리
조건에 따라 다른 행동을 취해야 할 때는, if문과 조건부 연산자 ?(물음표 연산자)를 사용하면 된다.
‘if’문
if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행된다.
조건이 true일 때 복수의 문을 실행해야 한다면 중괄호로 코드 블록 감싸야 한다. 그러나 조건이 참일 경우 실행되는 구문이 단 한 줄이더라도 코드 가독성을 위해 중괄호 {}를 사용해 코드를 블록으로 감싸야 한다.
불린형으로의 변환
if (…) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환한다.
형 변환 규칙
- falsy 값: 숫자
0, 빈 문자열"",null,undefined,NaN은 불린형으로 변환 시 모두false가 된다. - ‘truthy’ 값: 이 외의 값은 불린형으로 변환시
true가 된다.
예시
절대 실행되지 않는 코드 블록:
if (0) {}항상 실행되는 코드블록:
if (1) {}평가를 통해 확정된 불린값을
if문에 전달할 수도 있다.
1
2
3
4
5
let cond = (year == 2015); // 동등 비교를 통해 true/false 여부를 결정한다.
if (cond) {
...
}
‘else’절
if문엔 else 절을 붙일 수 있다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.
‘else if’로 복수 조건 처리하기
유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야 할 때가 있다. 이때 else if를 사용할 수 있다.
1
2
3
4
5
6
7
8
9
let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');
if (year < 2015) {
alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
alert( '숫자를 좀 더 내려보세요.' );
} else {
alert( '정답입니다!' );
}
위 예시에서, 자바스크립트는 조건 year < 2015를 먼저 확인한다. 이 조건이 거짓이라면 다음 조건 year > 2015를 확인한다. 이 조건 또한 거짓이라면 else 절 내의 alert를 실행한다. 마지막 else는 선택사항이다.
조건부 연산자 ‘?’
- 조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다. 이때 조건부 연산자를 사용한다.
- ‘조건부(conditional) 연산자’는 ‘물음표(question mark) 연산자’, ‘삼항(ternary) 연산자’라고도 불린다.
let result = condition ? value1 : value2;: 평가 대상인condition이 truthy라면value1이, 그렇지 않으면value2가 반환된다.
자바스크립트에서 피연산자가 3개나 받는 연산자는 조건부 연산자가 유일하다.
1
2
3
4
5
6
7
8
9
10
let accessAllowed;
let age = prompt('나이를 입력해 주세요.', '');
if (age > 18) {
accessAllowed = true;
} else {
accessAllowed = false;
}
alert(accessAllowed);
위의 코드를 조건연산자로 간단하게 바꾸면 다음과 같다.
1
let accessAllowed = (age > 18) ? true : false;
age > 18 주위의 괄호는 생략 가능하다. 물음표 연산자는 우선순위가 낮으므로 비교 연산자 >가 실행되고 난 뒤에 실행된다. 괄호가 있으나 없으나 차이는 없지만, 코드의 가독성 향상을 위해 괄호를 사용하는 것이 권장된다.
1
2
3
// 연산자 우선순위 규칙에 따라, 비교 연산 'age > 18'이 먼저 실행된다.
// (조건문을 괄호로 감쌀 필요가 없다.)
let accessAllowed = age > 18 ? true : false;
비교 연산자 자체가 true나 false를 반환하기 때문에 위 예시에서 물음표 연산자를 사용하지 않아도 된다.
1
2
// 동일하게 동작함
let accessAllowed = age > 18;
다중 ‘?’
물음표 연산자?를 여러 개 연결하면 복수의 조건을 처리할 수 있다.
1
2
3
4
5
6
7
8
let age = prompt('나이를 입력해주세요.', 18);
let message = (age < 3) ? '아기야 안녕?' :
(age < 18) ? '안녕!' :
(age < 100) ? '환영합니다!' :
'나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
alert( message );
if..else를 사용하면 위 예시를 아래와 같이 변형할 수 있다.
1
2
3
4
5
6
7
8
9
if (age < 3) {
message = '아기야 안녕?';
} else if (age < 18) {
message = '안녕!';
} else if (age < 100) {
message = '환영합니다!';
} else {
message = '나이가 아닌 값을 입력 하셨군요!';
}
부적절한 ‘?’
물음표?를 if 대용으로 쓰는 경우가 종종 있다.
1
2
3
4
let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');
(company == 'Netscape') ?
alert('정답입니다!') : alert('오답입니다!');
위 예시에선 평가 결과를 변수에 할당하지 않고, 결과에 따라 실행되는 표현식이 달라지도록 하였다. 그런데 이런 식으로 물음표 연산자를 if 대용으로 사용하는 것은 좋지 않다. 이렇게 코드를 작성하면 가독성이 떨어진다.
코드를 읽을 때 우리의 눈은 수직으로 움직인다. 수평으로 길게 늘어진 코드보단 여러 줄로 나뉘어 작성된 코드 블록이 더 읽기 쉽다. 물음표 연산자?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 이런 목적에 부합하는 곳에 물음표를 사용해야 한다. 여러 분기를 만들어 처리할 때는 if를 사용하자.
1
2
3
4
5
6
7
let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');
if (company == 'Netscape') {
alert('정답입니다!');
} else {
alert('오답입니다!');
}
과제
Q1. 아래 코드에서 alert는 실행될까요?
1
2
3
if ("0") {
alert( 'Hello' );
}
“0”은 비어있지 않은 문자열로 truthy한 값이다. 따라서 true를 리턴한다. 조건이 참이기 때문에 alert은 실행된다.
Q2. 자바스크립트의 공식 이름
1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<script>
let response = prompt("What's the 'official' name of JavaScript?", '');
if (response == "ECMAScript")
alert("Right!")
else
alert('You don't know? 'ECMAScript!"');
</script>
</body>
</html>
Q3.
if..else와 프롬프트 대화상자를 사용해 사용자로부터 숫자 하나를 입력받고, 아래 조건에 따라 그 결과를 alert 창에 출력해 보세요.
- 입력받은 숫자가 0보다 큰 경우
1을 출력 - 입력받은 숫자가 0보다 작은 경우
-1을 출력 - 입력받은 숫자가 0인 경우
0을 출력
(사용자는 항상 숫자를 입력한다고 가정)
1
2
3
4
5
6
7
let response = prompt("숫자를 입력해주세요.", 0);
if (response > 0) // 어차피 여기서 비교연산을 수행할 때 response는 숫자로 형변환된다.
alert(1);
else if (response < 0)
alert(1);
else
alert(0);
Q4. ‘if’를 ‘?’로 교체하기
조건부 연산자 '?'를 이용해 if문이 사용된 아래 코드를 변형해보세요. 동작 결과는 동일해야 합니다.
1
2
3
4
5
6
7
let result;
if (a + b < 4) {
result = '미만';
} else {
result = '이상';
}
해답
1
let result = (a + b < 4) ? '미만' : '이상';
Q5. ‘if..else’를 ‘?’로 교체하기
조건부 연산자 '?'를 사용해 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
let message = (login == '직원') ? '안녕하세요' :
(login == '임원') ? '환영합니다' :
(login == '') ? '로그인이 필요합니다.' :
'';