자바스크립트 삼항 연산자 완벽 가이드: 작동 원리부터 실전 활용법까지

삼항 연산자(Ternary Operator)는 자바스크립트에서 조건문을 간결하게 표현할 수 있는 강력한 도구입니다. 복잡한 if/else 문을 한 줄로 줄여 코드를 훨씬 짧고 읽기 쉽게 만들어 줍니다.

삼항 연산자란 무엇인가?

삼항 연산자는 세 개의 피연산자를 사용하는 유일한 자바스크립트 연산자입니다. 기본 문법은 다음과 같습니다.

조건 ? 참일 때 값 : 거짓일 때 값;

조건이 true이면 물음표(?) 뒤의 첫 번째 값을 반환하고, false이면 콜론(:) 뒤의 두 번째 값을 반환합니다.

if/else 문과 비교하기

먼저 일반적인 if/else 문으로 나이에 따라 성인 여부를 판별하는 코드를 살펴보겠습니다.

let age = 20;
let status;

if (age >= 18) {
  status = '성인';
} else {
  status = '미성년자';
}

위 코드는 총 7줄에 달합니다. 하지만 삼항 연산자를 사용하면 단 한 줄로 동일한 결과를 얻을 수 있습니다.

let age = 20;
let status = age >= 18 ? '성인' : '미성년자';

실전 활용 예시

1. 변수에 조건부 값 할당

const price = isMember ? 8000 : 12000;

2. 함수 반환값 결정

function getGreeting(user) {
  return user ? `안녕하세요, ${user}님!` : '안녕하세요, 방문자님!';
}

3. JSX(React)에서의 조건부 렌더링

{isLoggedIn ? <Dashboard /> : <LoginPage />}

중첩된 삼항 연산자

삼항 연산자는 중첩하여 사용할 수도 있습니다. 다만 과도한 중첩은 오히려 가독성을 해치므로 주의해야 합니다.

const score = 85;
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : 'C';
// 결과: 'B'

사용 시 주의사항

• 간단한 조건에만 사용하세요. 로직이 복잡해지면 일반적인 if/else 문이 더 명확합니다.
• 부수 효과(side effect)가 없는 값 반환 용도로 사용하는 것이 좋습니다.
• 중첩은 최대 1~2단계까지만 유지하는 것이 코드 가독성에 유리합니다.

마무리

삼항 연산자를 적절히 활용하면 불필요한 타이핑을 줄이고 코드를 깔끔하게 유지할 수 있습니다. 항상 가독성을 우선으로 고려하며, 짧고 명확한 조건문에 활용한다면 개발 생산성을 크게 높일 수 있습니다.