|| 연산자는 두 개의 피연산자 중 하나라도 "truthy" 값일 때 해당 "truthy" 값을 반환합니다. "falsy" 값에는 false, 0, -0, 0n (BigInt에서 0), "" (빈 문자열), null, undefined, NaN이 포함됩니다. 만약 두 피연산자 모두 "falsy"라면, 마지막 피연산자를 반환합니다.
const result = a || 'default value';
위 코드에서, 만약 a가 "truthy" (즉 "falsy"가 아닌 값)라면 result는 a의 값이 됩니다. a가 "falsy" 값이라면 result는 'default value'가 됩니다.
?? (Nullish Coalescing)
?? 연산자는 첫 번째 피연산자가 null이나 undefined일 때 두 번째 피연산자를 반환합니다. "nullish" 값에는 오직 null과 undefined만 포함되고, 다른 "falsy" 값들은 이에 해당되지 않습니다.
const result = a ?? 'default value';
위 코드에서, a가 null이나 undefined가 아니라면 result는 a의 값이 됩니다. a가 null이나 undefined라면 result는 'default value'가 됩니다.
차이점
주된 차이점은 ??가 오직 null이나 undefined를 확인하는 반면, ||는 모든 "falsy" 값을 확인한다는 것입니다. 이로 인해 ||는 0, "" (빈 문자열), false 등과 같은 유효한 값들이 "falsy"로 취급되어 기본 값을 반환하도록 할 때 문제가 될 수 있습니다. 반면 ??는 명시적으로 null이나 undefined인 경우에만 기본 값을 반환합니다.
예를 들어:
const a = 0;
const b = '';
const result1 = a || 'default'; // result1은 'default'
const result2 = a ?? 'default'; // result2는 0
const result3 = b || 'default'; // result3은 'default'
const result4 = b ?? 'default'; // result4는 ''
result1과 result3는 a와 b가 "falsy" 값(0 과 빈 문자열)으로 평가되기 때문에 'default' 값을 할당받습니다. 그러나 result2와 result4는 null이나 undefined가 아닌 a와 b의 실제 값(여기서는 0과 빈 문자열)을 유지합니다.
||연산자는 두 개의 피연산자 중 하나라도 "truthy" 값일 때 해당 "truthy" 값을 반환합니다. "falsy" 값에는 false, 0, -0, 0n (BigInt에서 0), "" (빈 문자열), null, undefined, NaN이 포함됩니다. 만약 두 피연산자 모두 "falsy"라면, 마지막 피연산자를 반환합니다.위 코드에서, 만약 a가 "truthy" (즉 "falsy"가 아닌 값)라면 result는 a의 값이 됩니다. a가 "falsy" 값이라면 result는 'default value'가 됩니다.
?? 연산자는 첫 번째 피연산자가 null이나 undefined일 때 두 번째 피연산자를 반환합니다. "nullish" 값에는 오직 null과 undefined만 포함되고, 다른 "falsy" 값들은 이에 해당되지 않습니다.
위 코드에서, a가 null이나 undefined가 아니라면 result는 a의 값이 됩니다. a가 null이나 undefined라면 result는 'default value'가 됩니다.
주된 차이점은
??가 오직null이나undefined를 확인하는 반면,||는 모든 "falsy" 값을 확인한다는 것입니다. 이로 인해||는 0, "" (빈 문자열), false 등과 같은 유효한 값들이 "falsy"로 취급되어 기본 값을 반환하도록 할 때 문제가 될 수 있습니다. 반면??는 명시적으로null이나 undefined인 경우에만 기본 값을 반환합니다.예를 들어:
result1과 result3는 a와 b가 "falsy" 값(0 과 빈 문자열)으로 평가되기 때문에 'default' 값을 할당받습니다. 그러나 result2와 result4는 null이나 undefined가 아닌 a와 b의 실제 값(여기서는 0과 빈 문자열)을 유지합니다.