[Javascript] nullish 병합 연산자 '??'

 

nullish 병합 연산자 '??'

nullish 병합 연산자를 사용하면 여러 피연산자들 중 '값이 할당된' 변수를 찾을 수 있다.

undefined 나 null 이 아닌 값을 찾을 때 유용하다.

 

 

 

형태

  a ?? b  

a가 null도 아니고 undefined도 아니면 a

그 외의 경우는 b

 

 

예시 코드 1.

let a = undefined;
let b = '하늘';

// 1. a가 null과 undefined 인지 확인한다.
// 2. a = undefined 이므로 b인 '하늘'을 반환한다.
console.log(a ?? b) // 하늘

 

예시 코드 2.

let firstName = null;
let lastName = null;
let nickName = '해피';

// 1. firstName은 null 이다. => 다음 피연산자를 확인한다.
// 2. lastName은 null 이다. => 다음 피연산자를 확인한다.
// 3. nickName은 '해피' 라는 문자열이다.
// 4. nickName이 null 혹은 undefined로 되어있지 않았기때문에 '해피'가 반환된다.
// 5. 가장 뒤 '익명' 은 앞에서 이미 '확정되어있는 변수'를 찾았기 때문에 아무 일도 발생하지 않는다.
console.log(firstName ?? lastName ?? nickName ?? '익명'); // '해피'

 

 

 

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

nullish 병합 연산자 ??는 OR 연산자 ||와 상당히 유사해 보이지만,

이 둘 사이엔 중요한 차이점이 있다.

 

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

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

 

아래 코드에서 비교해보자.

let number = 0;
// 1. number에 0을 할당했지만, || 는 number를 falsy한 값으로 취급하므로 100을 반환한다.
console.log(number || 100);
// 2. number가 undefined나 null이 아닌 0 이라는 값을 할당 했기때문에 0을 반환한다.
console.log(number ?? 100);

let text = '';
// 1. text는 빈 문자열로 falsy한 값이다. ||는 falsy한 값인 빈 문자열이 아닌 '하늘'을 반환한다.
console.log(text || '하늘'); // 하늘
// 2. text가 undefined나 null이 아닌 '' 라는 값을 할당 했기때문에 '' 를 반환한다.
console.log(text ?? '하늘'); // ''

 

 

이런 특징 때문에 높이 등 0이 할당될 수 있는 변수를 사용한 기능을 개발할 땐

|| 보다 ??가 적합하다.