JavaScript 2.10

If 와 ?를 사용한 조건 처리

if 문

• 괄호안에 들어가는 조건을 평가해서 결과가 true이면 코드 블록이 실행된다..
• 조건이 true일 때 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싼다.
  • 조건이 참일 경우 실행되는 구문이 단 한줄이더라도 중괄호를 사용해 코드 블록으로 감싸면 가독성이 증가하기 때문에 추천한다.

불린형으로의 변환

• if 문은 괄호 안의 표현식을 평가하고 그 결과를 불린 값으로 변환한다.
• 숫자 0, 빈 문자열, null, undefined, NaN은 불린형으로 변환 시 모두 false가 된다. 이런 값들은 falsy값이라고 불린다.
• 이외의 값은 불린형으로 변환시 true가 되므로 truty값이라고 부른다.

else 절

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

else if 로 복수 조건 처리하기

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

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

조건부 연산자 ?

• 조건에 따라 다른 값을 변수에 할당해줘야 할 때 사용된다.
• 피연산자가 세개이기 대문에 삼항 연산자라 불리기도 한다.

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

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

alert(accessAllowed);

// 조건부 연산자 사용시
let result = condition ? value1 : value2;

• condition이 truthy라면 1이, 아니라면 2가 반환된다.

다중 ?

• ? 를 여러개 연결하면 복수의 조건을 처리할 수 있다.

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

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

alert( message );

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

부적절한 ?

• 물음표 ? 를 if 대용으로 쓰는 경우가 종종 있다.

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

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

• Company == Netscape의 검사 결과에 따라 ? 뒤에 이어지는 첫번째 혹은 두번째 표현식이 실행되어 얼럿창이 뜨게 되어있다.
• 위 예시에선 평가 결과를 변수에 할당하지 않고, 결과에 따라 실행되는 표현식이 달라지도록 하였다.
  • 이런 식으로 물음표 연산자를 사용하는 것은 좋지 않다.
  • 가독성이 떨어지기 때문이다.