자바스크립트에서 값이 falsy하거나 nullish한 경우에 다른 값을 반환하도록 하는 두 가지 연산자가 있다:

1. || (OR 연산자)
2. ?? (Null 병합 연산자)

지금까지 두 연산자를 같은 것으로 인식하고 써왔는데, 정말 자주 쓰이는 연산자인만큼 서로 어떻게 다른지 정확하게 알고 가야겠다고 생각이 들어 차이점에 대해 알아보았다.

1. || (OR 연산자)

||는 논리 OR 연산자이다. 왼쪽 값이 falsy하면 오른쪽 값을 반환한다.

💡 falsy값이란?
자바스크립트에서 false, 0, ''(빈 문자열), null, undefined, NaN은 모두 falsy로 평가된다.

예시:

const a = 0;
const b = a || 10; // a가 falsy하므로 b는 10이 된다.

console.log(b); // 10

2. ?? (Null 병합 연산자)

??는 null 병합 연산자이다. 왼쪽 값이 null 또는 undefined일 때만 오른쪽 값을 반환한다.
null과 undefined만을 처리하기 때문에, falsy 값들 (예: 0, '', false)은 무시된다.

예시:

const a = 0;
const b = a ?? 10; // a가 null 또는 undefined가 아니므로 b는 0이 된다.

console.log(b); // 0

이 코드에서는 a가 0이지만, 0은 null이나 undefined가 아니기 때문에 ??는 왼쪽 값을 그대로 반환한다.

3. || 와 ?? 의 차이점 비교

• ||는 모든 falsy 값을 처리함. 즉, false, 0, '', NaN, null, undefined 모두를 오른쪽 값으로 대체
• ??는 오직 null 또는 undefined인 경우에만 오른쪽 값을 반환

비교 예시:

const value1 = 0;

const result1 = value1 || 10; // OR 연산자
const result2 = value1 ?? 10; // Null 병합 연산자

console.log(result1); // 10 (0은 falsy 값이므로 10 반환)
console.log(result2); // 0 (0은 null이나 undefined가 아니므로 그대로 0 반환)

4. 결론

• ||는 falsy한 값들을 모두 처리한다.
• ??는 null과 undefined만을 처리한다.
• 0, ''(빈 문자열)과 같은 값이 유효한 상황에서는 ??를 사용해야 한다.

간단 요약:

• 왼쪽 값이 falsy한 경우 → || 사용
• 왼쪽 값이 null 또는 undefined일 경우 → ?? 사용