[ES11] Nullish-coalescing

💎 언제 사용할까?

🔹 매개변수 값이 null, undefined일 때 할당할 기본 값 설정하기

function printMessage(text) {
  let message = text;
  if (text == null || text == undefined) {
    message = 'Nothing to display';
  }
  console.log(message);
}

text를 인자로 받아오는 printMessage함수는 text값을 전달 받았을 때는 그 text값을 message에 할당해주고, text값이 null 혹은 undefined일 때는 'Nothing to display'를 message에 할당해준다.

이 함수는 정상적으로 작동하는 함수이지만, ES11에서 추가된 Nullish-coalescing을 이용하면 더 효율적이고 가독성 좋은 코드로 작성할 수 있다.

default parameter로도 할 수 있지 않을까?
기본 text값을 지정해주면 별도로 전달받은 text값이 없을 경우 default parameter값이 할당되니까 말이다.

맞는 말이지만, Nullish-coalescing과는 차이점이 있다.
아래 코드를 보자.

🔹 Default parameter (only for undefined)

function printMessage(text = 'Nothing to display') {
  console.log(text);
}

printMessage('Hello') //'Hello'
printMessage(undefined); //'Nothing to display'
printMessage(null); //null

default parameter는 undefined일 때 매개변수에 설정된 값을 할당해주지만, null일 때는 null 그대로 적용되지 않아 null을 넣으면 'Nothing to display'가 아닌 null이 그대로 출력된다.

Default parameter는 undefined인 값에만 적용된다는 점을 기억하자.

그렇다면, null값일 경우에도 적용되는 값을 설정해주려면 어떻게 해야할까?

🔹 Nullish-coalescing (undefined, null)

function printMessage(text) {
  const message = text ?? 'Nothing to display';
  console.log(message);
}

function printMessage(text = 'Nothing to display') {
  console.log(text);
}

pringMessage('Hello'); //'Hello'
pringMessage(undefined); //'Nothing to display'
printMessage(null); //'Nothing to display'

Nullish-coalescing은 undefined와 null값으로 인자가 전달되었을 때 원하는 값을 할당해줄 수 있다.

💎 어떻게 쓸까?

🔹 &&

leftExr ?? rightExr

leftExr의 값이 null혹은 undefined일 때 rightExr 호출

🔹 ||

leftExr || rightExr

leftExr의 값이 falsy일 때 rightExr 호출

falsy

알고 있지만, 그래도 한번 더 정리하고 넘어가자.

 0
 -0
 NaN
 undefined
 null
 '', "", ``

Reference

• 엘리의 드림코딩 (youtube) - 자바스크립트 최신문법(ES6, ES11)