삼항 연산자란?

삼항 연산자는 if…else 문을 사용하는 대신 코드의 조건을 확인하는 데 사용됩니다. 조건부 연산자라고도 하며 코드를 훨씬 더 짧고 읽기 쉽게 만듭니다(대부분의 경우).

통사론

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

condition ? trueExpression : falseExpression

condition — 평가 중인 상태. 예: 연령 > 5입니다.

trueExpression: 다음과 같은 경우에 발생해야 합니다 condition.true.

falseExpression: 다음과 같은 경우에 발생해야 합니다 condition.false.

예

다음은 신호등의 색상에 따라 자동차가 움직여야 하는지 여부를 확인하는 if…else 문을 사용하는 예입니다.

let color = ‘red’; // color of the traffic light
let carMovement;

if (color === 'red') {
  carMovement = 'stop';
} else {
  carMovement = 'go';
}

console.log(carMovement); //stop

let color = 'red'; // color of the traffic light
let carMovement = color === red ? 'stop' : 'go';

console.log(carMovement); //stop

하나의 삼항 연산자를 다른 삼항 연산자 내부의 표현식으로 중첩하거나 연결할 수도 있습니다. 다음은 숫자가 양수, 음수 또는 0인지 확인하는 예입니다.

let num = 2;
let result = num >= 0 ? num === 0 ? 'zero' : 'positive' : 'negative';

console.log(result); //positive

let num = 2;
let result = (num >= 0) ? (num === 0 ? "zero" : "positive") : "negative";

console.log(result); //positive

언제 삼항 연산자를 사용해야 합니까?

강조 표시된 위의 예와 같이 삼항 연산자는 코드를 더 짧게 만들 수 있지만 복잡한 중첩 삼항 연산자를 사용할 때 코드를 읽기 어렵고 더 혼란스럽게 만드는 경향이 있습니다.

대략적인 규칙은 향후 2년 안에 다른 사람이 귀하의 코드를 쉽게 읽고 이해할 수 있을 것이라고 생각하는 것입니다. 대답이 '아니오'인 경우 대신 if…else 문을 사용하십시오.

팁: ESlint를 사용하는 경우 중첩된 삼항 연산자의 사용을 금지합니다!

결론

삼항 연산자는 코드를 더 쉽게 읽고 이해하고 유지 관리할 수 있을 때만 빛을 발합니다. 단순히 코드를 짧게 만드는 것이 아니라 효과적으로 사용하세요.