if 문의 축약형, 삼항 조건 연산자 (conditional ternary operator)

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 ES6의 삼항 조건 연산자(conditional ternary operator)에 대해서 알아보도록 하겠습니다.

삼항 조건 연산자는 if 문의 축약 형태 입니다.

표현식 부터 살펴 보겠습니다.

condition ? expr1 : expr2 

condition 은 조건을 나타내는 표현식이 들어가는 자리입니다. (조건문의 결과는 true, false 둘 중 하나가 나오는 표현식)

expr1 은 조건문이 참일때 반환되는 표현식이고, expr2 는 조건문이 거짓일 때 반환되는 표현식 입니다.

간단한 예를 살펴보겠습니다.

var age = 29;
var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19";
console.log(canDrinkAlcohol); // "True, over 19"

코드의 첫 번째 줄에서 변수 age를 숫자 29 로 정했습니다.

그리고 두 번째 줄에서 canDrinkAlcohol 변수를 선언하고 할당되는 값에 삼항 조건 연산자를 통해 조건문의 값에 따라 다른 값이 할당되도록 하고 있습니다.

삼항 조건 연산자의 조건문은 age 가 19 보다 크다 입니다.

위에서 age 를 29 로 정의 했기 때문에 조건문은 true 입니다. 따라서 : 앞의 문자열, True, over 19 이 canDrinkAlcohol 에 할당 됩니다.

따라서 마지막 줄에서 콘솔창에 찍어보면 True, over 19 가 찍히게 됩니다.

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

var condition1 = true,
    condition2 = false,
    access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");
 
console.log(access); // logs "true false"

코드의 세 번째 줄을 살펴봅시다. 처음의 조건문은 condition1 입니다. condition1 은 첫 번째 줄에서 true 로 정의 되어 있기 때문에 : 앞의 괄호가 실행됩니다. 괄호 안에서는 condition2 가 조건문인데, condition2 는 false이므로 : 뒤의 문자열, ture false가 최종적으로 access 의 값으로 할당됩니다.

if 조건문과 비교해 봅시다.

function canDrinkAlcohol(age){
    if(age > 21){
        return "True, over 21";
    }else{
        return "False, under 21";
    }
}
var output = canDrinkAlcohol(26);
console.log(output);

위의 코드에서 나이에 따라 법적으로 술을 마실 수 있는지 없는지 여부를 알려주는 함수를 만들었습니다. (canDrinkAlcohol)

함수 안에서 if 문을 통해 조건을 만족하는지 살펴본 뒤에, 만족하면 True, over 21 을 리턴하고, 만족하지 않으면 False, under 21 을 리턴합니다.

function canDrinkAlcohol(age) {
  return (age > 21) ? "True, over 21" : "False, under 21";
}
var output = canDrinkAlcohol(26);
console.log(output); // "True, over 21"

위의 코드는 if 그 위에서 if문을 사용해 만들었던 함수의 리턴값을 삼항 조건 연산자로 바꾼 코드입니다.

if 조건문을 사용할 때는 스코프({ }) 마다 리턴을 해 주어야 했던 반면, 삼항 조건 연산자는 리턴값 자체에 조건문을 표현할 수 있습니다.

이를 통하여 함수를 정의하는 부분의 코드를 7줄에서 3줄로 줄일 수 있습니다.

여기까지 ES6 의 삼항 조건 연산자에 대해서 살펴봤습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

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

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)