[JS] ?? - null 병합 연산자

전미혜·2023년 3월 9일
0

?? - null 병합 연산자

||와 달리 falsy가 아닌 null 또는 undefined만 대체한다.
||보다 엄격하다고 볼 수 있다.

**쉽게 말해 null과 undefined과 걸러낼때 사용한다.

a ?? b의 평가 결과는 다음과 같다.

  • a가 null도 아니고 undefined도 아니면 a
  • 그 외의 경우는 b

<예시>

let baby1 = '홍길동';
let baby2; // 아직 이름을 짓지 못함

const nameTag1 = baby1 ?? '1번 아기';
const nameTag2 = baby2 ?? '2번 아기';

console.log(nameTag1, nameTag2);
//값은 홍길동 2번 아기

'??'와 '||'의 차이

  • ||는 첫 번째 truthy 값을 반환한다.
  • ??는 첫 번째 정의된(defined) 값을 반환한다.

null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다.

<예시>

height = height ?? 100;
  // 결과는 100


이제 `??`와 `||`을 비교해보자.
  let height = 0;

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

height || 100은 height에 0을 할당했지만 0을 falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리한다.
따라서 height || 100의 평가 결과는 100

반면 height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 된다. 예시에선 height에 0이라는 값을 할당했기 때문에 얼럿창엔 0이 출력된다.

이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.




참고자료 https://ko.javascript.info/nullish-coalescing-operator
profile
내 개발 인생의 Bootstrapping

0개의 댓글