자바스크립트 조건 연산자(삼항 연산자) 완벽 가이드

자바스크립트에서 가장 유용한 연산자 중 하나인 조건 연산자(Conditional Operator) 또는 삼항 연산자(Ternary Operator) 는 간결하면서도 강력한 기능을 제공합니다. 이 글에서는 조건 연산자가 무엇인지, 왜 중요한지, 그리고 실전에서 어떻게 활용할 수 있는지 자세히 알아보겠습니다.

---

조건 연산자란?

조건 연산자는 특정 조건이 참(true) 인지 거짓(false) 인지 평가한 후, 두 개의 값 중 하나를 반환하는 연산자입니다. 이 연산자는 일반적인 if-else 문과 동일한 역할을 하지만, 더 간결한 코드 작성을 가능하게 합니다.

조건 연산자의 기본 문법

조건 ? 참일 때 반환할 값 : 거짓일 때 반환할 값;

위의 구조를 통해 조건이 참이면 첫 번째 값이, 거짓이면 두 번째 값이 반환됩니다.

조건 연산자의 예제

let number = 10;
let result = (number % 2 === 0) ? "짝수입니다" : "홀수입니다";
console.log(result); // 출력: 짝수입니다

위 코드에서는 number가 2로 나누어 떨어지는지 검사하여 "짝수입니다" 또는 "홀수입니다" 중 하나를 result 변수에 저장합니다.

---

조건 연산자의 활용 사례

조건 연산자는 여러 상황에서 유용하게 사용됩니다. 특히 웹 개발에서 상태 관리, 기본값 설정, UI 업데이트 등에 효과적입니다.

1. UI 상태 변경에 활용

웹 애플리케이션에서는 사용자 상태에 따라 동적으로 UI를 변경해야 하는 경우가 많습니다. 예를 들어, 사용자가 로그인했는지 여부에 따라 다른 메시지를 표시할 수 있습니다.

let isLoggedIn = true;
let welcomeMessage = isLoggedIn ? "환영합니다!" : "로그인이 필요합니다.";
console.log(welcomeMessage); // 출력: 환영합니다!

사용자가 로그인하면 "환영합니다!"가, 그렇지 않으면 "로그인이 필요합니다."가 출력됩니다.

---

2. 기본값 설정

변수가 null, undefined, 또는 빈 값일 경우 기본값을 제공할 수 있습니다.

let userName;
let displayName = userName || "사용자 이름 없음"; 
console.log(displayName); // 출력: 사용자 이름 없음

userName이 정의되지 않았기 때문에 "사용자 이름 없음"이 기본값으로 설정됩니다.

---

3. 점수에 따른 학점 부여

조건 연산자를 사용하면 여러 개의 if-else 문을 보다 간결한 형태로 만들 수 있습니다.

let score = 85;
let grade = (score >= 90) ? 'A' :
            (score >= 80) ? 'B' :
            (score >= 70) ? 'C' :
            (score >= 60) ? 'D' : 'F';

console.log(grade); // 출력: B

위 코드에서는 점수에 따라 학점을 자동으로 결정할 수 있습니다.

---

조건 연산자의 주의점

조건 연산자는 코드의 간결성을 높이지만, 남용하면 오히려 가독성을 해칠 수 있습니다. 특히 중첩된 삼항 연산자는 피하는 것이 좋습니다.

중첩된 삼항 연산자의 예시 (비추천)

let age = 25;
let category = (age < 13) ? "어린이" :
               (age < 20) ? "청소년" :
               (age < 65) ? "성인" : "노인";

위처럼 삼항 연산자가 여러 개 중첩되면 가독성이 떨어집니다. 대신 if-else 문을 사용하는 것이 더 명확할 수 있습니다.

if-else 문으로 변환한 코드 (추천)

let age = 25;
let category;

if (age < 13) {
    category = "어린이";
} else if (age < 20) {
    category = "청소년";
} else if (age < 65) {
    category = "성인";
} else {
    category = "노인";
}
console.log(category); // 출력: 성인

이처럼 가독성이 중요한 경우에는 if-else 문을 활용하는 것이 좋습니다.

---

결론

조건 연산자는 자바스크립트에서 매우 강력한 도구로, 간단한 조건문을 한 줄로 표현할 수 있게 해줍니다. UI 상태 변경, 기본값 설정, 데이터 변환 등 다양한 상황에서 활용할 수 있으며, 코드의 간결성을 높이는 데 유용합니다.

하지만 너무 많은 삼항 연산자를 중첩하면 오히려 코드가 복잡해질 수 있으므로, 상황에 따라 if-else 문을 적절히 활용하는 것이 중요합니다.

자바스크립트 개발을 하면서 조건 연산자를 적극적으로 활용해 보세요! 가독성을 유지하면서도 효율적인 코드 작성을 할 수 있을 것입니다.