자바스크립트 ?? (nullish coalescing 연산자)와 || (논리 OR 연산자)

|| 연산자 (논리 OR 연산자)

// 예시 1
let value1 = 'Hello' || 'Default';
console.log(value1); // 출력: Hello

// 예시 2
let value2 = null || 'Default';
console.log(value2); // 출력: Default

// 예시 3
let value3 = undefined || 'Default';
console.log(value3); // 출력: Default

// 예시 4
let value4 = 0 || 'Default';
console.log(value4); // 출력: Default

?? 연산자 (nullish coalescing 연산자)

// 예시 1
let value1 = 'Hello' ?? 'Default';
console.log(value1); // 출력: Hello

// 예시 2
let value2 = null ?? 'Default';
console.log(value2); // 출력: Default

// 예시 3
let value3 = undefined ?? 'Default';
console.log(value3); // 출력: Default

// 예시 4
let value4 = 0 ?? 'Default';
console.log(value4); // 출력: 0

설명:

1. || 연산자:
   • value1: || 연산자는 왼쪽 피연산자가 truthy한 값이면 왼쪽 피연산자의 값이 반환됩니다. 여기서는 'Hello'가 truthy하므로 'Hello'가 반환됩니다.
   • value2: null은 falsy한 값이기 때문에 || 연산자는 오른쪽 피연산자인 'Default'를 반환합니다.
   • value3: 마찬가지로 undefined는 falsy한 값이므로 || 연산자는 'Default'를 반환합니다.
   • value4: 0은 falsy한 값이지만 || 연산자는 오른쪽 피연산자인 'Default'를 반환하지 않습니다. 따라서 0이 반환됩니다.
2. ?? 연산자:
   • value1: ?? 연산자는 왼쪽 피연산자가 null 또는 undefined일 때에만 오른쪽 피연산자의 값이 반환됩니다. 여기서는 'Hello'가 반환됩니다.
   • value2: 왼쪽 피연산자인 null이 null 또는 undefined이므로 ?? 연산자는 'Default'를 반환합니다.
   • value3: 마찬가지로 undefined는 null 또는 undefined이므로 ?? 연산자는 'Default'를 반환합니다.
   • value4: 0은 null 또는 undefined이 아니므로 ?? 연산자는 왼쪽 피연산자인 0을 반환합니다.

 결론 = > ?? 연산자는 주로 변수의 값이 null 또는 undefined일 때 기본값을 설정할 때 사용됩니다. 이를테면, API에서 받아온 데이터 중 일부 필드가 null이거나 undefined인 경우 기본값을 사용하고 싶을 때 유용합니다.

 

차이가뭐지?