JavaScript 삼항 연산자 완벽 가이드: 기본 문법부터 중첩 활용까지

JavaScript의 삼항 연산자(ternary operator)는 조건문을 평가한 뒤 두 값 중 하나를 반환하는 연산자입니다. 조건이 참(true)일 때와 거짓(false)일 때 각각 다른 값을 반환하도록 지정할 수 있으며, 기본 문법은 statement ? if_true : if_false 형태입니다.

개발을 하다 보면 특정 조건이 충족될 때만 코드를 실행해야 하는 경우가 자주 있습니다.

예를 들어, 이커머스 웹사이트에 생년월일 입력 필드가 있다고 가정해 봅시다. 18세 이상 고객만 상품을 구매할 수 있도록 제한하고 싶다면, 사용자가 사이트를 이용하기 전에 나이를 확인하는 절차가 필요합니다.

결과는 참 또는 거짓 둘 중 하나로 나뉘기 때문에, 이럴 때 삼항 연산자를 활용하면 간단하게 처리할 수 있습니다.

이 글에서는 삼항 연산자의 개념과 사용법을 실제 예제와 함께 단계별로 살펴보겠습니다.

JavaScript 삼항 연산자란?

삼항 연산자는 '조건부 삼항 연산자'라고도 불리며, JavaScript의 if...else 문과 비슷한 역할을 합니다. 조건이 충족되는지 검사한 후, 그 결과에 따라 서로 다른 동작을 수행합니다.

삼항 연산식의 기본 문법은 다음과 같습니다:

(condition) ? 참일 때 실행할 표현식 : 거짓일 때 실행할 표현식

먼저 조건을 작성하고 물음표(?)를 붙입니다. 조건이 참이면 첫 번째 표현식이 실행되고, 거짓이면 두 번째 표현식이 실행됩니다.

기초 복습: if문

JavaScript에서 가장 기본적인 조건문은 'if' 문입니다. if문은 조건이 충족될 때 코드 블록을 실행하며, 그렇지 않으면 선택적으로 작성한 'else' 문의 내용을 실행합니다.

앞서 언급한 이커머스 사이트의 사용자 나이 확인 시나리오를 예로 들어 if문을 살펴보겠습니다.

// 고객 객체 선언
let customer = {
	name: "Joe",
	age: 15
}

if (customer.age >= 18) {
	user_is_right_age = true;
} else {
	user_is_right_age = false;
}

위 코드에서 if문이 실행되면 user_is_right_age 변수에는 false가 할당됩니다. 프로그램은 먼저 고객의 나이가 18세 이상인지 확인하고, Joe의 나이는 15세이므로 else 절이 실행되어 user_is_right_age가 false로 설정됩니다.

물론 이 코드도 정상적으로 동작하지만, 고객의 나이를 확인하는 데 무려 5줄이나 필요합니다.

만약 같은 기능을 단 한 줄로 처리할 수 있다면 어떨까요? 바로 이럴 때 삼항 연산자가 빛을 발합니다.

JavaScript 삼항 연산자 예제

앞서 작성한 if문을 삼항 연산자를 사용해 다음과 같이 간소화할 수 있습니다:

user_is_right_age = customer.age >= 18 ? true : false;

이 코드는 위의 if문과 동일한 결과(false)를 반환하지만 훨씬 적은 줄로 작성되었습니다. 만약 조건이 참이라면, 즉 사용자의 나이가 18세 이상이라면 프로그램은 true를 반환합니다.

이번에는 다른 예제를 살펴보겠습니다. 사이트의 고객이 특급 배송(express delivery) 대상인지 확인하고 싶다고 가정해 봅시다. 삼항 연산자를 사용하면 다음과 같이 처리할 수 있습니다:

let userIsExpressCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : 72;

삼항 연산자는 먼저 해당 사용자가 특급 배송 고객인지 확인한 뒤, 그에 맞는 배송 소요 시간을 결정합니다. 위 예제에서 사용자는 특급 배송 고객이므로 조건이 참으로 평가되어 48시간 배송이 적용됩니다. 반대로 일반 고객이라면 조건이 거짓으로 평가되어 72시간 배송을 받게 됩니다.

중첩된 JavaScript 삼항 연산자

중첩 삼항 연산자(nested ternary operator)는 삼항 연산자 안에 또 다른 삼항 연산자를 넣은 형태입니다. 여러 조건을 한 번에 평가해야 할 때 유용하지만, 주의하지 않으면 코드가 금방 읽기 어려워질 수 있습니다.

예를 들어, 이커머스 회사에서 세 가지 배송 옵션을 제공한다고 가정해 봅시다. 표준 배송(72시간), 특급 배송(48시간), 당일 배송(24시간)입니다. 선택지가 세 가지라면 삼항 연산자를 어떻게 활용할 수 있을까요?

걱정하지 마세요. 삼항 연산자는 여러 표현식을 중첩해서 사용할 수도 있습니다. 아래 예제를 통해 확인해 보겠습니다:

let userIsExpressCustomer = false;
let userIs24HourCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : userIs24HourCustomer ? 24 : 72;

이 경우 고객의 배송 시간은 24시간이 됩니다. 프로그램은 먼저 사용자가 특급 배송 고객인지 확인하고(아니므로 false), 다음으로 당일 배송 고객인지 확인합니다(참). 따라서 shippingTimeForCustomer 변수에는 24가 할당됩니다.

만약 사용자가 특급 배송 고객도, 당일 배송 고객도 아니라면 배송 시간은 72시간이 됩니다.

마무리

JavaScript 삼항 연산자는 조건이 참인지 거짓인지 판별할 때 if문의 훌륭한 대안이 되며, 여러 삼항 연산자를 중첩해 사용하는 것도 가능합니다.

삼항 연산자 같은 조건문은 특정 조건이 충족될 때만 코드를 실행하도록 제어합니다. 조건문은 거의 모든 프로그래밍 언어의 핵심 요소이며, 여러분이 작성하는 거의 모든 JavaScript 프로그램에서 만나게 될 것입니다.

JavaScript를 더 깊이 학습하고 싶으신가요? MDN 공식 문서와 다양한 온라인 강의를 활용해 기초 문법부터 실전 프로젝트까지 꾸준히 연습하면 실력을 빠르게 향상시킬 수 있습니다.