무효 병합에 대해 알아야 할 모든 것

Nullish 병합은 ES11(일명 ECMA Script 2020)의 새로운 Javascript 기능입니다. Nullish 병합 연산자는 다음과 같습니다??.

진실과 거짓 가치

더 진행하기 전에 더 나은 이해를 위해 Javascript의 참 값과 거짓 값에 대해 알아야 합니다. 기본적으로 false , 0 , -0 , BigInt(0n) , empty string('' or "" ) , NaN , null , undefined 는 Javascript에서 .falsy 값으로 간주됩니다.
이 외에는 짐작하신 대로 사실입니다.
이것을 기억하는 것이 중요합니다. nullish coalescing 뿐만 아니라 Javascript에 대해 더 깊이 파고들수록 매우 유용할 것입니다. 이것들이 거짓 값으로 취급된다는 것을 증명하려면 위에서 언급한 모든 거짓 값을 console.log 시도하십시오. 이렇게 👇,

  console.log(Boolean(0)) // would return false

전통 || 운영자

변수가 없는 경우 기본값을 설정하기 위해 논리 OR( || ) 연산자를 사용한 적이 있습니까? 간단히 예를 들자면,

const obj = {
  name : undefined
  age : 45
}

console.log(obj.name || 'default name') // default name

위의 예에서 이름이 존재하지 않는 경우 기본값을 설정하는 것은 매우 간단합니다. 이 기술을 폴백 메커니즘이라고 하며 개발자가 자주 사용합니다.
그러나 || 연산자가 어떻게 작동하는지 아는 것이 중요합니다. 간단 해.

|| 연산자는 첫 번째 진실 값을 확인합니다. 아래 예를 자세히 살펴보세요

let firstName = undefined
let secondName = null
let age = 0
let nickName = ''
let orignalName = 'Miller'

console.log(firstName || secondName || age || nickName || orignalName || true) // Miller

이제 Miller 대신 0가 반환되는 이유는 무엇입니까? 🤔🤔orignalName 변수와 부울 true 을 제외하고 다른 모든 변수는 앞에서 말했듯이 거짓 값으로 간주되기 때문입니다.

Think 💡
originalName is returned eventhough true is also a truthy value

그러나 || 연산자를 ?? 연산자로 바꾸려고 하면 0 가 반환됩니다.

console.log(firstName ?? secondName ?? age ?? nickName ?? orignalName) // 0

무엇을 ?? 하다 ?

MDN 문서에 따르면 nullish 병합은 "왼쪽 피연산자가 null이거나 정의되지 않은 경우 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자"입니다.

예를 들어,

const result = x ?? y ;
 // In the above code,
 // -> y is returned , only if x has null or undefined (not '').
 // -> x is returned if it has values other than null or undefined (including '').

구문이 처음에는 혼란스러워 보입니다. 위의 예는 아래와 같습니다.

const result = (x!== undefined && x!== null) ? x : y;

이것은 Javascript의 삼항 연산자에 익숙하다면 이해가 될 것입니다. 그렇지 않은 경우MDN docs 을 참조하십시오.??의 가장 일반적인 사용 사례는 잠재적으로 정의되지 않은 변수에 대한 기본값을 설정하거나 제공하는 것입니다. 그게 무슨 뜻이야 ? 몇 가지 예를 더 살펴보겠습니다.

Note 🧐
There are only two nullish values (null and undefined)

console.log(0 ?? 10) // 0  since neither of them is a nullish value
console.log(2 ?? 3) // 2 , since neither of them is a nullish value
console.log( null ?? 'john') // john , since null is a nullish value
console.log( undefined ?? 'john') // john , since undefined is also a nullish value

다만, ||와 다른 경우는 다음과 같다.

console.log(0 || 10) // 10 since, || operator looks for first truthy value, `0` being a falsy value is ignored and so 10 is printed

그렇다면 아래 코드(이전 예제 중 하나에서)가 0를 반환하는 이유는 무엇입니까?

console.log(firstName ?? secondName ?? age ?? nickName ?? orignalName) // 0

내가 분해하자 ,firstName는 undefined, nullish 값이므로 secondName로 이동합니다.secondName는 null, nullish 값이므로 age로 이동합니다.age 는 null 값이 아닌 0 이므로 age 를 반환합니다.

말이 됩니까? 처음에는 혼란스러워 보이지만 익숙해지면 이해가 될 것입니다.

|| 대 ??

주요 차이점은,

||는 첫 번째truthy 값

을 반환합니다.

??는 첫 번째defined 값

을 반환합니다.

도전 😎

이해를 테스트하려면 아래로 스크롤하여 솔루션을 보기 전에 아래 연습에 대한 정답을 추측해 보십시오.

let groceries = {
  item1: {
    name: 'apple'
    color: 'red',
    quantity: 5
  },
  item2 : {
    name: ''
    color: undefined
    quantity: null
  }
}

console.log((groceries.item2.color ?? groceries.item1.price ?? groceries.item1.name) || groceries.item1.color) 

솔루션 ✔️

당신의 대답이 사과라면, 축하합니다 🥳, 당신이 맞습니다. 잘못 생각했다면 걱정하지 마십시오. 이것은 익숙해지면 더 이해가 될 것입니다. 또한 이 튜토리얼이 당신을 혼란스럽게 할 경우 Nullish 병합에 대해 더 배우기 위해 몇 가지 추가 리소스를 제공할 것입니다.
제 글 읽어주셔서 감사합니다🙌🙌

추가 리소스 👉

Nullish Coalescing

Nullish Coalescing Operator Explained

MDN docs

Nullish Coalescing by Flavio