이걸지금봤네 / 자바스크립트 널 합체 연산자 '??'

Nullish Coalescing Operator ??

널 합체 연산자 ??는 리스트에서 처음으로 "정의된" 변수를 선택할 수 있는 짧은 문법을 제공합니다.

a ?? b의 결과는 다음과 같습니다.

• a가 null이나 undefined가 아니라면 a
• a가 null이나 undefined라면 b

x = a ?? b는 다음과 같습니다.

x = (a !== null && a !== undefined) ? a : b;

다음과 같은 예제도 가능합니다.

firstName ?? lastName ?? nickName ?? "Anonymous"

실명이 있을 때, firstName이 존재하면 firstName, lastName이 존재하면 lastName, nickName이 존재하면 nickName, 아무것도 없으면 "Anonymous"

||와의 비교

가장 중요한 차이는

• ||는 처음으로 truthy인 값을 반환합니다.
• ??는 처음으로 defined(정의된) 값을 반환합니다.

이러한 점 때문에 0 을 다룰 때는 주의해야 합니다.

height = height ?? 100;

위와 같은 코드는 height에 100을 할당하겠지만,

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

위와 같은 코드는 height에 0을 할당합니다.

??는 오직 defined 값인지만 확인한다는 것에 초점을 두어야 합니다.
||는 오직 falsy 인지에만 초점을 둡니다.

연산자 우선순위

연산자 우선순위가 매우 낮은 편에 속합니다. (늦게 고려됨) 그래서 대부분의 연산자가 수행된 뒤에 ?? 연산이 고려됩니다.

연산자 우선순위 참조 링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table

이러한 이유로 복잡한 연산에서는 항상 ()안에 넣어주는 것이 안전합니다.

기본 값을 넣는 데에 용이

클래스의 생성자 부분 같은 곳에서 아래와 같은 용도로 값 초기화에 사용하면 용이할 수 있습니다.

constructor(height){
  this.height = height ?? 100;
}

레퍼런스

https://javascript.info/nullish-coalescing-operator