널 병합 연산자 ( Nullish coalescing operator )

널 병합 연산자 ( Nullish coalescing operator )

널 병합 연산자 ( Nullish Coalescing operator ) 는

자바스크립트에서 2020년 ES2020 이 나오고 추가된 편의기능 중 한가지로,

왼쪽 피연산자가 null 또는 undefined 일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.

let a = null ?? 'hello'; // a => 'hello' let b = '' ?? 'hello'; // b => '' let c = false ?? 'hello'; // c => false let d = 0 ?? 'hello'; // d => 0 let e = undefined ?? 'hello'; // e => 'hello'

javascript 로 개발을 하다보면, A 라는 값이 B 의 값이 있는지 없는지 등의 상태에 따라 할당하고 싶은 경우가 있습니다.

그 때 보통 아래와 같이 작성하게 됩니다. (저는 그랬습니다..ㅎㅎ)

먼저 여러분에게는 수십명의 사용자 정보가 있고, 각 정보에는 이름(name)과 나이(age), 직업(job)의 프로퍼티를 가진다고 가정합시다.

user1 = { name : "Tommy", age : 31, job : undefined, }

앗.. 그런데 user1 , 즉 Tommy 에게는 job 이 undefined 로 넘어왔습니다.

적어도 직업이 없다면 '취업준비생' 같은 값을 넣어줬으면 좋겠는데 말이죠..

그래서, 방금 한 생각대로, 직업이 없는 Tommy 에게 job 으로써, undefined 같은 '할당되지 않은' 이라는 직업보다는(뭔가 너무하다..)

'job-seeker' 를 지정해주기로 합니다.

그리고 모든 'undefined' 라는 job 을 가진 user object 마다 'job-seeker' 라는 희망을 할당해주어야 합니다.

그러면 보통 이렇게 전개될 것입니다.

if ( user1.job === undefined ) { user1.job = 'job-seeker'; }

됐습니다. 이제 수십명의 user 를 담고 있는 userList 라는 array 가 있다면 순회하면서 이 작업을 해주면 될 것 같습니다.

userList.forEach( user => { if ( user.job === undefined ) { user.job = 'job-seeker'; } }

간단한 예제이지만 벌써 if 구문을 위해 3줄이 추가됩니다. 이것을 줄여서 작성할 수 있습니다.

userList.forEach( user => { user.job = user.job ?? 'job-seeker'; }

user.job 이 null 이거나 undefined 인 경우, user.job 에 오른쪽 피연산자를 할당합니다.

위와 같은 상황인 경우, nullish coalescing operator 를 적극 활용할 수 있습니다.

주의해야하는 경우는, 만약 반복문 내부에서 사용할 것이라면, 내부적으로 이 값들이 null 또는 undefined 로 넘어오는 경우인지 확인을 해야합니다.

널 병합 연산자(??) 는 논리연산자OR(||) 와 다른 연산을 하기 때문입니다.

기본값을 설정해줄 때 굉장히 유용한 기능입니다.

도움이 되길 바랍니다. 잘못 작성된 부분은 언제든지 코멘트 부탁드립니다!

이 글의 내용은 mozilla 공식사이트를 참고하여 작성되었습니다.

from http://cheeeeze.tistory.com/5 by ccl(A) rewrite - 2021-12-19 18:02:31