2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [1/2]

 

 

 

 

널 병합과 옵셔널 체이닝 문법은 ES2020에서 추가된 연산자입니다. 간단하면서도 유용한 문법들이니, 차근차근 살펴보겠습니다. 

 

 

○ 널 병합(nullish coalescing)

 

널 병합은 우선 [ ?? ]으로 나타냅니다. 물음표 두 개라니, 다소 뜬금없는 문법인 듯합니다. 하지만 이것이 무엇을 대체하는지 알게 되면 금세 감이 잡히게 됩니다. 바로 [ || ]과 비슷한 동작을 취하죠. 

 

그럼 Javascript에서 [ || ]가 어떻게 동작하는지부터 간단하게 짚어보고 넘어가겠습니다. 예를 들어 아래와 같은 경우가 있다고 가정해 봅시다. 

 

const a= 0;
const b = a || 3;
console.log(b);

 

 

자, 위와 같은 코드에서 b를 출력하면 어떤 값이 나올까요? 답은 바로 [ 3 ] 입니다. 그럼 여기서 변수 b의 값을 결정하는 요인이 무엇이었는지가 중요합니다. 

 

Javascript에서 [ || ]의 경우, 위와 같은 경우 a의 값이 falsy 값이면 뒤로 넘어가게 됩니다. 여기서 falsy 값에 해당하는 것은 0 / ' ' / false / NaN / null / undefined 입니다. 

 

자, 그럼 이제 널 병합 - [ ?? ]은 [ || ]과 어떻게 다를까요? 간단합니다. 단어 그대로 null과 undefined만을 구분하는 명령어입니다. (nullish는 말 그대로 null 값을 갖거나 undefined로 정의된 value를 의미합니다.) [ || ]가 falsy 값 전반에 해당하면 뒤로 넘어간다고 정의했는데, 널 병합의 경우에는 딱 두 가지 경우 null과 undefined일 경우에만 뒤로 넘어가게 됩니다. 

 

그럼 이제 아래 예제에서 각각의 출력 값을 예측해 보도록 하겠습니다. 

 

const c = 0;
const d = c ?? 3;
console.log(d);

const e = null;
const f = e ?? 3;
console.log(f);

const g = undefined;
const h = g ?? 3;
console.log(h);






/* 출력
0
3
3
*/