정리 이유
회사에서 프로젝트를 진행하면서 병원에서 의뢰한 '심박수 화면 출력'에 관련된 일을 하면서 화면에 의도하지 않은 null값이 출력되는 것을 보게되었다.
코드의 예는 다음과 같다.
const heartRate = 심박수 계산식 || null심박수가 측정이 되지 않으면 null이 출력되라고 의도된 계산식인데, 0이라고 측정이 되면 0이 출력이 되지 않고 null이 출력이 되는 것이다.
폴리필 설정이 되지않아 따로 예외처리를 했지만 'nullish 병합 연산자를 사용했으면 더 쉽고 코드가 가독성이 높았겠다.'라는 생각을 하며 nullish 병합 연산자를 정리해 보려고 한다.
nullish 병합연산자는 ES6에서 등장한 문법이다.
nullish 병합연산자의 동작
nullish 병합연산자의 동작은 다음과 같다.
a가null이나undefined가 아니면a- 그 외는
b
or 연산자와의 차이
위의 동작을 보면 생각나는 연산자가 있을 것이다.
바로 or 연산자 || 이다.
nullish 병합연산자는 or연산자와 비슷하지만 결과는 확연한 차이가 나타나는 경우가 있다.
다음은 두 연산자의 차이점이다.
||는 첫 번째 truthy 값을 반환하지만,??는 첫 번째 정의된 값을 반환한다.
이 차이점은 0을 null과 undefined와 구분 지어 다뤄야 할때 중요한 역할을 한다.
or 연산자와 nullish 병합 연산자의 차이 예제
다음 예제로 둘의 차이를 확인해 보자.
const number = 0;
const a = number || 10;
console.log(a); // 10
const b = number ?? 10;
console.log(b); // 0결과 값이 다른 이유를 위의 "or 연산자와의 차이" 파트의 글을 다시 읽으면서 다시 살펴보자
||는 첫 번째 truthy 값을 반환하지만,??는 첫 번째 정의된 값을 반환한다.
-
a의 값이 10이 나온이유
JavaScript에서 0은 falsy한 값이다.
||은 첫 번째 truthy한 값을 반환하므로, a에 10을 할당한 것이다. -
b의 값이 0이 나온 이유
??은 첫 번째 '정의된' 값을 찾는다.
정의되지 않은 값은 'null'이나 'undefined'이다.
0은 'null'이나 'undefined'가 아니므로 b에 0을 할당한다.
연산자 우선순위
이 파트는 참고자료의 JavaScript.info를 보면서 알게 되었다.
연산자 우선순위는 프로그래밍에서 수식 내에 여러 연산자가 함께 등장할때, 어느 연산자 부터 먼저 처리해야되는지 정해진 순서이자 규약이다.
우선순위가 빠른 연산자부터 실행된다.
??의 우선순위는 5로 꽤 낮은 편이라고 한다.
그래서 대부분의 연산자 보다 나중에 평가된다.
??를 사용할때 의도한대로 프로그래밍이 되게 하려면 괄호와 함께 사용하는 것이 좋다.
참고자료
