Javascript 논리 AND(&&) 연산자는 어떻게 작동합니까?

Javascript의 논리 AND(&&) 연산자는 Javascript logic 에서 자주 사용되지만 값을 반환하는 데에도 사용할 수 있습니다. 다른 기사에서 logical OR (||) operator works . && 작동 방식은 비슷하지만 논리가 다릅니다. AND && 연산자는 모든 피연산자가 true 인 경우 true를 반환하고 피연산자가 false인 경우 false를 반환합니다. 부울 컨텍스트 외부에서 사용되는 경우 ||의 반대 역할을 합니다. 첫 번째falsy 피연산자를 발견하거나 모두 true인 경우 기본적으로 오른쪽 피연산자를 반환합니다.

이 전체 가이드에서는 &&의 작동 방식을 살펴보고 몇 가지 예를 통해 값을 반환하는 시기와 반환할 값을 설명합니다.

Javascript의 참과 거짓

|| 연산자와 마찬가지로 &&는 Javascript의 truthy 및 falsy 개념에 의존합니다. 할 수 있습니다learn about both truthy and falsy here. 본질적으로 다음 값이 고려되고falsy 다른 모든 값이 고려됩니다truthy.

false

0 또는 -0 또는 0n

임의의 빈 문자열, 즉 ""

null

undefined

NaN

논리 AND 연산자는 Javascript에서 어떻게 작동합니까?

부울 컨텍스트에서 && 는 모든 피연산자가 true 또는 truthy 인 경우 단순히 true 를 반환하고 피연산자가 false 또는 falsy 인 경우 false 를 반환합니다. 내가 부울 컨텍스트를 말할 때 나는 true 문이나 어떤 식으로든 논리를 테스트하는 문과 같이 false 또는 if..else가 예상되는 상황을 언급하고 있습니다.

이러한 방식으로 작동하는 이유는 이러한 문이 truthy 또는 falsy 문을 참 또는 거짓으로 강제하기 때문입니다. 부울 컨텍스트에서 &&의 몇 가지 예를 살펴보겠습니다.

// This statement is TRUE and the console.log fires, 
// since "1" and "2" are both non-empty strings, so they are truthy
if("1" && "2") {
    console.log('this is true');
}

// This statement is TRUE, and the console.log fires,
// since both statements test as true - 1 is less than 10, and 2 is less than 10
if(1 < 10 && 2 < 10) {
    console.log('this is true');
}

// This statement is FALSE, and the console.log does not fire,
// since "" is falsy, and since one operand is false, the statement overall is false
if("" && 1 < 10) {
    console.log('this is false');
}

이 맥락에서 &&가 이렇게 작동하는 이유는 &&가 값을 반환하기 때문입니다. falsy 값이 있으면 falsy 값을 반환하고 그렇지 않으면 truthy 값을 반환합니다. 리턴값으로 컴파일하기 때문에 falsy 값이 있으면 전체적으로 false를 리턴합니다. 그렇지 않으면 truthy를 반환하므로 true를 반환합니다.

AND 연산자로 값 반환

이것은 자주 볼 수 있는 것이 아니지만 언급했듯이 && 문은 || 또는 nullish coalescing operator ?? 와 같은 다른 연산자와 마찬가지로 값을 반환합니다.

첫 번째 선택으로 falsy 값을 반환하려는 시나리오에서 사용할 수 있지만 그렇지 않으면 주어진 오른쪽 피연산자로 기본 설정됩니다. 왼쪽 피연산자가 && 인 경우 truthy 가 오른쪽 피연산자로 기본 설정되기 때문입니다. 몇 가지 예를 살펴보겠습니다.

// This is set to "" since "" is falsy - && always takes the first operand if falsy
let x = "" && 1;

// This is set to 2, since 1 is truthy - && defaults to the right hand operand if the left hand is truthy.
let y = 1 && 2;

// This is set to 3, since `1 < 5` is truthy, so && defaults to the right hand operand
let z = 1 < 5 && 3;

이것이 약간 혼란스럽다면 &&가 다시 작동하는 방식의 맥락에서 생각해 보십시오. &&는 모든 피연산자가 참인지 테스트하고 왼쪽에서 오른쪽으로 작동합니다. 첫 번째가 truthy 인 경우 두 번째로 이동합니다. 그런 다음 두 번째 것을 반환하고 그것이 truthy 인 경우 전체 명령문은 true입니다. 그렇지 않으면 falsy인 경우 전체 명령문은 false입니다. 왜냐하면 모든 피연산자는 AND와 함께 true여야 하기 때문입니다.

AND 연산자 연결

연산자이므로 &&를 연결할 수 있지만 동일한 논리가 적용됩니다. 체인의 첫 번째falsy 피연산자를 반환하지만 그렇지 않으면 마지막 피연산자를 반환합니다. 몇 가지 예를 살펴보겠습니다.

// x is set to 3, since true and 1 are both truthy.
let x = true && 1 && 3;

// y is set to false, since false is falsy.
let y = false && true && 3;

// z is set to x, since both {} and [] are truthy.
let z = {}  && [] && x;

결론

논리 AND( && ) 연산자는 Javascript에서 자주 사용되므로 작동 방식을 이해하는 것이 실생활에서 Javascript를 사용하는 데 매우 중요합니다. 매일 사용하지만 일반적으로 값을 반환하거나 OR operator 의 반대 역할을 한다고 생각하지 않습니다. 이것을 아는 것은 예상되는 변수의 기본값을 설정하는 데 유용한 도구입니다falsy.