JS의 삼항 연산자: 알아야 할 모든 것

삼항이란 무엇입니까?

삼항 연산자는 2015년 7월부터 여러 브라우저에서 사용할 수 있는 자바스크립트 연산자입니다. if/else 문의 약식 대안입니다. 이 연산자는 Java, C, Python과 같은 다양한 프로그래밍 언어에서 널리 사용되지만 이 기사에서는 javascript에 중점을 둘 것입니다.

삼항연산자의 일반적인 구문을 살펴보겠습니다.

condition ? ifTrue : ifFalse

위의 예에서 볼 수 있듯이 삼항 연산자는 if 및 else 문을 그에 따라 ?로 대체합니다. 및 : 기호. 물음표 왼쪽에 있는 조건을 확인합니다. true인 경우 ? 사이에 있는 첫 번째 표현식은 다음과 같습니다. : 표시가 실행됩니다. 거짓일 경우 : 기호 뒤에 적힌 마지막 표현식이 실행됩니다.

어떻게 작동하나요?

삼항 연산자의 작동 방식을 이해하기 위해 일반 if/else 문과 비교해 보겠습니다.
아래 Javascript 코드는 조건부로 콘솔에 문자열을 기록합니다.

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

이제 삼항 연산자를 사용하여 이 코드를 다시 작성해 보겠습니다.

let a = 10
a == 10 ? console.log("Variable is ten!") : console.log("Variable is not ten!")

이 코드 블록의 삼항 연산자는 의도한 대로 문자열을 조건부로 기록합니다. 하지만 이 성명서를 작성하는 더 좋은 방법이 있습니다.
삼항 연산자는 표현식을 실행할 뿐만 아니라 값도 반환합니다. 따라서 연산자를 사용하여 두 개의 서로 다른 console.log 표현식을 처리하는 대신 하나의 console.log 문에 있는 두 개의 서로 다른 값을 처리하는 방식으로 문을 작성할 수 있습니다.
예:

let a = 10
console.log(a == 10 ? "Variable is ten!" : "Variable is not ten!")

이 줄의 출력은 이전에 작성한 다른 삼항 표현식과 정확히 동일합니다. 하지만 이 코드는 더 간결하고 읽기 쉽습니다.

삼항 연산자를 사용하여 조건부로 변수에 값을 할당할 수 있습니다. 일반적인 if/else 문의 예를 확인한 후 삼항을 사용하여 다시 작성해 보겠습니다.

let a = 10
let b
if(a === 10){
    b = a * 5
}else{
    b = a * 2
}

a가 10이면 코드 블록은 5를 곱하고, 그렇지 않으면 변수에 2를 곱하고 두 경우 모두 b에 할당합니다.
삼항 연산자를 사용하는 대안은 다음과 같습니다:

let a = 10
let b = a === 10 ? a * 5 : a * 2

보시다시피 이와 같은 기본 작업은 한 줄 코드를 작성하는 것이 더 편리합니다.

중첩 조건

경우에 따라 서로 하나 이상의 if/else 조건을 사용해야 하는 경우가 있습니다. 삼항연산자는 연쇄조건에 활용될 수 있습니다.

let a = 5
if(a === 1){
    console.log("1")
}else if(a === 2){
    console.log("2")
}else{
    console.log("a is not 1 or 2")
}

위에 표시된 조건 연결은 다음과 같은 방법으로 삼항 연산자를 사용하여 표현할 수 있습니다.

let a = 5
console.log(a === 1 ? "1" : a === 2 ? "2" : "a is not 1 or 2")

예상할 수 있듯이 매우 지저분해지기 쉽습니다. 그렇기 때문에 복잡한 조건문에서는 삼항 연산자를 사용할 필요가 없습니다.

React의 삼항

이전에 React 애플리케이션을 구축한 적이 있다면 조건부 렌더링이 중요한 주제라는 것을 알고 계실 것입니다. 삼항 연산자를 사용하면 이 작업이 더 쉬워집니다. React 공식 페이지에서 예시를 확인해 보겠습니다.
성명서를 작성하는 일반적인 방법은 다음과 같습니다.

condition ? ifTrue : ifFalse

그리고 이것은 동일한 명령문이지만 삼항 연산자를 사용합니다.

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

보시다시피 훨씬 더 좋아 보입니다. 따라서 때로는 특히 React로 작업하는 동안 삼항을 사용하여 명령문을 작성하는 것이 더 깨끗하고 더 나은 접근 방식입니다. 그러나 어떤 경우에는 삼항 연산자로 인해 코드를 읽기가 더욱 어려워질 수 있습니다.

다른 어떤 상황에서 삼항 연산자를 사용하거나 피해야 한다고 생각하시나요? 여러분의 생각을 댓글로 알려주세요!

읽어주셔서 감사합니다.
자세한 내용은 다음 링크를 확인하세요.

• 삼항 연산자에 대한 추가 정보: 조건부(삼항) 연산자 - MDN Web Docs
• React의 조건부 렌더링에 대한 추가 정보: 조건부 렌더링 - React

위 내용은 JS의 삼항 연산자: 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!