null 병합 연산자 '??'와 '||' 의 차이

* 2021.05.20 스펙에 추가된 지 얼마되지 않아 폴리필이 필요함!

• ' || '는 첫번째 truthy 값을 리턴한다.
• a가 참이면 a 리턴, 아니면 b 리턴한다.

null || '1'		// '1'
undefined || '1'	// '1'
'1' || null		// '1'
0 || '1'		// '1'

 

• ' ?? '는 첫번재 정의된(defined) 값을 리턴한다.
• a가 null이나 undefined 이면 b리턴, 아니면 a 리턴

null ?? '1'		// '1'
undefined ?? '1'	// '1'
'1' ?? null		// '1'
0 ?? '1'		// 0
// 0은 falsy하기때문에 '1'이 리턴될 것 같지만, null도 undefined 도 아니기 때문에 0을 리턴한다.

 

'??' 는  truthy/falsy 한 값에 대해서가 아니라 딱 두 경우 null이나 undefined인지를 비교한다.

 

• 안정성 이슈때문에 ' ?? '는 ' || '이나 ' && '와 함께 쓸 경우 에러가 나게된다. 괄호를 이용하면 가능하다.
• ' ?? ' 의 연산자 우선순위는 대다수 연산자보다 낮고 ' ? '과 ' = '보다는 높다.

let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'
let x = (1 && 2) ?? 3; // 제대로 동작합니다.

 

 

비교할 첫번재 값이 0이 될 수 있는 변수인지를 확인하여 ' || '와 ' ?? '를 골라서 쓰면 될 것 같다. 😃