JavaScript

조건부 삼항 연산자

삼항 연산자는 JavaScript에서 조건에 따라 다른 값을 반환하거나 다른 동작을 수행하게 하는 간결한 문법이다. ES6 및 그 이후 버전에서도 여전히 유용하게 사용되며, 특히 if-else 문을 축약할 때 많이 사용된다. 삼항 연산자의 기본 구조는 다음과 같다.
조건 ? 참인 경우 : 거짓인 경우

삼항 연산자의 활용

삼항 연산자는 코드를 간결하게 만들고, 가독성을 높이는 데 도움을 준다. if-else 문 대신 삼항 연산자를 사용하여 같은 로직을 더 짧게 표현할 수 있다.

예시 1: 변수에 조건에 따른 값 할당

let a = 1;
a = a ? 'a' : 'b';
위 코드는 변수 a가 참 같은 값이면 a를 'a'로, 그렇지 않으면 'b'로 할당한다.

예시 2: 조건부 렌더링

React와 같은 라이브러리나 프레임워크에서 삼항 연산자는 조건부 렌더링에 자주 사용된다.
function WelcomeMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
}

주의사항

삼항 연산자를 사용할 때는 몇 가지 주의사항이 있다.
  1. 가독성: 삼항 연산자는 코드를 간결하게 만들 수 있지만, 과도하게 사용하거나 중첩하여 사용하면 오히려 코드의 가독성을 해칠 수 있다. 복잡한 조건의 경우, if-else 문을 사용하는 것이 더 좋을 수 있다.
  1. '&&'와 '||'의 사용: 삼항 연산자의 조건 부분에서는 &&와 ||를 사용할 수 있다. 하지만 조건을 판단하여 참인 경우와 거짓인 경우를 명확히 구분하기 위해 :를 사용해야 한다. &&와 ||는 주로 간단한 조건부 논리 연산에 사용된다.
const result = value && value > 10 ? 'Greater than 10' : 'Less than or equal to 10';
JavaScript에서 &&와 || 연산자의 작동 원리를 설명할 때, "논리곱(logical AND)"와 "논리합(logical OR)"보다는 "truthy"와 "falsy" 값의 관점에서 설명하는 것이 더 정확하다. 이는 JavaScript의 동적 타입 시스템과 "truthy" 및 "falsy" 값이 어떻게 평가되는지에 대한 이해를 바탕으로 한다.

&& 연산자 (Logical AND)

&& 연산자는 왼쪽 항부터 평가를 시작하여, 첫 번째 "falsy" 값을 만나면 그 값을 반환한다. 만약 모든 항이 "truthy"라면, 마지막 항의 값을 반환한다. 이는 "논리곱"의 개념보다는, "첫 번째 'falsy' 값 또는 마지막 'truthy' 값"을 반환한다는 관점에서 이해하는 것이 더 적합하다.
console.log(false && "dog"); // false
console.log(true && "dog"); // "dog"

|| 연산자 (Logical OR)

|| 연산자는 왼쪽 항부터 평가를 시작하여, 첫 번째 "truthy" 값을 만나면 그 값을 반환한다. 만약 모든 항이 "falsy"라면, 마지막 항의 값을 반환한다. 이는 "논리합"의 개념보다는, "첫 번째 'truthy' 값 또는 마지막 'falsy' 값"을 반환한다는 관점에서 이해하는 것이 적합하다.
console.log(false || "dog"); // "dog"
console.log(true || "dog"); // true

Truthy와 Falsy

JavaScript에서 "truthy"와 "falsy"의 개념은 해당 값이 조건문에서 true 또는 false로 간주되는지 여부를 나타낸다. 모든 값은 기본적으로 "truthy"이며, 단 여섯 가지 falsy 값이 있다: false, 0, "" (빈 문자열), null, undefined, NaN.