모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

if와 ‘?’를 사용한 조건 처리

조건에 따라 다른 행동을 취해야 할 때, If문과 ‘물음표’ 연산자라고도 불리는 조건부 연산자 ?를 사용한다.

‘if’문

if (…) 문은 괄호 안에 들어가는 조건을 평가한 결과가 true이면 코드 블록일 실행된다.

let boolean = prompt('true or false?', '');
if (boolean == true) alert('정답입니다!');

조건이 true일때 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싸야 한다. if문을 쓸 때에는 가독성을 위해서 실행되는 구문이 단 한줄이더라도 코드를 블록으로 감싸는 것을 추천한다.

if (boolean == true) {
  alert("정답입니다!");
  alert("아주 똑똑하시네요!");
}

불린형으로의 변환

if (...) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린 값으로 변환한다.

falsy/truthy

숫자 0, 빈문자열 “”, null, undefined, NaN은 불린형으로 변환 시 모두 false가 되므로 이런 값들을 falsy(거짓 같은) 값이라고 부른다. 또한 이외의 모든 값은 불린형으로 변환시 true가 되므로 truthy(참 같은) 값이라고 부른다.

아래 예시에서 조건이 항상 거짓이므로 코드 블록은 실행되지 않을 것이다.

if (0) {
  ...
}

반대로 아래 예시의 코드 블록은 항상 실행될 것이다.

if (1) {
 ... 
}

아래와 같이 평가를 통해 확정된 불린값을 if 문에 전달할 수도 있다.

let cond = (year == 2015);

if (cond) {
  ...
}

‘else’절

if 문엔 else절을 붙일 수도 있다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.

let boolean = prompt('true or false?', '');
if (boolean == true) {
  alert('정답입니다!');
} else {
  alert('오답입니다!');
}

‘else if’로 복수 조건 처리하기

조건 여러 개를 처리해야 할 때, else if 를 사용할 수가 있다.

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year < 2015) {
  alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  alert( '숫자를 좀 더 내려보세요.' );
} else {
  alert( '정답입니다!' );
}

위 예시에서 자바 스크립트는 조건 year < 2015를 먼저 확인하며, 이 조건이 거짓이라면 다음 조건 year > 2015을 확인한다. 이 조건 또한 거짓이라면 else 절에 걸린 코드 블록을 실행한다. else if 블록을 더 많이 붙이는 것도 가능하며, 마지막의 else는 선택 사항이다.

조건부 연산자 ‘?’

조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다.

let accessAllowed;
let age = prompt('나이를 입력해주세요.', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

그런데 이때 물음표(question mark) 연산자라고도 불리는 조건부(conditiional) 연산자를 사용하면 위 예시를 더 짧고 간결하게 변형할 수 있다.

조건부 연산자는 물음표?로 표시한다. 피연산자가 세 개이므로 조건부 연산자를 삼항(ternary) 연산자라고 부르기도 한다. 자바스크립트에서 삼항 연산자는 조건부 연산자가 유일하다.

let result = condition ? value1 : value2;

평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환된다.

let accessAllowed = (age > 18) ? true : false

age > 18 주위의 괄호는 생략 가능하다. 물음표 연산자는 우선순위가 비교 연산자보다 낮기 때문이다. 그러나 코드의 가독성을 위해 괄호를 사용할 것을 권장한다.

그런데 위의 예시는 비교 연산자 자체가 이미 true/false 값을 반환하기 때문에 물음표 연산자를 사용하지 않아도 된다.

let accessAllowed = age > 18;

다중 ‘?’

물음표 연산자 ?를 여러개 연결하면 복수의 조건을 처리할 수가 있다.

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
(age < 18) ? '안녕!' :
(age < 100) ? '환영합니다!' :
'나이가 아주 많으시거나, 나이가 아닌 값을 입력하셨군요!';

alert(message);

위 예제는 물음표 연산자를 다중으로 사용한 코드이다. 위 예제의 다중 ?는 아래의 if...else문처럼 변형할 수가 있다.

if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력하셨군요!';
}

부적절한 ‘?’

물음표 ?를 if 대용으로 쓰는 경우가 종종 있으나, 조건에 따라 반환 값 달리하려는 목적으로 만들어졌으므로, 이 목적에 부합하지 않을 때에도 오로지 간결함을 위해서 물음표 연산자를 사용하는 일은 지양해야 하며, 가독성을 위해 if...else 문을 사용하는 것이 좋다.

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

(company == 'Netscape') ?
    alert('정답입니다!') : alert('오답입니다!'); // 부적절한 ? 사용

if (company == 'Netscape') {
  alert('정답입니다!');
} else {
  alert('오답입니다!');
}