javascript

Nullish Coalescing Operator (??)

, ,

Nullish coalescing Operator

javascript에서 Nullish coalescing Operator를 사용 가능합니다. es2020에 Optional Chaining과 함께 추가되었습니다. typescript 3.7버전에서 이미 추가 된 기능이지만 es2020부터 javascript에서도 사용 가능합니다. Nullish coalescing Operator는 ??라는 연산자 앞에 있는 피연산자 값이 null이나 undefined일 때 연산자 뒤에 있는 값을 반환합니다. 사용법은 ||와 유사하지만 부정의 의미를 갖는 값 중 null과 undefined만 체크한다고 보시면 될 것 같습니다.

Usage

1
2
3
4
5
6
7
8
9
const a = null ?? "hello";
const b = '' ?? "hello";
const c = false ?? "hello";
const d = 0 ?? "hello";
const e = undefined ?? "hello";
const f = {} ?? "hello";
const g = {}.greeting ?? "hello";
const h = [] ?? "hello";
const i = [][1] ?? "hello";

위 코드에서 hello가 되는 변수는 어떤 것일까요?

1
2
3
4
5
6
7
8
9
console.log(a); // 'hello'
console.log(b); // ''
console.log(c); // false
console.log(d); // 0
console.log(e); // 'hello'
console.log(f); // {}
console.log(g); // 'hello'
console.log(h); // []
console.log(i); // 'hello'

위와 같이 a, e, g, i만 hello가 출력됩니다. a는 ?? 연산자의 앞의 값이 null이기 때문에 연산자 뒤의 hello가 출력됩니다. e, g, i는 undefined이기 때문에 마찬가지로 hello가 출력됩니다. ||연산자는 연산자의 앞 값이 부정적인 값이면 뒤 값이 출력됩니다. 하지만 Nullish coalescing Operator는 오로지 null 또는 undefined만 비교합니다.

1
2
3
4
5
6
7
8
9
const nco = function(pre, post) {
  if(pre === null || pre === undefined) {
    return post
  } else {
    return pre;
  }
};
console.log(nco(null, 'hello')); // 'hello;
console.log(nco({}, 'hello')); // {}

위 함수처럼 pre의 값을 null 또는 undefined인지 비교하고 맞으면 post 값을 반환하고 아니면 pre 값을 반환한다고 생각하시면 될 것 같습니다.

공유하기