nullish 병합연산자(“??”)
Updated:
nullish 병합연산자 (“??”)
최근 스펙에 추가된 문법으로 예전 브라우저에서는 허용되지 않음(폴리필 필요!)
nullish 병합연산자는 ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 “확정된” 변수를 찾을 수 있습니다.
value ?? com에 대한 해당 결과는 아래와 같습니다.
- value가 “null”도 아니고 “undefined”도 아니면 value이고 그 조건에 해당한다면 com에 대한 값이 나올 것이다.
nullish 병합 연산자를 사용하지 않고 해당 코드를 작성하려면?
const result = (a ≠ null && a ≠ undefined) ? a : b- 해당 코드를 작성하니 병합 연산자를 사용하는 것이 코드도 간결해지는 것을 알 수 있습니다.
‘??’과’||’의 차이점
nullish 병합 연산자는 OR 연산자과 거의 비슷해 보입니다. 하지만 살펴보면 둘의 차이점을 알 수 있습니다.
||는 첫번째truthy값을 반환합니다.??는 정의된 값(undefined와 null)이 아닌 값을 반환합니다.1번과2번의 차이는 숫자0에서 차이점이 직결됩니다.
let value = 0;
console.log(value || 100); // '||'는 truthy가 아니기에 100이 출력
console.log(value ?? 100); // '??'은 undefinded와 null이 아니니 0 출력
연산자 우선순위
?? 연산자의 우선순위는 낮은 편입니다. ?? 는 = 와 ? 보다는 우선순위가 높지만 그외 다른 연산자 보다 우선순위가 낮기 때문에 나중에 평가됩니다.
그래서 복잡한 연산을 하는 경우 “괄호()”를 추가하는 것이 좋습니다!
let value = null;
let com = null;
// 연산자 우선순위가 낮기 때문에 ()를 추가!
let result = (value ?? 100) * (com ?? 50); // 5000
nullish의 제약사항
“안전성 이슈 때문에 ?? 는 && 나 || 를 “함께 사용하지 못합니다.”
아래 코드를 봅시다.
let value = 1 && 2 ?? 3 // 해당사항은 문법에러 발생!
이러한 제약사항은 || 대신에 ?? 를 사용하면서 만드는 실수를 “방지하고자 명세에 추가된 사항” 입니다. 에러에 대한 제약사항을 피하고 싶다면 **괄호()** 를 사용합시다!
// 괄호를 사용함으로 제약사항을 피해가기 때문에 2가 출력된다.
let value = (1 && 2) ?? 3;
요약
- 병합 연산자를 사용하면 피연산자 중 “값이 할당된” 변수를 빠르게 찾을 수 있습니다.
??는 변수에 기본값을 할당하는 용도로 사용이 가능하다.??의 우선순위는?과=는 높지만 그 외의 다른 연산자 보다는 우선순위가 낮습니다.??을 괄호없이||과&&와는 사용하면 문법에러가 발생합니다.
// value의 값이 null로 할당되어 result변수의 값은 '값'이 출력된다.
const value = null;
const result = value ?? '값';
