삼항 연산자 (ternary operator) 자바스크립트

by

원본: 자바스크립트 삼항 연산자 – 문법과 사용 예제

자바스크립트에는 삼항 연산자(ternary operator)라는 연산자가 있습니다. 이 포스트에서는 이 연산자가 무엇이며 소스코드 작성 시 어떻게 사용하는지 알아보겠습니다.

삼항 연산자

이 연산자는 개발자가 정한 조건식을 기반으로 true 표현식과 false 표현식을 평가하는 조건 연산자입니다.

문법은 다음과 같습니다:

condition ? trueExpression : falseExpression

먼저 참 또는 거짓를 리턴하는 condition이 있습니다. 참에 해당하는 값에는 true가 있고 또한 거짓이 아닌 값도 포함됩니다. 거짓에 해당하는 값에는 false, null, 0 등이 있습니다.

condition 뒤에는 “?“(조건에 대한 질문이라고 생각해도 됨)와 trueExpression이 따라옵니다. 이는 조건이 true로 평가되는 경우 실행됩니다.

trueExpression 뒤에는 “:“(콜론)과 함께 falseExpression이 따라 붙습니다. 이 표현식은 조건이 false로 평가되는 경우 실행됩니다.

const result = condition
  ? trueExpression
  : falseExpression

이 연산자가 리턴하는 값은 조건식의 리턴 값에 따라 달라집니다. 조건이 true인 경우 trueExpression의 리턴 값이 변수에 할당되고, false인 경우 falseExpression의 리턴 값이 변수에 할당됩니다.

if 문 대신 삼항 연산자 사용하는 방법

이 연산자는 경우에 따라 if 문을 대체할 수 있습니다. 잘만 사용하면 간결하고 깨끗한 읽기 쉬운 코드를 작성할 수 있습니다.

다음 예제를 보겠습니다:

const score = 80;
let scoreRating;

if (score > 70) {
  scoreRating = "Excellent";
} else {
  scoreRating = "Do better";
}

console.log(scoreRating);
if 문 예제

개발자 도구를 열어 위의 예제를 테스트 해보면:

먼저 값이 80인 score 변수와 scoreRating 변수가 있습니다. 그 다음 if 문에서는 score > 70 인지 확인합니다. 이 조건이 true인 경우 scoreRating에 “Excellent”를 할당하고 그렇지 않다면 “Do better”를 할당합니다.

scoreRating 변수를 console.log() 메소드를 통해 출력하면 “Excellent”를 확인할 수 있습니다.

이러한 코드를 다음과 같이 삼항 연산자로 개선할 수 있습니다. 문법을 기억하기 바랍니다. 조건식, 물음표, true인 경우의 표현식, 콜론, false인 경우의 표현식 순서입니다:

const score = 80;
const scoreRating = score > 70 ? "Excellent" : "Do better";

console.log(scoreRating);
삼항 연산자 예제

여기서 true 표현식과 false 표현식은 조건식 score > 70의 결과에 따라 scoreRating 변수로 할당됩니다.

true, false 표현식에는 함수 실행이나 산술 연산 등 모든 종류의 표현식이 올 수 있습니다. 다음의 예제를 보겠습니다.

function printPoor() {
  console.log("Poor result");
  return "poor";
}

function printSuccess() {
  console.log("Nice result");
  return "success";
}


const pass = false;
const result = pass ? printSuccess() : printPoor();

console.log(result);
삼항 연산자 함수 표현식 예제

위의 예제에서는 조건식이 false를 리턴했으므로 false 표현식인 printPoor() 함수를 실행하여 콘솔 로그에 “Poor result”가 출력되었습니다.

그리고 false 표현식의 리턴 값이 “poor” 이므로 result 변수에 이 값이 할당되었습니다.

중첩된 삼항 연산자 사용 방법

if...else if...else 문을 삼항 연산자로 구현하고 싶다면 어떻게 해야 할까요?

이 때에는 삼항 연산자를 중첩하여 사용하면 됩니다. 하지만 이 방법은 코드를 읽기 어렵게 만들기 때문에 사용 시 주의해야 합니다.

다음의 예제를 살펴보겠습니다:

const score = 60;
let scoreRating;

if (score > 70) {
  scoreRating = "Excellent";
} else if (score > 50) {
  scoreRating = "Average";
} else {
  scoreRating = "Do better";
}

console.log(scoreRating);
if...else if...else 구문 예제

위의 예제에서는 if...else if...else 구문을 사용하여 score가 70 이상이면 “Excellent”를 50 이상이면 “Average”를, 어떤 조건도 만족하지 않는다면 “Do better”를 scoreRating에 할당합니다.

동일한 구문을 삼항 연산자를 사용하여 수행하는 방법을 알아보겠습니다:

const score = 60;
const scoreRating =
  score > 70
    ? "Excellent"
    : score > 50
    ? "Average"
    : "Do better";

console.log(scoreRating);
중첩 삼항 연산자 예제

코드를 보면 두 개의 물음표와 두 개의 콜론을 볼 수 있습니다.

처음에 오는 조건 구문은 score > 70 입니다. 첫 번째 물음표 뒤에는 “Excellent” 구문이 있고 첫 번째 콜론 뒤는 모두 false 표현식으로 간주됩니다. 이 false 표현식에는 또 다른 삼항 연산자가 선언되어 있습니다.

여기서 두 번째 조건은 score > 50이 됩니다. 두 번째 물음표 뒤에는 “Average” 구문이 오고 두 번째 콜론 뒤에는 “Do better” 구문이 따라옵니다.

위의 코드를 정리하자면 첫 번째 조건이 true인 경우 “Excellent”를 리턴하고, false인 경우 다른 조건을 확인합니다. 이 두 번째 조건이 true 이면 “Average”를 false 면 “Do better”를 리턴하게 됩니다.

여러번 중첩된 삼항 연산자 문제

이 연산자는 코드의 가독성을 높이기 위한 용도를 가지고 있지만 여러번 중첩하여 사용하는 경우 주의해야합니다.

이전 예제에 추가적인 삼항 연산자가 있다고 생각해 보겠습니다:

const score = 45;
const scoreRating =
  score > 70
    ? "Excellent"
    : score > 50
    ? "Average"
    : score > 40
    ? "Fair"
    : "Do better";

console.log(scoreRating);

위의 코드에서 보는 바와 같이 세 개의 삼항 연산자를 사용했더니 코드가 매우 읽기 어려워진 것을 확인할 수 있습니다.

이와 같이 여러 조건이 필요한 경우 if 문이나 switch 문을 사용하면 조금 더 긴 코드가 필요하겠지만 위의 코드 보다는 읽기 쉬운 코드가 작성될 것 입니다.

정리

삼항 연산자를 사용하면 조건식을 만들 수 있으며 경우에 따라 if 문을 대체할 수도 있습니다. 또한 한줄로 더 짧고 깔끔한 코드를 작성할 수 있습니다.

이 포스트에서는 if 문에 해당하는 삼항 연산자 대체 방법을 알아봤습니다.

또한 중첩된 삼항 연산자의 예제와 함께 이를 사용할 경우 코드가 읽기 어려워진다는 점을 확인했습니다.

관련 글