[Javascript] 삼항연산자 사용법 및 활용 예제, 중첩 삼항연산자

 

Javascript  삼항연산자 사용법 및 활용 예제

 

1. 문법

condition ? expressionIfTrue : expressionIfFalse;

• condition: 평가할 조건 (참 또는 거짓이 될 수 있음)
• expressionIfTrue: 조건이 참일 때 실행될 표현식
• expressionIfFalse: 조건이 거짓일 때 실행될 표현식

 

2. 기본 예제

const age = 20;
const canVote = age >= 18 ? '투표 가능' : '투표 불가';
console.log(canVote); // '투표 가능'

• age >= 18이 참이므로 '투표 가능'이 출력됩니다.

 

3. 중첩 삼항 연산자

• 삼항 연산자를 중첩해서 사용할 수 있지만, 가독성이 떨어질 수 있으므로 주의해야 합니다.

const score = 85;
const grade = score >= 90 ? 'A' : 
               score >= 80 ? 'B' : 
               score >= 70 ? 'C' : 
               score >= 60 ? 'D' : 'F';
console.log(grade); // 'B'

• score가 85이므로 B가 출력됩니다.

 

4. 함수에서 사용하기

• 함수에서 삼항 연산자를 사용하면 짧고 간결하게 조건문을 작성할 수 있습니다.

function isEven(num) {
  return num % 2 === 0 ? '짝수' : '홀수';
}
console.log(isEven(4)); // '짝수'
console.log(isEven(5)); // '홀수'

 

 

5. DOM 조작에 사용

• 삼항 연산자를 사용하여 DOM을 동적으로 변경할 수 있습니다.

const isLoggedIn = true;
document.body.innerHTML = isLoggedIn ? '<h1>환영합니다!</h1>' : '<h1>로그인해주세요.</h1>';

• isLoggedIn이 true일 경우 "환영합니다!"가 화면에 출력됩니다.

 

 

6. 가독성에 주의

• 중첩된 삼항 연산자는 가독성을 해칠 수 있으므로 주의해야 합니다.
• 너무 복잡한 조건문은 if...else 문으로 작성하는 것이 더 명확할 수 있습니다.

// 복잡한 중첩 예제 (가독성 나쁨)
const type = 'admin';
const access = type === 'admin' ? '모든 권한' : type === 'user' ? '일부 권한' : '접근 불가';
console.log(access); // '모든 권한'

• 위와 같은 경우, if...else 문을 사용하는 것이 더 이해하기 쉬울 수 있습니다.