[JavaScript] 삼항 연산자 (Ternary Operator) 정리

JavaScript에서 if 문을 사용할 때보다 간결한 코드를 작성하고 싶을 때, 주로 사용한다.

이번 글을 통해 삼항 연산자의 기본 구조와 활용 방법, 그리고 다중 삼항 연산자까지 정리해보려 한다. 

연산자란?

연산자는 주로 값을 계산하거나 비교할 때 사용하는 기호이다. 예를 들어, 아래와 같은 것들이 모두 연산자이다.

+   // 더하기
-   // 빼기
*   // 곱하기
=== // 일치 비교
&&  // AND 조건

 

삼항 연산자의 기본 구조

삼항 연산자는 조건 ? 참일 때 : 거짓일 때의 형식으로 작성한다. 

조건 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드;

 

한 줄로 간략하게 적을 수 있어 편하다! 

 

예를 들어 두 숫자를 비교하는 코드를 작성한다면 아래와 같이 작성할 수 있다. 

let num1 = 10;
let num2 = 10;

let res = num1 === num2 ? 1 : 0;
console.log(res); // 1

 

개인적으로 조건이 복잡할 경우 오히려 조건문이 더 가독성이 좋아 나는 상태값을 확인하거나 복잡하지 않은 경우에만 삼항연산자를 사용한다. 

 

다중 삼항 연산자

사용 빈도는 적지만, 삼항 연산자를 여러 번 중첩해서 여러 조건을 처리할 수도 있다. 

 

조건1 ? 값1 :
조건2 ? 값2 :
조건3 ? 값3 :
기본값;

 

예를 들어 점수에 따른 결과를 리턴한다면 아래와 같이 정리할 수 있다. 

let score = 75;

let grade = score >= 90 ? "A" :
            score >= 80 ? "B" :
            score >= 70 ? "C" :
            score >= 60 ? "D" : "F";

console.log(grade); // C

 

같은 코드를 If 문으로 작성하면 아래와 같다. 

let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else if (score >= 60) {
  grade = "D";
} else {
  grade = "F";
}

 

확실히 if 문보다는 짧고 간결하다. 개발자의 선호도에 따라 편한 방식으로 사용하면 될듯하다!