[자바스크립트] if와 '?'를 사용한 조건 처리

 

if와 '?'를 사용한 조건 처리

• 조건에 따라 다른 행동을 취할 때 if문 조건부 연산자 ?를 사용하면 된다.

 

 

if문

• if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행됩니다.

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

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

 

 

불린 형으로 변환

• if(..)문은 괄호 안에 0, 빈 문자열"", null, undefined, NaN은 불린 형으로 변환 시 모두 false가 된다.

 

 

조건부 연산자 '?'

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

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

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

alert(accessAllowed);

• 물음표(question mark) 연산자’라고도 불리는 '조건부(conditional) 연산자’를 사용하면 위 예시를 더 짧고 간결하게 변형할 수 있다.

?연산자의 문법 구조

let result = condition ? value1 : value2;

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

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

// 동일하게 동작함
// 비교 연산자 자체가 true or false를 반환하기 때문에 물음표 연산자를 사용하지 않아도 된다.
let accessAllowed = age > 18;

⚠️ 주의

• 물음표 연산자를 if문 대용으로 사용하는 것은 좋지 않다.

 

 

다중 '?'

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

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

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

alert( message );

 

 

📌 참고

• 모던 JavaScript 튜토리얼