조아마시

쓸모 있는 상세페이지 만들기

웹개발/javascript

[자바스크립트] Logical AND/OR 할당

joamashi 2024. 7. 28. 22:07

자바스크립트에서 논리 연산자인 AND(&&)와 OR(||)은 단순히 참/거짓을 판단하는 것뿐만 아니라, 변수에 값을 할당하는 데에도 활용될 수 있습니다. 이를 논리 AND/OR 할당이라고 합니다.

기본 개념

  • AND(&&) 할당: 왼쪽 피연산자가 falsy 값(false, 0, "", null, undefined, NaN)이면 왼쪽 피연산자를 그대로 반환하고, truthy 값이면 오른쪽 피연산자를 반환합니다.
  • OR(||) 할당: 왼쪽 피연산자가 truthy 값이면 왼쪽 피연산자를 그대로 반환하고, falsy 값이면 오른쪽 피연산자를 반환합니다.
let a = 0;
let b = 10;
let c;

// AND 할당
c = a && b;  // c는 0 (a가 falsy이므로 a를 반환)

// OR 할당
c = a || b;  // c는 10 (a가 falsy이므로 b를 반환)

활용 사례

  • 기본값 설정:
    let name = user.name || 'anonymous'; // user.name이 없으면 'anonymous'로 설정
  • 조건부 로직 간소화:
    let hasPermission = user.isAdmin && user.isVerified; // 두 조건 모두 충족해야 true
  • null 병합 연산자(??): ES2020부터 도입된 연산자로, 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 피연산자를 반환합니다.
    let defaultValue = null;
    let result = defaultValue ?? 'default value'; // result는 'default value'

깊이 있는 설명

  • 단락 평가(Short-circuit evaluation): 논리 연산자는 왼쪽에서 오른쪽으로 평가하며, 결과를 미리 예측할 수 있는 경우 나머지 연산을 생략합니다. 예를 들어, false && ...는 항상 false이므로 뒤의 연산은 수행되지 않습니다.
  • 타입 변환: 논리 연산에서 모든 값은 boolean으로 변환됩니다. 즉, 0, "", null, undefined, NaN은 false로, 나머지는 true로 변환됩니다.
  • 복합적인 표현: 논리 연산자는 여러 개를 연속해서 사용할 수 있습니다.
    let result = a && b || c;
  • 주의할 점: 논리 연산자는 할당 연산자보다 우선순위가 높으므로, 복잡한 표현에서는 괄호를 사용하여 명확하게 해야 합니다.

결론

논리 AND/OR 할당은 코드를 간결하고 효율적으로 만들 수 있는 강력한 도구입니다. 하지만 잘못 사용하면 예상치 못한 결과를 초래할 수 있으므로, 각 연산자의 특징과 우선순위를 정확히 이해하고 사용해야 합니다.

728x90