javascript의 || 와 ??의 차이점

개요

|| ??의 차이점이 항상 헷갈려서 차이점을 기준으로 정리해두자

 

|| 연산자 (Logical OR)

• 기능: 두 피연산자 중 하나라도 "truthy" 값일 경우 해당 값을 반환한다
• 동작 방식: 첫 번째 피연산자가 truthy (참으로 평가되는 값)이면, 첫 번째 값을 반환, 그렇지 않으면 두 번째 값을 반환한다
• 주의점: javascript에서 0, '' (빈 문자열), NaN, false, null, undefined 등은 모두 falsy 값으로 간주되므로, 이러한 값들 중 하나가 첫 번째 피연산자로 사용될 경우, || 연산자는 두 번째 피연산자를 반환한다.

?? 연산자 (Nullish Coalescing)

• 기능: 두 피연산자 중 첫 번째 값이 null 또는 undefined일 경우에만 두 번째 값을 반환합니다.
• 동작 방식: 첫 번째 피연산자가 null 또는 undefined가 아니면 첫 번째 값을 반환하고, 그렇지 않으면 두 번째 값을 반환합니다.
• 주의점: ||와 달리 0, NaN, '' (빈 문자열) 등은 falsy 값이지만, null이나 undefined가 아니기 때문에, 이러한 값들이 첫 번째 피연산자로 사용될 경우 ?? 연산자는 그 값을 그대로 반환합니다.

예시

let a;
console.log(a || 'default'); // "default" 반환 (a가 undefined이므로)
console.log(a ?? 'default'); // "default" 반환 (a가 undefined이므로)

a = 0;
console.log(a || 'default'); // "default" 반환 (a가 0이므로 falsy)
console.log(a ?? 'default'); // 0 반환 (a가 null 또는 undefined가 아니므로)

 

결론적으로 ||는 어떤 값이 falsy일 때 대체 값을 제공하는 데에 쓰이고, ??는 값이 명확하게 없는 (null이나 undefined) 경우에 대체 값을 제공하는 데에 사용하면 될듯하다. 즉 ??는 0과 ''이 프로그래밍상 의미있는 데이터이며 falsy한 값과 구별해서 처리해야 한다면 ??을 사용하는게 맞는듯? 하다.