IT/Javascript
[Javascript] 삼항연산자 사용법 및 활용 예제, 중첩 삼항연산자
hi.anna
2025. 2. 26. 18:29
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 문을 사용하는 것이 더 이해하기 쉬울 수 있습니다.
반응형