[ Javascript ] ‘??’ 와 ‘||’ 의 차이

[ ‘??’ 와 ‘||’ 의 차이 ]

?? : nullish 병합 연산자 

a ?? b
// a가 null도 아니고 undefined도 아니면 a
// 그 외의 경우는 b

?? 와 || 의 차이

?? 는 OR 연산자인 || 과 유사해보인다.

|| : 첫 번째 truthy 값을 반환

?? : 첫 번째 정의된 ( defined ) 값을 반환한다.

Truthy / Falsy 한 값

Falsy 한 값

• undefined
• null
• 0
• ‘’
• NaN

Truthy 한 값

• Falsy 한 값 외의 나머지

let height = 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0

height 가 0으로 정의되어 있다.

|| 는 0은 Falsy 한 값이므로 Truthy한 값이 아니다. 그러므로 100을 출력

?? 는 height 는 0으로 정의되어 있기 때문에 0을 출력

⇒ 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합합니다.

연산자 우선순위

?? 의 연산자 우선순위는 5로 꽤 낮습니다.

따라서 ??는 =와 ? 보다는 먼저, 대부분의 연산자보다는 나중에 평가됩니다.

그렇기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋습니다.

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);
let area_wrong = height ?? 100 * width ?? 50

console.log(area); // 5000
console.log(area_wrong) // 0
// 100 * width 값이 들어가기 때문에 100*null = 0이므로 0이 출력된다.

안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못합니다.

 

참고 : https://ko.javascript.info/nullish-coalescing-operator