JavaScript 조건부 연산자(?:)란 무엇인가?
조건부 연산자는 흔히 삼항 연산자(Ternary Operator)라고도 불리며, 세 개의 피연산자를 사용하는 JavaScript의 유일한 연산자입니다. 이 연산자는 먼저 조건식을 평가하여 참(true) 또는 거짓(false) 여부를 판별한 뒤, 그 평가 결과에 따라 두 표현식 중 하나를 실행합니다.
삼항 연산자는 전통적인 if-else 문을 한 줄로 간결하게 표현할 수 있어, 간단한 조건 분기를 처리할 때 코드의 가독성을 높이는 데 널리 활용됩니다.
연산자 문법 요약
| 번호 | 연산자 및 설명 |
| 1 | ?: (조건부) 조건이 참이면 → 값 X 반환, 그렇지 않으면 → 값 Y 반환 |
기본 구조
condition ? valueIfTrue : valueIfFalse;
- condition : 참 또는 거짓으로 평가되는 조건식
- valueIfTrue : 조건이 참일 때 반환되는 값
- valueIfFalse : 조건이 거짓일 때 반환되는 값
예제 코드
아래 예제를 직접 실행해 보면 삼항 연산자가 JavaScript에서 어떻게 동작하는지 쉽게 이해할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script>
var a = 10;
var b = 20;
var linebreak = "<br />";
var result;
document.write("((a > b) ? 100 : 200) => ");
result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);
document.write("((a < b) ? 100 : 200) => ");
result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
실행 결과
((a > b) ? 100 : 200) => 200 ((a < b) ? 100 : 200) => 100
결과 해설
변수 a는 10, b는 20입니다.
(a > b)는 10 > 20이므로 거짓(false)이며, 따라서 콜론(:) 뒤의 값 200이 반환됩니다.(a < b)는 10 < 20이므로 참(true)이며, 따라서 물음표(?) 뒤의 값 100이 반환됩니다.
이처럼 삼항 연산자는 조건의 평가 결과에 따라 두 값 중 하나를 즉시 선택해 반환하며, 짧은 조건 분기를 작성할 때 if-else 문보다 더 간결하고 직관적인 코드를 만들 수 있습니다.