JavaScript 삼항 연산자:단계별 가이드

JavaScript 삼항 연산자는 명령문을 평가하고 두 값 중 하나를 반환합니다. 문이 true 또는 false로 평가되는 경우 삼항 연산자에 값을 반환하도록 지시할 수 있습니다. 삼항 연산자의 구문은 다음과 같습니다. if_true :if_false;.

특정 조건이 충족될 때 특정 코드만 실행되기를 원하는 경우가 있습니다.

예를 들어 전자상거래 웹사이트에 생년월일 필드가 있다고 가정해 보겠습니다. 또한 18세 이상의 고객만 웹사이트에서 상품을 구매할 수 있도록 허용한다고 가정해 보겠습니다. 사이트를 사용하기 전에 사용자가 적절한 연령인지 확인하는 것이 좋습니다.

잠재적인 결과는 참 또는 거짓이므로 삼항 연산자를 사용하여 사용자가 올바른 연령인지 확인할 수 있습니다.

이 튜토리얼에서는 삼항 연산자를 사용하는 방법에 대해 논의할 것입니다. 시작하는 데 도움이 되도록 예시를 참조하겠습니다.

자바스크립트 삼항 연산자란 무엇입니까?

조건부 삼항 연산자로 알려진 JavaScript 삼항 연산자는 JavaScript if…else 문과 유사합니다. 삼항 연산자는 조건이 충족되는지 확인하고 해당 조건이 충족되는지 여부에 따라 작업을 수행합니다.

삼항 표현식의 구문은 다음과 같습니다.

(condition) ? if true, then run : if false, then run

조건이 먼저 오고 그 다음에 물음표가 옵니다. 조건이 충족되면 첫 번째 표현식이 실행됩니다. 조건이 충족되지 않으면 두 번째 조건 두 번째 조건이 실행됩니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

기본으로 돌아가기:if 문

가장 기본적인 JavaScript 조건 연산자는 "if" 문입니다. 이 명령문은 조건이 충족되면 코드 블록을 실행할 수 있습니다. 그렇지 않으면 프로그램은 선택적 "else" 문의 내용을 실행합니다.

다음은 if 문의 예입니다. 우리는 앞에서 논의한 사용자의 연령을 확인하는 전자 상거래 사이트의 시나리오를 사용합니다.

// Declare our customer object
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 거짓으로 설정됩니다. . 프로그램은 먼저 고객의 연령이 18세 이상인지 확인합니다. 사용자가 18세 미만이기 때문에 else 절이 실행되고 user_is_right_age가 설정됩니다. 거짓 .

이 코드는 작동하지만 많은 코드입니다! 고객의 연령을 확인하는 데 5줄이 걸립니다.

단 한 줄의 코드로 이와 동일한 기능을 수행하는 방법이 있다고 말하면 어떻게 될까요? 여기에서 삼항 연산자가 등장합니다.

자바스크립트 삼항 연산자의 예

삼항 연산자를 사용하여 이전 if 문을 단순화할 수 있습니다.

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

이 코드는 실행될 때 위의 코드와 동일한 결과를 제공합니다(false ), 그러나 더 적은 줄에 있습니다. 조건이 true인 경우(사용자의 연령이 18세 이상인 경우) 프로그램은 true를 반환합니다. .

위에서 사용한 예에서 프로그램은 사용자가 올바른 연령인지 확인합니다. 우리 코드는 거짓을 반환합니다. 사용자가 18세 미만이기 때문에 조건이 충족되지 않았습니다.

다른 예를 살펴보겠습니다. 우리 사이트의 고객이 속달 배송을 받을 자격이 있는지 확인하고 싶다고 가정해 보겠습니다. JavaScript 삼항 연산자를 사용하여 이 작업을 수행할 수 있습니다.

let userIsExpressCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : 72;

삼항 연산자는 사용자가 특급 고객인지 확인한 다음 사용자의 배송 시간을 결정합니다. 위에서 볼 수 있듯이 우리 사용자는 특급 고객이므로 조건이 true로 평가되면 48시간 배송됩니다. 고객이 특급 고객이 아닌 경우 코드는 false로 평가됩니다. 따라서 고객은 72시간 배송을 받게 됩니다.

중첩 자바스크립트 삼항 연산자

중첩 JavaScript 삼항 연산자는 다른 삼항 내의 삼항입니다. 이러한 문은 여러 작업을 평가하려는 경우에 유용합니다. 하지만 주의하지 않으면 빠르게 읽기 어려워질 수 있습니다.

표준(72), 특급(48시간)의 세 가지 배송 시간을 제공하는 전자 상거래 회사라고 가정해 보겠습니다. 그리고 1일(24시간). 세 가지 옵션이 있는 경우 이 경우 삼항 연산자를 어떻게 사용합니까? if…else만 사용해야 하나요? 대신 진술?

걱정하지 마세요. 세 개의 표현식이 있는 JS 삼항 연산자를 사용할 수도 있습니다. 다음은 위의 실제 사례의 예입니다.

let userIsExpressCustomer = false;
let userIs24HourCustomer = true;

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

이 경우 고객의 배송 시간은 24시간이 됩니다. 이 프로그램은 먼저 사용자가 익스프레스 고객인지 확인합니다. 그런 다음 24시간 고객인지 확인합니다. 사실입니다. 따라서 shippingTimeForCustomer 변수에 값 24가 할당됩니다.

사용자가 익스프레스 또는 24시간 고객이 아닌 경우 배송 시간은 72시간이 됩니다.

결론

JavaScript 삼항 연산자는 조건이 참인지 거짓인지 평가하려는 경우 if 문의 대안입니다. 다른 연산자 안에 여러 삼항 연산자를 묶을 수 있습니다.

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

JavaScript에 대해 더 알고 싶으십니까? 우리는 당신을 덮었습니다. JavaScript를 배우는 방법에 대한 완전한 가이드가 있습니다. 이 가이드에서는 JavaScript에 대한 지식을 더욱 발전시키는 데 필요한 모든 리소스를 찾을 수 있습니다.