`??` 연산자와 `||` 연산자는 둘 다 JavaScript 또는 TypeScript에서 사용되는 논리 연산자입니다. 하지만 두 연산자는 약간 다른 동작을 수행합니다.
`??` 연산자 (Nullish Coalescing Operator)
`??` 연산자는 null 또는 undefined인 경우에만 대체 값을 반환하는 연산자입니다. 왼쪽 피연산자가 null 또는 undefined인 경우, 오른쪽 피연산자가 반환됩니다. 그렇지 않은 경우에는 왼쪽 피연산자가 반환됩니다. `??` 연산자는 null 또는 undefined를 엄격하게 체크하므로, falsy 한 값인 0, 빈 문자열 등은 null 또는 undefined가 아니기 때문에 왼쪽 피연산자가 반환됩니다.
예시:
const value1 = null ?? 'Default Value'; // 'Default Value'
const value2 = undefined ?? 'Default Value'; // 'Default Value'
const value3 = 0 ?? 'Default Value'; // 0
const value4 = '' ?? 'Default Value'; // ''
`||` 연산자 (Logical OR Operator)
`||` 연산자는 왼쪽 피연산자가 falsy한 값인 경우에만 대체 값을 반환하는 연산자입니다. falsy 한 값이란 false, 0, 빈 문자열, null, undefined 등을 의미합니다. 왼쪽 피연산자가 falsy 한 값인 경우, 오른쪽 피연산자가 반환됩니다. 그렇지 않은 경우에는 왼쪽 피연산자가 반환됩니다.
예시:
const value1 = null || 'Default Value'; // 'Default Value'
const value2 = undefined || 'Default Value'; // 'Default Value'
const value3 = 0 || 'Default Value'; // 'Default Value'
const value4 = '' || 'Default Value'; // 'Default Value'
따라서, `??` 연산자는 null 또는 undefined인 경우에만 대체 값을 반환하고, `||` 연산자는 falsy한 값인 경우에만 대체 값을 반환합니다.