JavaScript에서 null 병합 연산자(??)는 무엇입니까?

null 병합 연산자는 경우에 따라 우리의 삶을 훨씬 쉽게 만들어 줄 수 있는 매우 강력한 논리 연산자입니다. 그리고 이것으로 우리는 가장 효율적인 논리를 작성할 수 있습니다.



ES11은 이중 물음표(??)로 표시되는 null 병합 연산자를 도입했습니다.

통사론:

연산자는 두 개의 물음표??로 작성됩니다.

Nullish 병합 연산자의 구문은 다음과 같습니다.

leftExpr ?? rightExpr

다음은 연산자 작동 방식의 예입니다.

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

null ?? 'test' // returns 'test'
undefined ?? 56 // returns 56
null ?? 0 // returns 0
45 ?? 25 // returns 45

어떻게 작동합니까?

연산자의 아래 예를 고려하십시오. null 병합 연산자는 다음 두 값을 허용하는 논리 연산자입니다.

const result = value1 ?? value2

위의 명령문은 첫 번째 값( value2 )이 value1 또는 null 인 경우 두 번째 값( undefined )을 반환합니다. 그렇지 않으면 첫 번째 값( value1 )을 반환합니다.

기술적으로 위의 논리는 다음 블록과 동일합니다.

const result = value1;
if(result === null || result === undefined) {
   result = value2;
}

다시 말해,

이 맥락에서 null와 undefined가 유사하다고 가정하고 '정의'를 null 또는 정의되지 않은 것으로 가정합니다.

우리는 우리의 예를 다음과 같이 정의할 수 있습니다.
value1 ?? value2의 결과는,
value1가 정의된 경우 value1를 반환합니다.value1가 정의되지 않은 경우 value2를 반환합니다.

Nullish 병합 연산자의 더 많은 예를 살펴보겠습니다.

아래 예에서 첫 번째 값에는 null이 있고 두 번째 값에는 문자열이 있습니다. 첫 번째 값에 null이 있으므로 두 번째 값('기본 문자열')이 반환됩니다.

const nullValue = null;
const foo = nullValue ?? ‘default string’;
console.log(foo);
// expected output: “default string”

첫 번째 값이 반환되는 예를 하나 더 살펴보겠습니다.

const someNumber = 42;
const valC = someNumber ?? 0;
console.log(valC);
// expected output: “42”

첫 번째 문자열에 숫자가 있으므로 첫 번째 값( someNumber 또는 42 )이 반환됩니다.

아래 예를 고려하십시오. ??연산자가 두 번째 값을 반환하려면 첫 번째 값이 null이거나 정의되지 않아야 합니다. Empty string 또는 0는 고려되지 않습니다.

const emptyText = ""; // falsy
const valB = emptyText ?? "default for B";
console.log(valB); // "" (as the empty string is not null or undefined)

논리 OR( || ) 연산자와 어떻게 다릅니까?

OR ( || ) 연산자는 ?? 와 같은 방식으로 사용할 수 있습니다. 위의 예에서 동일한 결과를 얻을 수 있습니다.

하지만,
|| 와 ?? 사이에는 한 가지 차이점이 있습니다.
||는 첫 번째 truthy 값을 반환합니다.??는 첫 번째로 정의된 값을 반환합니다.
즉, ||는 아래 값( falsy)을 구분하지 않습니다.

false

0

빈 문자열 ( “” )

null

undefined

– falsy 값이라고 합니다. 이들 중 하나가 ||의 첫 번째 인수인 경우 결과로 두 번째 인수를 얻습니다.

0 || 2 // returns 2
0 ?? 2 // returns 0

여기서 ??는 null와 달리 undefined 및 ||만 고려합니다.

결론:

이것이 ?? 연산자가 작동하는 방식입니다. 코드에서 이 연산자를 사용한 경우 아래에 설명하십시오. 고맙습니다.