자바스크립트 기본 - if 와 ‘?’ 를 사용한 조건 처리

조건에 따라 다른 행동을 취해야 할 경우, if 문과 조건부 연산자 ? 를 사용한다.

if 문

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

불린형으로의 변환

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

• 숫자 0, 빈 문자열 "”, null, undefined, NaN 은 불린형으로 변환 시 false 가 된다. 이런 값들은 falsy 값이라고 한다.
• 이외의 값은 불린형으로 변환시 true 가 되므로 truthy 값이라고 부른다.

아래 예시의 코드 블록은 실행되지 않는다.

if (0) { 
  ...
}
if ("") { 
  ...
}
if (null) { 
  ...
}
if (undefined) { 
  ...
}
if (NaN) { 
  ...
}

아래 예시의 코드 블록은 항상 실행된다.

if (1) {
  ...
}

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

let cond = (year == 2015); 

if (cond) {
  ...
}

else 절

else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.

else if 절

약간씩 차이가 있는 조건 여러 개를 처리해야 할 때 else if 를 사용한다.

조건부 연산자 ‘?’

조건에 따라 다른 값을 변수에 할당해줘야 할 때, ? 를 사용하면 if else 문을 더 짧고 간결하게 만들 수 있다.

if (age > 18) {
  accessAllowed = "okay";
} else {
  accessAllowed = "no";
}

위 구문을 ? 를 사용해 변경하면 다음과 같다.

let accessAllowed = (age > 18) ? "okay" : "no";

조건이 truthy 라면 “okay”, falsy 라면 ”no” 를 반환해 이 값을 accessAllowed 에 할당한다.

조건부 연산자 ? 는 피연산자가 세 개여서 삼항 연산자라고도 부른다.

조건문 주위의 괄호는 생략해도 무방하나, 가독성을 위해 사용할 것을 권장한다.

다중 ‘?’

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

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

let message = (age < 3) ? 'Hello baby' :
  (age < 18) ? 'Hi!' :
  (age < 100) ? 'Welcome' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

이 구문은 다음 if else 문과 동일하게 작동한다.

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

부적절한 ‘?’ 사용

아래 두 코드는 같은 동작이지만, 분기를 만들어 처리해야 하는 상황에서 ? 를 사용하는 것은 부적절하므로, if else 를 사용하는 것이 바람직하다.

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

(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');

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

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

물음표 연산자는 조건에 따라 반환 값이 달라지는 경우에 사용하도록 하자.