(JS)클린 코드 시리즈2 - Nullish coalescing operator #?? #널 병합 연산자

Nullish coalescing operator #?? #널 병합 연산자

javascript

 

실제로 코딩하다보면 null 혹은 undefind를 참조하여 에러가 뜨는 경우가 많습니다.

초보인 분들은 에러 메세지를 검색해서 해결할 수도 있고 어느정도 경험이 있으신분들은 아 null 방지를 안해줬구나하고

바로 AND(&&)문 아니면 옵셔널 체이닝으로 해결할 수도 있습니다.

하지만 &&(AND)문이나 ?.(Optional Chaining)은 참조할 값이 null이면 그냥 아무것도 안들어오게 됩니다.

만약 참조할 값이 null인지 체크하고 참조할값이 있다면 참조값을 쓰고 아니라면 다른 default값을 넣어주고 싶을때

보통 삼항 연산자를 많이 쓰지요. potion ? 'drink' : 'do nothing' 하지만 널 병합 연산자로 더 간편하게 쓸 수도 있습니다. 

 

let skeletonSoldier = 'skull magicion' ?? 'born'
let skeletonSoldierNull = null ?? 'born'

console.log('skeletonSoldier : ', skeletonSoldier); // skeletonSoldier :  skull magicion
console.log('skeletonSoldierNull : ', skeletonSoldierNull); // skeletonSoldierNull :  born

 

보시다시피 변수의 널 병합 연산자 앞에 null이 있다면 그것을 쓰고 아니라면 뒤에 값을 쓰는것을 볼 수 있습니다. 

 

실무에서 보통 많이들 axios로 데이터를 요청해서 가져오고 가져온 데이터를 state에 셋팅합니다.

하지만 우리의 데이터는 언제나 완벽하다고 보장이 안됩니다. 데이터가 null값으로 들어올 수 있거든요.

아래처럼 코딩을 하였을시 res.data.revivedSoldier에 만약에 'skull dragon'같은 값이 항상 있으면

프로그램이 잘 돌아가겠지만 만약 없다면 null값을 참조하였다고 에러가 뜹니다.

 

반응형

axios.get('http://getsomething.com/skeleton').then((res)=>{
  setState(prevState => ({...prevState, revivedSoldier: res.data.revivedSoldier}))
})

 

이럴때 에러를 방지하고 기본값으로 넣을 수 있는 것이 널 병합 연산자(Nullish coalescing operator) 입니다.
가져올 값 오른쪽에 ?? 를 쓰고 만약 가져올 값이 null 혹은 undefined라면 'there is no solider' 같은 원하는 값을 넣어 줄 수 있습니다.

axios.get('http://getsomething.com/skeleton').then((res)=>{
  setState(prevState => ({...prevState, revivedSoldier: res.data.revivedSoldier ?? 'there is no soldier'}))
})

가져올 데이터의 null값 참조 방지하는 방법은 많습니다. 하지만 이왕이면 최대한 가독성 좋고 간결하게 쓰는게 좋겠죠? 

이번 글을 읽고 한번 널 병합 연산자를 참고해보는건 어떨까요?