[JavaScript] null 병합 연산자 (??) - (nullish coalescing operator)

null 병합 연산자 (??) 를 사용하면 여러 피연산자 중 확정 되어있는 변수를 찾을 수 있다.

확정되어있는 변수라는 말은 정의된 값을 말한다. 즉, null과 undefined 값이 아닌 모든 값을 true로 인식한다는것이다.

null 병합 연산자를 사용하는 이유

const age = 45;

const userAge = age || "secret";

console.log(userAge); // 45

const num = null;

const count = num || "undefined";

console.log(count); // undefined

위 예제와 같이 or 연산자를 사용하여 코드를 많이 작성한다.

앞에 값이 false이면 뒤에 값을 반환하고, 앞에 값이 true이면 뒤에 값을 반환한다.

하지만 여기서 문제점이 발생한다.

일반적으로 false로 인식되는값들은 아래와 같다.

false, '', 0, null, undefined

이러한 false로 인식되는 값들이 상황에 따라 문제를 발생시킨다.

상황에따라 사용자에게 값을 받을때 0을 받거나 ' ' 공백을 받을 수 있다.

그런데 이러한 경우에도 false로 인식되어 원하는 방식대로 코드가 동작하지 못하게된다.

아래에 예시로 문제점을 확인해보자.

// ex1) 애기의 나이를 사용자로부터 받아올 떼

const babyAge = "";

const userAge = babyAge || "secret";

console.log(userAge); // secret

// ex2) 물 섭취 횟수를 사용자로부터 받아올 떄

const drinkCount = 0;

const totalCount = drinkCount || "undefined";

console.log(count); // undefined

or 연산자를 사용하면 발생할 수 있는 문제점을 위의 코드예시에서 보면

ex1) 

애기의 나이를 값으로 사용자한테 받아와야하는데 아직 뱃속에 애기가있고 아직 세상에 나오지 않았다고 하자.

그래서 사용자가 아이의 나이를 공백으로 놔두었다.

그런데 이렇게 사용자가 의도적으로 공백으로 값을 전달하여도 공백은 false로 인식되어 secret을 값으로 반환하게된다.

ex2)

만약 오늘 물을 몇번 섭취했는지 사용자로부터 섭취 횟수를 값으로 받아와야 한다고 하자.

그런데 사용자가 물을 한번도 섭취하지않아서 0으로 값을 입력했다.

그런데 이때도 사용자가 0을 입력했지만 숫자 0은 false로 인식되어 undefined를 반환하게 된다.

이러한 or의 특성에서 발생되는 문제점을 해결하기위해서 null 병합 연산자를 사용하면 좋다.

// 공백, 0 true로 인식

const babyAge = "";

const userAge = babyAge ?? "secret";

console.log(userAge); // ""

const drinkCount = 0;

const count = drinkCount ?? "undefined";

console.log(count); // 0

// null과 undefined만 false로 인식

const babyAge = null;

const userAge = babyAge ?? "secret";

console.log(userAge); // secret

const drinkCount = undefined;

const count = drinkCount ?? "undefined";

console.log(count); // undefined

null 병합 연산자 (??)를 사용하면 위 예제와 같이 공백(' ')과 숫자 0을 false가 아닌 true로 인식한다.

그리고 오직 null과 undefined만 false 값으로 인식한다.

or 연산자와 ?? 연산자를 요약하여 정리해보면

?? 는 첫번째 정의된 값을 반환한다. (null, undefined를 제외한 값)

|| 는 첫번째 truthy한 값을 반환한다.

let number = 0;

console.log(number || 999); // 999

console.log(number ?? 333); // 0

최신 문법이므로 구형 브라우저에서는 폴리필이 필요하다.