Ternary Operator(삼항 연산자)

jaemin·2020년 9월 7일

자바스크립트

목록 보기

3/12

삼항 연산자

조건부 삼항 연산자는 자바스크립트에서 세 개의 피연산자를 취할 수 있는 유일한 연산자이다. 보통 if문의 단축 형태로 쓰인다.

조건식 ? 조건식이 true 일 때 반환할 값 : 조건식이 false 일 때 반환할 값;

삼함 연산자 예제

여러분이 술을 마실 수 있는 나이인지 확인할 수 있는 삼항 연산자 식을 만드시오

답 :

var age = 25;
var canDrinkAlcohol = age > 19 ? '19세 이상 성인입니다.' : '미성년자입니다.';

console.log(canDrinkAlcohol);

회원과 비회원을 구분해서 입장료를 다르게 받을 경우 삼항 연산자 식을 만드시오

답 :

'The fee is' + (isMember ? '2000원' : '10000원');  


3. 다중 삼항 평가를 사용한 예제도 있다. (주의 : 조건 연산은 우측부터 그루핑 됩니다.)  

```js
var firstCheck = false;
var secondCheck = false;

access = firstCheck ? 'Access denied' : secondCheck ? 'Access defined' : 'Access granted';

console.log(access); // Access granted

다중 조건 if문과 같은 방식으로 여러 개의 조건을 사용할 수도 있다.

var condition1 = true,
var condition2 = false,

access = condition1 ? (condition2 ? 'true true' : 'true false') : (condition2 ? 'false true' : 'false false');

console.log(access); // 'true false'

여기서 괄호는 필수가 아니며 기능에 영향을 주지 않지만 결과가 어떻게 처리되는지 시각화하는 데 도움이 된다.

삼항 평가는 다른 연산을 하기 위해 쓸 수도 있다.

var stop = false, age = 25;

age > 30 ? location.assign('continue.html') : stop = true;

하나의 케이스 당 두 개 이상의 단일 작업을 수행하려면 쉼표로 구분하고 괄호로 묶어라.

var stop = false, age = 25;

age > 30 ? (
  alert('ok, you can go.'),
  location.assign('continue.html')
) : (
  stop = true, 
  alert('sorry, you are much too young!')
);

값을 할당하는 동안 하나 이상의 연산도 가능하다. 이 경우에, 괄호 안의 값 중 마지막 쉼표 다음의 값이 최종 할당 값이 된다.

var age = 25;

var url = age > 30 ? (
  alert('Ok, you can go'),
  // alert는 undefined를 반환하지만 마지막 쉼표 다음의 값이 아니므로 무시된다.
  'continue.html' // 이 값이 age > 30일때 할당된다.
) : (
  alert('You are much too young!'),
  alert('sorry :('),
  'stop.html' // age > 30이 아닐때 이 값이 할당된다.
);

location.assign(url); // 'stop.html'

삼항 연산자로 if...else 문 대체하기

삼항 연산자는 if/else문을 사용하는 함수를 반환하는 데 적합하다.

if...else문 삼항 연산자로 변환하기

예제1

// if...else문
var x = 11;
var res;
if (x === 0) {
  res = '영';
} else if (x % 2 === 0) {
  res = '짝수';
} else {
  res = '홀수';
}

// 삼항 연산자
x= 11;

var result = x === 0 ? '숫자 영' :  x % 2 === 0 ? '짝수' : '홀수' ;
console.log(result);

예제2

// if...else문
var func1 = function(..) {
  if (condition1) { return value1 }
  else { return value2 }
}

// 삼항 연산자
var func2 = function(...) {
  return condition1 ? value1 : value2
}

if...else문을 대체하는 삼항 연산자가 return을 여러 번 사용하고 if 블록 내부에서 한줄만 나올 때 return을 대체할 수 있는 좋은 방법이 된다.

삼항 연산자를 여러 행으로 나누고 그 앞에 공백을 사용하면 긴if...else문을 매우 깔끔하게 만들 수 있다. 이렇게 하면 가독성 좋은 코드를 만들 수 있다.

// if...else
var func1 = function(..) {
  if (condifion1) { return value1 }
  else if (condition2) { return value2 }
  else if (condition3) { return value3 }
  else { return value4 }
}

// 삼항 연산자
var func2 = function(..) {
  return condition1 ? value1
       : condition2 ? value2
       : condition3 ? value3
       :              value4
}

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

jaemin