&&를 사용하여 개체 검색 TypeError 방지

undefined 인 객체 값을 검색하면 TypeError! 따라서 if 문으로 초기 확인을 수행해야 합니다. 더 나은 방법은 && 👍를 사용하여 이것을 리팩토링하는 것입니다.
&&를 이런 식으로 사용하는 것은 첫 번째 표현식이 두 번째 표현식을 보호하기 때문에 가드 오퍼레이터라고도 합니다. 즉, 첫 번째 표현이 참인 경우에만 두 번째 표현이 평가됩니다.

const forest = {}

forest.tree // undefined
forest.tree.seed // TypeError 😱


// This will prevent the TypeError but...
if(forest.tree) {
  forest.tree.seed
}

// ✅Much better using &&
forest.tree && forest.tree.seed // undefined

&& 연산자 이해

나는 항상 &&가 다음과 같은 부울 검사에 사용된다고 생각했습니다.

if(a && b) {
  // do something
}

&&를 사용하여 무언가를 평가하거나 어떤 종류의 가치를 생성할 수 있다고는 생각하지 못했습니다. 그래서 이 Guard Operator에 대해 처음 알았을 때 매우 혼란스러웠습니다. 그러니 당신도 걱정하지 마세요. 이것을 이해하는 데는 시간이 좀 걸릴 것입니다. 마침내 이것을 이해하는 데 도움이 된 자료는 Kyle Simpson의 "You Don't Know JavaScript"책입니다.

그가 설명하는 방식은 &&를 논리 연산자가 아니라 선택자 연산자로 생각하는 것입니다. 부울 값이나 논리 값이 되지 않습니다. 대신 결과는 항상 두 표현식 중 하나입니다. 그의 말에 따르면 2개의 피연산자 값 중 하나를 선택합니다.

The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.

수건을 던지기 전에 예를 살펴보겠습니다.

const truthy = true;
const falsy = false;
const money = '💰';

truthy && money; // '💰'
falsy && money; // false

따라서 첫 번째 표현(왼쪽)이 참이면 money가 선택됩니다. 그렇지 않으면 첫 번째 표현식이 선택되고 두 번째 표현식(오른쪽)이 평가되지 않습니다. 이것은 두 번째 표현식이 평가되지 않기 때문에 단락 평가라고 합니다.

Kyle Simpson의 "You Don't Know JS"책의 정의는 다음과 같습니다.

The right-hand operand will not be evaluated if the left-hand operand is sufficient to determine the outcome of the operation. Hence, the name "short circuited" (in that if possible, it will take an early shortcut out).

진실한 가치

따라서 본질적으로 첫 번째 표현(왼쪽)은 진실 검사기입니다. 참이면 두 번째 표현식(오른쪽)이 선택됩니다. 첫 번째 표현식이 거짓이면 첫 번째 표현식의 값이 사용됩니다. 무엇이 진실인지 이해하기 위해 살펴봅시다 🤓

진실 값 목록은 상당히 광범위합니다. 그래서 무엇이 진실인지 기억하는 대신에. 잘못된 목록을 기억하는 것이 훨씬 쉽습니다. 허위 목록에 없는 것은 무엇이든 진실로 간주됩니다 👍

// JS Essentials: Falsy Values

false
undefined
null
NaN
0 or +0 or -0
"" or '' or `` (empty string)

// Everything else is truthy

여기 &&를 사용한 조건부 if 리팩토링

가드 연산자가 조건문을 리팩터링하는 데 어떻게 유용할 수 있는지 알아보기 위해 다른 예를 살펴보겠습니다.

const steak = '🥩'
function cook() = {...}

// Most people use `if`
if(steak) {
  cook()
}

// Refactored using &&
steak && cook(); // `cook` only gets called if `steak` is true

이에 대해 생각해 볼 수 있는 좋은 방법은 다음과 같습니다.

someCondition && doSomething()

감사:

제안서 선택적 체이닝

정말 신나는 일입니다. EcmaScript 사람들 또는 JavaScript 위원회는 "Optional Chaining"구문을 제안하고 있습니다. C#으로 작업할 때 이것은 저에게 게임 체인저였습니다. 나는 항상 JavaScript가 비슷한 것을 갖기를 바랐습니다. 이 제안이 통과되길 진심으로 바랍니다 🙌

제안된 선택적 연결 구문으로 예제를 다시 작성합니다. 🤩:

// Current
forest.tree && forest.tree.seed

// Proposal
forest.tree?.seed

앱에서 이것을 사용하지 마십시오. 현재 지원되지 않습니다.

제안서 에 대해 자세히 읽어보십시오.

여기 자원

MDN: Logical operators

YDKJS: Types & Grammer

YDKJS: Short Circuited

Guard And Default Operators In Javascript

JavaScript/Operators

읽어주셔서 감사합니다 ❤
안녕하세요! | | SamanthaMing.com: Falsy Values | Facebook | Medium