[Javascript] Nullish Coalescing

처음 이 연산자를 접하고 ‘왜 이 좋을걸 이제 알았지?’ 라는 생각을 하게 되었다.

병합 연산자는 ??로 사용한다.

병합 연산자를 예를 들어 설명해보자면

let x = foo ?? bar();

 라는 식이 있을 때

• foo 가 null or undefined 가 아닐 경우 x = foo
• 그 외의 경우는 x = bar();

위의 코드를 풀어서 작성하게 되면 아래와 같은 식이 된다.

let x = foo !== null && foo !== undefined ? foo : bar();

자세한 내용은 공식문서에서 확인할 수 있다.

 

프로젝트에 적용 사례

회사에서 프로젝트를 진행하는데 find 함수를 사용할 때 undefined를 if문에 체크해야할 일이 있었다.

(find 함수는 조건과 해당하는 값이 없을 경우 undefined 를 반환한다.)

내 상황은 첫 렌더링 때 id값이 없기 때문에 find 함수가 undefined를 반환하고,

버튼을 클릭 했을 때 id에 값이 들어와 해당하는 id와 일치하는 객체가 반환 되어야 한다.

const arr = [
  {id: 1, value: 1},
  {id: 2, value: 2},
  {id: 3, value: 3},
  {id: 4, value: 4},
]

// 1번 방법

const obj = arr.find(data => data.id === id)

if(obj.value === undefined){
  if(obj.value === 'x'){
    ...
  }
}

아무래도 조건문에 undefined를 개발자가 직접 작성해서 적는 것이 보기에 좋지 않아서 다음과 같이 수정을 했었다.

// 2번 방법

const obj = arr.find(data => data.id === id)

if(obj?.value === 'x'){
    ...
}

위와 같은 방법으로 작성하고 merge request 를 신청했는데 코드 리뷰 comment 로 동료가 Nullish Coalescing 에 대한 링크를 걸어주었다.

// Nullish Coalescing

const obj = arr.find(data => data.id === id) ?? {id: '', value: ''}

if(obj.value === 'x'){
    ...
}

위와 같이 첫 렌더링시 초기 값을 할당해 주는 것으로 undefined를 사용하지 않고 해결할 수 있었다.