[JavaScript] 자바스크립트 삼항 연산자 사용법 및 예제

728x90

목 차

• 1. 삼항 연산자란?
• 2. 사용 예제
  • 2-1. 기본 사용
  • 2-2. 중첩 사용
• 3. 주요 특징
• 4. 주의 사항

반응형

 

1. 삼항 연산자란?

• 삼항 연산자(ternary operator)는 JavaScript에서 조건에 따라 다른 값을 반환하거나 실행할 때 사용되는 짧고 간결한 조건문입니다.

조건 ? 값1 : 값2;

• 조건: 평가될 표현식으로, true 또는 false로 평가됩니다.
• 값1: 조건이 true일 때 반환되는 값 또는 실행되는 표현식.
• 값2: 조건이 false일 때 반환되는 값 또는 실행되는 표현식.

 

 

---

 

2. 사용 예제

2-1. 기본 사용

const age = 18;
const canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // "Yes"

• 조건 age >= 18이 true이므로, "Yes"가 반환됩니다.

 

2-2. 중첩 사용

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

• 조건이 중첩되면서 점수에 따라 등급을 반환합니다.
• 읽기 어려울 수 있으므로 중첩 사용 시 주의가 필요합니다.

 

 

---

 

3. 주요 특징

• 삼항 연산자는 if-else 구문을 대체할 수 있어 코드가 짧아지고 가독성이 좋아질 수 있습니다.

// if-else 구문
let isEven;
if (number % 2 === 0) {
    isEven = true;
} else {
    isEven = false;
}

// 삼항 연산자
const isEven = number % 2 === 0 ? true : false;

• 삼항 연산자를 사용하면 함수의 반환값을 간단히 설정할 수 있습니다.

function getStatus(score) {
    return score >= 50 ? "Pass" : "Fail";
}
console.log(getStatus(45)); // "Fail"

• 삼항 연산자 내부에서 표현식을 사용할 수 있습니다.

const message = isLoggedIn ? `Welcome, ${username}` : "Please log in.";

 

---

 

4. 주의 사항

• 복잡한 조건을 피하라 : 삼항 연산자를 과도하게 중첩하거나 복잡하게 사용하면 코드 가독성이 떨어질 수 있습니다.
• 명확성 유지 : 삼항 연산자는 간단한 조건과 함께 사용할 때 가장 효과적입니다.

 

---

 

관련글

• [JavaScript] 자바스크립트 setInterval()과 clearInterval() 함수
• [JavaScript] 자바스크립트 innerText 사용법
• [JavaScript] 자바스크립트 textContent 사용법과 주의사항