삼항 연산자는 무엇이며 어떻게 사용합니까?

조건 연산자라고도 하는 JavaScript의 삼항 연산자( ?: )는 조건문, 가장 일반적으로 할당을 대체하는 데 사용됩니다. 예를 들어:

// Code using if...else
let x;
if (someCondition) {
  x = 10;
} else {
  x = 20;
}

// Same result using the ternary operator
const x = someCondition ? 10 : 20;

위의 예에서 알 수 있듯이 삼항 연산자는 if...else 문을 사용하는 것보다 짧고 조건이 거의 한 줄이면 결과 값을 변수에 할당할 수 있습니다. 이에 대한 유용한 결과는 암시적 반환이 있는 화살표 함수에 삼항 연산자를 사용할 수 있다는 것입니다.

// Code using if...else
const conditionalX = (condition, x) => {
  if (condition) return x;
  else return x + 5;
}

// Same result using the ternary operator
const conditionalX = (condition, x) => condition ? x : x + 5;

그러나 이러한 종류의 상황에 대해 dedicated rule을 갖는 한 ESLint에서는 삼항식 중첩을 권장하지 않습니다. 또한 삼항 연산자는 JSX 코드에서 조건부 렌더링을 쉽게 할 수 있으므로 React 개발자가 선호하는 연산자입니다.

const ItemListTitle = (count) => (
  <h3>Item list{ count ? (<span> - {count} items</span>) : '(Empty)'}<h3>
);

마지막으로 "삼항"연산자라고 하는 이유가 궁금할 것입니다. "삼항"이라는 단어는 n-ary word setup을 기반으로 하며 3개의 피연산자(조건, 참인 경우 실행할 표현식, 거짓인 경우 실행할 표현식)가 있는 연산자를 의미합니다.


짧은 고품질 코드 스니펫과 기사가 마음에 드십니까? 우리도 그래! 이와 같은 더 많은 기사를 보려면 30 seconds of code을 방문하거나 일일 JavaScript, React 및 Python 스니펫을 보려면 팔로우하세요! 👨‍💻