[Javascript] 삼항 연산자 사용법에 대한 갓벽 가이드

1. 삼항 연산자의 기본 문법
2. 삼항 연산자 vs if...else 비교
3. 활용 예제
   • 짝수/홀수 구별 예제
   • 로그인 상태 확인 예제
   • 할인 적용 예제 (삼항 연산자와 함수)
   • 객체 속성 선택 예제
   • && 연산자로 값 반환 예제
   • || 연산자로 기본값 설정 예제
   • 삼항 연산자와 JSX (React)
4. 장점과 단점

반응형

---

 

삼항 연산자는 if...else 문을 간결하게 표현할 수 있는 조건 연산자입니다. 이름 그대로 세 개의 피연산자를 가지기 때문에 삼항(Ternary) 연산자라고 불립니다.

 

---

 

삼항 연산자의 기본 문법

조건식 ? 참일_경우_값 : 거짓일_경우_값;

• 조건식이 true이면 참일_경우_값이 실행됨.
• 조건식이 false이면 거짓일_경우_값이 실행됨.

 

---

 

삼항 연산자 vs if...else 비교

삼항 연산자는 if...else를 더 짧게 표현할 수 있지만, 가독성도 고려해야 합니다.

✅ if...else 사용 예제:

let age = 20;
let message;

if (age >= 18) {
    message = "성인입니다.";
} else {
    message = "미성년자입니다.";
}

console.log(message); // "성인입니다."

✅ 삼항 연산자 사용 예제:

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

console.log(message); // "성인입니다."

같은 로직을 한 줄로 표현할 수 있어 코드가 짧아지고 직관적입니다.

 

---

 

활용 예제

짝수/홀수 구별 예제

✅ 예제 코드:

let num = 5;
let result = (num % 2 === 0) ? "짝수" : "홀수";

console.log(result); // "홀수"

위 코드에서 num % 2 === 0 조건이 false이므로 홀수가 출력됩니다.

 

로그인 상태 확인 예제

✅ 예제 코드:

let isLoggedIn = true;
let userMessage = isLoggedIn ? "환영합니다!" : "로그인이 필요합니다.";

console.log(userMessage); // "환영합니다!"

isLoggedIn 값이 true면 "환영합니다!", false면 "로그인이 필요합니다."가 출력됩니다.

 

할인 적용 예제 (삼항 연산자와 함수)

✅ 예제 코드:

function getDiscount(price) {
    return price > 10000 ? price * 0.9 : price;
}

console.log(getDiscount(15000)); // 13500 (10% 할인)
console.log(getDiscount(8000));  // 8000 (할인 없음)

price가 10,000 초과이면 10% 할인된 가격 반환.

 

객체 속성 선택 예제

✅ 예제 코드:

let user = { name: "Alice", age: 25 };
let userType = user.age >= 18 ? "성인" : "미성년자";

console.log(userType); // "성인"

객체 데이터를 기반으로 간단한 조건을 빠르게 처리할 수 있습니다.

 

&& 연산자로 값 반환 예제

✅ 예제 코드:

let isMember = true;
console.log(isMember && "회원 전용 콘텐츠"); 
// "회원 전용 콘텐츠" (isMember가 true이므로 실행됨)

 

|| 연산자로 기본값 설정 예제

✅ 예제 코드:

let username = "";
let displayName = username || "Guest";

console.log(displayName); // "Guest"

username이 빈 문자열("", falsy 값)이므로 "Guest"가 출력됨.

삼항 연산자와 JSX (React)

✅ 예제 코드:

const isDarkMode = true;

return (
  <div style={{ backgroundColor: isDarkMode ? "black" : "white", color: isDarkMode ? "white" : "black" }}>
    {isDarkMode ? "다크 모드" : "라이트 모드"}
  </div>
);

isDarkMode 값에 따라 배경색과 텍스트가 변경됨.

 

---

장점과 단점

✅ 장점:

• 코드가 간결해짐 → if...else보다 더 짧고 직관적.
• 변수 선언과 동시에 할당 가능 → 한 줄로 처리 가능.

❌ 단점:

• 가독성이 떨어질 수 있음 → 중첩되면 if...else보다 이해하기 어려움.
• 디버깅이 어려울 수 있음 → 한 줄로 작성된 코드에서 오류 발생 시 찾기 어려움.