[JavaScript] null 병합 할당 연산

null 병합 연산자를 사용하면 짧은 문법으로 여러 피연산자 중에 그 값이 ‘확정되어 있는’ 변수를 찾을 수 있다.

 

a ?? b

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

null 병합 연산자를 사용하지 않고 let x = a ?? b와 동일하게 동작하는 코드를 작성하면 아래와 같다.

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

확실히 코드의 길이가 길어지는 것을 볼 수 있다.

 

이처럼 null 병합 연산자를 사용하면 코드를 조금 더 간단하게 작성할 수 있다.

let firstName = null;
let lastName = null;
let nickName = "홍길동";

console.log(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 홍길동

 

?? 와 || 의 차이

null 병합 연산자는 OR 연산자( || ) 와 유사하게 보인다. 위 예시에서 ??를 ||로 바꿔도 결과는 동일하다. 하지만 두 연산자 사이에는 차이점이 있다.

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

 

null과 undefined, 0을 구분해서 다뤄야 하는 경우, 이 차이점은 큰 역할을 한다.

let height = height ?? 100;

// height에 값이 정의되지 않을 경우 height에는 100이 할당된다.

 

?? 연산자와 || 연산자를 비교해보자.

let height = 0;

console.log(height || 100); // 100

console.log(height ?? 100); // 0

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

 

반면에 height ?? 100 의 결과는 height 정확하게 null 이나 undefined일 경우에만 100 되기 때문에 height ?? 100 의 결과는 0이 된다.

 

이러한 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발해야 한다면 || 연산자 보다 ?? 연산자가 적합하다.

 

 

---

참고

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