2024-08-17 09:57:57

자바스크립트에서 || 문법은 아마 많이들 사용하고 계실 것입니다. 왼쪽에 있는 값이 거짓 값일 때(0, '', false, null, undefined) 오른쪽 값으로 설정하고자 할 때 많이 사용하는 문법입니다.

 

const age = 35;
console.log(age || 40); // 35

const age1 = ''
console.log(age1 || 40); // 40

const age2 = 0;
console.log(age2 || 40); // 40

const age3 = null;
console.log(age3 || 40); // 40

const age4 = undefined;
console.log(age4 || 40); // 40

 

 

 

그런데 ''와 0을 의도한 경우라면 || 연산자 대신 null과 undefined인 경우에만 기본값을 선택해주는 ?? 연산자를 사용하면 됩니다. Nullish Coalescing 연산자라고 불리는 ??는 ES11(2020년)에 도입되었습니다. 

 

const age = 35;
console.log(age ?? 40); // 35

const age1 = ''
console.log(age1 ?? 40); // ''

const age2 = 0;
console.log(age2 ?? 40); // 0

const age3 = null;
console.log(age3 ?? 40); // 40

const age4 = undefined;
console.log(age4 ?? 40); // 40

 

 

 

정리하자면,

 

|| 연산자는 false 값일 때 기본값을, ??는 null 또는 undefined일 때 기본값을 반환합니다. 

 

참고자료

[1] https://kir93.tistory.com/entry/Javascript-ES11-%EB%AC%B8%EB%B2%95%EC%A0%95%EB%A6%AC