[JavaScript] 삼항 연산자 사용 예제 정리 (Ternary Operator, Conditional Operator)

# JavaScript 삼항 연산자 사용법 및 활용 가이드

JavaScript에서 삼항 연산자는 간결한 조건문 작성을 위한 도구입니다. 조건에 따라 다른 값을 반환하는 이 연산자를 효과적으로 활용하면 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다. 이 보고서에서는 삼항 연산자의 기본 개념부터 고급 활용법까지 포괄적으로 다룹니다.

삼항 연산자의 기본 개념

삼항 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자로, 조건에 따라 두 표현식 중 하나를 실행합니다. 이름에서 알 수 있듯이 세 부분으로 구성되어 있어 '삼항'이라고 불립니다.

기본 문법

삼항 연산자의 기본 구문은 다음과 같습니다:

condition ? expressionIfTrue : expressionIfFalse;

•  condition : 평가할 조건 (참 또는 거짓으로 평가될 수 있는 표현식)
• expressionIfTrue : 조건이 참일 때 실행되는 표현식
• expressionIfFalse : 조건이 거짓일 때 실행되는 표현식

이 구문을 사용하면 if-else 문을 한 줄로 줄일 수 있어 코드의 가독성과 간결성을 향상시킬 수 있습니다.

삼항 연산자 기본 사용 예제

간단한 조건 확인

const age = 20;
const canVote = age >= 18 ? '투표 가능' : '투표 불가';
console.log(canVote); // '투표 가능'

위 예제에서 age >= 18이 참이므로 '투표 가능'이 출력됩니다.

변수 할당에 활용

const a = 10;
const b = 6;
const value = (a > b) ? true : false;
console.log(value); // true

삼항 연산자는 위와 같이 괄호 없이도 사용할 수 있습니다. 삼항 연산자(?)는 우선순위가 낮아 비교 연산자(>)가 먼저 실행되고 그 후에 삼항 연산자가 실행됩니다.

함수에서 활용
함수에서 삼항 연산자를 사용하면 짧고 간결하게 조건문을 작성할 수 있습니다:

function isEven(num) {
    return num % 2 === 0 ? '짝수' : '홀수';
}

console.log(isEven(4)); // '짝수'
console.log(isEven(5)); // '홀수'

이처럼 함수의 반환값을 결정할 때 삼항 연산자를 활용하면 코드가 더 간결해집니다.

중첩 삼항 연산자

삼항 연산자는 중첩해서 사용할 수도 있습니다. 이는 여러 조건을 처리해야 할 때 유용하지만, 가독성이 떨어질 수 있으므로 주의해야 합니다.

const score = 85;
const grade = score >= 90 ? 'A' :
              score >= 80 ? 'B' :
              score >= 70 ? 'C' :
              score >= 60 ? 'D' : 'F';
console.log(grade); // 'B'

위 예제에서 score가 85이므로 'B'가 출력됩니다. 이런 중첩 삼항 연산자는 연결된 if-else if-else 문과 유사한 역할을 합니다.

다양한 활용 사례

DOM 조작에 활용

 

삼항 연산자를 사용하여 DOM을 동적으로 변경할 수 있습니다:

const isLoggedIn = true;
document.body.innerHTML = isLoggedIn ? '<h1>환영합니다!</h1>' : '<h1>로그인해주세요.</h1>';

isLoggedIn이 true일 경우 "환영합니다!"가 화면에 출력됩니다.

현재 시간에 따른 조건부 출력

var date = new Date();
var hour = date.getHours();
var now = "현재시간은 " + hour + "시이므로 " + ((hour > 12) ? "오후" : "오전") + "입니다";
document.write(now);

이 예제는 현재 시간이 오후인지 오전인지를 판별하여 출력합니다.

728x90

 

삼항 연산자와 관련 연산자 (&&, ||)

삼항 연산자 외에도 && 연산자와 || 연산자를 사용하여 조건부 로직을 표현할 수 있습니다.

&& 연산자

&& 연산자는 좌측 조건이 참일 때만 우측 표현식을 실행합니다:

const done = true;
const result1 = done === true && '참';
console.log(result1); // "참"

&& 연산자는 "본인(조건)이 참이면 오른쪽으로 넘어가 다른 녀석을 return하고, 본인이 거짓이면 본인을 그대로 return"하는 특성을 가지고 있습니다.

|| 연산자

|| 연산자는 좌측 조건이 거짓일 때만 우측 표현식을 실행합니다:

const done = true;
const result2 = done === false || '거짓';
console.log(result2); // "거짓"

|| 연산자는 "본인이 참이면 본인을 그대로 return하고, 본인이 거짓이면 오른쪽으로 넘어가 다른 녀석을 return"하는 특성을 가집니다.

삼항 연산자 vs if-else 문

삼항 연산자와 if-else 문은 각각 장단점이 있어 상황에 맞게 선택해 사용해야 합니다.

삼항 연산자를 사용하기 적합한 경우

• 단순한 조건문 (참/거짓을 판별하는 경우)
• 변수에 값을 할당할 때
• JSX에서 조건부 렌더링할 때

// if-else 문
let a = 15;
let b = 9;
if (a > b) {
    console.log(true);
} else {
    console.log(false);
}

// 삼항 연산자
const value = a > b ? true : false;
console.log(value);

삼항 연산자를 사용하면 위와 같이 코드가 훨씬 간결해집니다.

if-else 문을 사용하기 적합한 경우

• 여러 개의 복잡한 조건을 처리해야 할 때
• 실행할 코드가 여러 줄인 경우

// 복잡한 조건은 if-else 문이 더 적합할 수 있음
let score = 85;
let grade;
if (score >= 90) {
    grade = "A";
} else if (score >= 80) {
    grade = "B";
} else {
    grade = "C";
}
console.log(grade); // "B"

 

주의사항 및 가독성 고려

삼항 연산자는 코드를 간결하게 만들 수 있지만, 남용하면 오히려 가독성이 떨어질 수 있습니다.

1. 중첩된 삼항 연산자는 가독성을 해칠 수 있습니다. 너무 복잡한 조건문은 if-else 문으로 작성하는 것이 더 명확할 수 있습니다.

2. 복잡한 중첩 예제는 피하는 것이 좋습니다:

// 가독성이 떨어지는 예
const type = 'admin';
const access = type === 'admin' ? '모든 권한' : type === 'user' ? '일부 권한' : '접근 불가';

이런 경우 if-else 문을 사용하는 것이 더 이해하기 쉬울 수 있습니다.