[JS] 널 병합과 연산자 우선순위

이번에는 자칫하면 프로그램에 오류를 낼 수 있는 사소하지만 중요한 것에 대해서 말하고자 합니다.

​

널 병합과, 우선순위 연산자가 뭔 연관이지? 라고 생각하실 수 있습니다.

하지만 분기문에서 결과가 뒤바뀌는 결과를 낳을 수 있는 예시를 보여드리고자 합니다.

​

널 병합 연산자 (nullish coalescing operator)

• statement의 결과값이 null이나 undefined일 경우에, 뒤에 나온 값을 반환해주는 연산자입니다. ES2020에서 나왔습니다.
• falsy 값을 판단해서 오른쪽 피연산자를 반환하는 '||'와 구분해서 써야합니다.

const arr = [];

if( arr.length ?? 0 === 0 ) {
   console.log("참");
}else {
   console.log("거짓");
}

• 위의 결과는 어떻게 될까요?
  • 음.. arr.length는 0이니까 'null, undefined' 가 아니므로 0이군..
  • 거기에 0 === 0 이니까 true
  • 따라서 "참" 이 나오게 됩니다.

 

• 실제로 프로그램을 돌리다가 이유를 알 수 없는 결과가 나왔는데, 저기서 오류가 있을것이라고는 생각도 못했습니다. 코드가 많다보니까 다른곳에서 에러가 난 줄 알고 이상한곳에서 계속 원인을 찾고 있었습니다.

​

• Playground에서 온갖 실험을 하던 중, 뭔가 같아보이는데 어떤건 boolean, 어떤것은 숫자가 나오는것을 보고 이상함을 느꼈습니다.

• 참고로 JS는 숫자가 높을수록 우선순위가 높습니다. ' === ' 가 먼저 계산된 이후에 ' ?? ' 가 계산이 됩니다.

​

​

• 위의 연산자 우선순위를 보고나니 아래처럼 해석이 됩니다. 아.. line 6은 결국 널병합만 사용한것처럼 되겠구나..
• 5 line은 true여서 if를 통과하지만, 6 line은 0이므로 false여서 if를 통과하지 못합니다.

​

• 물론 if( !(medias.length ?? 0 ) return; 으로 할 수 있습니다. 하지만 가독성 측면에서 if(arr.length) 와는 달리 ?? 가 한눈에 알아보기 어렵게 만들기에, 좀 더 풀어서 코드를 작성하게 되었습니다.

​

혼자 공식문서 거꾸로 보고 남 탓하고 있었습니다

• 제가 거꾸로 보고 남탓 하고 있었습니다. 정신이 나갔었습니다..

​

아마 널 병합과 연산자 우선순위로 검색해서 오는 사람들은 많이 없겠지만, 이런 것이 있다는 것을 기억해두면 나중에 원인을 찾을 때 다양한 곳에서 찾을 수 있기에 작성했습니다^^

​

다들 파이팅!!

​

​

​

reference

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence