JavaScript - 조건부 연산자

조건 연산자란?

조건 연산자는 삼항 연산자 또는 "물음표"연산자라고도 합니다. if ... else 문을 짧고 간결하게 작성할 수 있게 해주는 연산자입니다. 연산자는 물음표?와 함께 사용되므로 이름이 "물음표"연산자입니다. 연산자에는 3개의 피연산자가 있으므로 이름이 "삼항"연산자입니다.

구문 및 예

일반적으로 다음과 같은 방식으로 if ... else 문을 작성합니다.

let value;

if (condition) {
  value = "true";
} else {
  value = "false";
}

조건부 연산자를 사용하면 위의 코드를 다음과 같이 작성할 수 있습니다.

// syntax -> condition ? operand2: operand3; 
let value = condition ? "true" : "false";

첫 번째 피연산자는 평가할 조건이고 그 뒤에 물음표( ? )가 있습니다. 두 번째 피연산자는 조건이 "truthy"인 경우 실행하려는 표현식이고 그 뒤에 콜론( : )이 있습니다. 마지막으로 세 번째 피연산자는 조건이 "falsy"인 경우 실행할 표현식입니다.

조건 연산자를 사용하면 if ... else 문 블록을 한 줄에 깔끔하게 작성하고 변수에 직접 할당할 수 있음을 알 수 있습니다.

네스팅/체인

조건부 연산자는 쓰기가 더 짧기 때문에 if ... else 문 블록의 대안으로 자주 사용되며 때로는 코드 가독성을 위해 if ... else 문을 사용하는 것이 더 좋습니다. 즉, if ... else if ... else 문에도 조건부 연산자를 사용할 수 있습니다.

예를 들어:

function getAgeGroup(age) {
  if (age >= 18) {
    return "adult";
  } 
  else if (age >= 13) {
    return "adolescent";
  }
  else {
    return "child";
  }
}

여기에 "age"매개변수를 기반으로 연령 용어를 반환하는 함수가 있습니다. 이 함수는 if ... else if ... else 문으로 입력 인수를 평가하고 적절한 용어를 반환합니다.
삼항 연산자를 사용하려면 다음과 같이 할 수 있습니다.

function getAgeGroup(age) {
  return age >= 18 ? "adult" 
    : age >= 13 ? "adolescent" 
    : "child";
}

훨씬 더 짧다는 것을 알 수 있습니다. 읽을 수 있는지 여부는 귀하가 판단하게하겠습니다 😃.

(설명: 예제에서 첫 번째 조건이 "truthy"이면 문자열 "adult"를 반환하고, 그렇지 않으면 두 번째 조건으로 이동하여 다시 "truthy"를 확인하고 문자열 "adolescent"를 반환합니다. 두 번째 조건이 "falsy"이면 문자열 "child"가 반환됩니다.)

요약

조건 연산자에는 3개의 피연산자가 있으며 if ... else 문 블록의 대안으로 사용할 수 있습니다. 읽기 어려울 수 있으므로 단순한 경우에 사용해야 합니다. 내 사용 사례의 예는 React에서 JSX 내에서 직접 if 조건을 사용할 수 없으므로 조건부 렌더링에 이 조건부 연산자를 사용할 수 있습니다.

읽어주셔서 감사합니다. 도움이 되셨다면 댓글을 남겨주시고, 실수를 발견하셨거나 추가하고 싶으시면 피드백을 남겨주세요.