[javascript] 삼항 연산자 기본 개념

자바스크립트에서 삼항 연산자(? :)는 if-else 문을 간결하게 표현할 수 있는 강력한 도구입니다. 이번 문서에서는 삼항 연산자의 기본 개념부터 활용 예제까지 다뤄보겠습니다.

---

1. 삼항 연산자란?

삼항 연산자는 조건이 참인지 거짓인지에 따라 두 가지 값을 반환하는 연산자입니다.
if-else 문을 한 줄로 표현할 수 있어 코드 가독성을 높이는 데 유용합니다.

기본 문법

const result = 조건 ? 값1 : 값2;

위 코드는 조건이 참(true)이면 값1을 반환하고, 거짓(false)이면 값2를 반환합니다.

예제 1: 기본적인 삼항 연산자 사용

const age = 20;
const message = age >= 18 ? "성인입니다." : "미성년자입니다.";
console.log(message); // "성인입니다."

위 코드에서 age가 18 이상이면 "성인입니다."를 출력하고, 그렇지 않으면 "미성년자입니다."를 출력합니다.

---

 

 

2. 삼항 연산자 vs if-else

삼항 연산자는 if-else 문을 짧게 줄일 수 있지만, 복잡한 논리를 처리하는 경우 가독성이 떨어질 수 있습니다.

예제 2: if-else vs 삼항 연산자 비교

// if-else 문 사용
let status;
if (age >= 18) {
    status = "성인";
} else {
    status = "미성년자";
}
console.log(status); // "성인"

// 삼항 연산자로 변환
const status2 = age >= 18 ? "성인" : "미성년자";
console.log(status2); // "성인"

위 두 코드는 같은 기능을 수행하지만, 삼항 연산자를 사용하면 if-else 문보다 코드가 짧아집니다.

---

 

 

3. 삼항 연산자 중첩 사용

삼항 연산자는 중첩해서 사용할 수도 있지만, 너무 복잡하게 사용하면 가독성이 떨어질 수 있습니다.

예제 3: 중첩된 삼항 연산자

const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade); // "B"

위 코드에서 score가 90 이상이면 "A", 80 이상이면 "B", 그 외에는 "C"를 반환합니다.
하지만 삼항 연산자가 중첩되면 읽기 어려워질 수 있으므로, 필요할 경우 괄호를 사용하여 가독성을 높이는 것이 좋습니다.

---

 

 

4. 삼항 연산자의 잘못된 사용 사례

삼항 연산자를 남용하면 코드가 이해하기 어려워질 수 있으며, undefined나 null을 다룰 때 주의해야 합니다.

예제 4: 삼항 연산자의 잘못된 사용

const value = null;
const output = value ? value : "기본값";
console.log(output); // "기본값"

위 코드는 value가 null이므로 "기본값"이 반환됩니다. 하지만 **널 병합 연산자 (??)**를 사용하면 더 깔끔한 코드가 됩니다.

const output2 = value ?? "기본값";
console.log(output2); // "기본값"

위 코드는 value가 null이거나 undefined일 경우 "기본값"을 반환합니다.
널 병합 연산자는 삼항 연산자보다 더욱 직관적인 방법입니다.

---

 

 

5. 삼항 연산자 활용 사례

(1) 버튼 활성화 여부 설정

const isLoggedIn = true;
const buttonText = isLoggedIn ? "로그아웃" : "로그인";
console.log(buttonText); // "로그아웃"

위 코드는 사용자가 로그인한 경우 "로그아웃" 버튼을 표시하고, 그렇지 않으면 "로그인" 버튼을 표시합니다.

(2) 숫자가 짝수인지 홀수인지 판별

const num = 7;
const result = num % 2 === 0 ? "짝수" : "홀수";
console.log(result); // "홀수"

num % 2 === 0 조건이 참이면 "짝수", 거짓이면 "홀수"를 반환합니다.

(3) 다크모드 설정

const theme = "dark";
const backgroundColor = theme === "dark" ? "#000" : "#fff";
console.log(backgroundColor); // "#000"

사용자의 테마 설정에 따라 배경색을 다르게 설정하는 예제입니다.

---

 

 

6. 마무리

삼항 연산자는 if-else 문을 짧게 표현할 수 있는 강력한 도구이지만,
가독성을 해치지 않도록 적절히 사용하는 것이 중요합니다.
복잡한 조건문을 삼항 연산자로 너무 많이 중첩하는 것은 오히려 역효과를 낼 수 있으므로 주의해야 합니다.

---

 

추가 학습

• 널 병합 연산자 (??)와 삼항 연산자의 차이
• || 연산자와 && 연산자를 활용한 조건 처리
• 삼항 연산자와 switch 문의 비교

---