TypeScript에서 `??`와 `||`의 차이: 상세한 설명과 사용 예시

TypeScript는 JavaScript의 상위 집합으로서 더 명확하고 신뢰할 수 있으며 성능이 향상된 코드를 작성할 수 있도록 돕는 다양한 연산자를 제공합니다. 그중에서도 기본값을 제공하는 연산자인 ?? (널 병합 연산자)와 || (논리 OR 연산자)는 서로 비슷해 보이지만, 미묘하지만 중요한 차이점을 가지고 있습니다. 이러한 차이점을 이해하는 것은 올바르고 유지 보수가 용이한 코드를 작성하는 데 매우 중요합니다.이 글에서는 ??와 ||의 차이점을 설명하고, 각각의 사용 사례를 다루며, 구체적인 예시를 통해 이해를 돕겠습니다.

---

1. ??와 || 개요

?? (널 병합 연산자)??는 왼쪽 피연산자가 null 또는 undefined일 때만 기본값을 제공하는 연산자입니다. 즉, 만약 피연산자가 null이나 undefined가 아닌 다른 falsy 값(0, false, NaN, 빈 문자열 '' 등)이면, 해당 값은 유효한 값으로 간주되고, 오른쪽 피연산자는 무시됩니다.구문:

let result = value ?? defaultValue;

• value: 평가될 값.
• defaultValue: value가 null 또는 undefined일 때 사용될 기본값.
  || (논리 OR 연산자)||는 왼쪽 피연산자가 falsy 값일 경우에만 오른쪽 피연산자를 반환하는 연산자입니다. falsy 값에는 false, 0, NaN, '' (빈 문자열), null, 그리고 undefined가 포함됩니다. 따라서, 0이나 빈 문자열이 유효한 값이어야 할 때도 기본값으로 대체될 위험이 있습니다.구문:

let result = value || defaultValue;

• value: 평가될 값.
• defaultValue: value가 falsy일 때 사용될 기본값.

---

2. 주요 차이점

| 특징 | ?? (널 병합 연산자) | || (논리 OR 연산자) |
|--------------------|-----------------------------------------|-----------------------------------|
| 동작 기준 | null 또는 undefined | 모든 falsy 값 |
| 기본값 처리 | null 또는 undefined일 때만 기본값을 반환 | false, 0, 빈 문자열도 기본값으로 대체됨 |
| 주요 사용 사례 | null 또는 undefined를 처리할 때 사용 | falsy 값을 처리할 때 사용 |

---

3. 예시로 보는 차이점

예시 1: ??와 ||의 기본 동작

let value1 = 0;
let value2 = "";

let result1 = value1 || 100;  // 100
let result2 = value2 || "default";  // "default"

let result3 = value1 ?? 100;  // 0
let result4 = value2 ?? "default";  // ""

설명:

• value1과 value2는 각각 0과 빈 문자열이라는 falsy 값을 가지고 있습니다.
• || 연산자를 사용할 경우, 0과 빈 문자열은 falsy로 간주되어 기본값으로 대체됩니다.
• 반면, ?? 연산자는 null 또는 undefined가 아닌 이상 왼쪽 피연산자의 값을 그대로 반환하므로, 0과 빈 문자열이 반환됩니다.
  예시 2: null과 undefined 처리

let value3 = null;
let value4 = undefined;

let result5 = value3 || "fallback";  // "fallback"
let result6 = value4 || "fallback";  // "fallback"

let result7 = value3 ?? "fallback";  // "fallback"
let result8 = value4 ?? "fallback";  // "fallback"

설명:

• value3와 value4가 null과 undefined일 때, ||와 ?? 모두 기본값인 "fallback"을 반환합니다. 이 경우에는 두 연산자가 동일하게 동작합니다.

예시 3: falsy 값 사용이 중요한 경우

let userCount = 0;

let displayCount1 = userCount || 10;  // 10
let displayCount2 = userCount ?? 10;  // 0

설명:

• userCount는 0이지만, 이는 실제로 유효한 값일 수 있습니다. 그러나 ||는 0을 falsy로 간주해 기본값인 10으로 대체합니다.
• 반면, ??는 null 또는 undefined만을 처리하기 때문에 userCount의 실제 값인 0을 반환합니다. 이처럼 ??는 0과 같은 falsy 값을 유효한 값으로 처리할 때 유용합니다.

---

4. 적절한 사용 사례

??를 사용할 때??는 null 또는 undefined만 기본값으로 대체해야 할 때 사용됩니다. 다음과 같은 상황에서 유용합니다.

1. API 응답 처리: API에서 반환되는 값이 null이나 undefined일 때 기본값을 설정하는 경우.

let response = apiResponse.value ?? "기본값";

1. 사용자 입력 처리: 사용자가 입력한 값이 null 또는 undefined일 때만 기본값을 제공하는 경우.

let userInput = formInput ?? "기본 입력값";

||를 사용할 때||는 모든 falsy 값 을 기본값으로 처리해야 할 때 사용됩니다. 예를 들어, 값이 존재하지 않거나, 논리적으로 의미 없는 경우에도 기본값을 제공하고 싶을 때 적합합니다.

1. 설정 값: 사용자가 설정하지 않은 모든 falsy 값에 대해 기본값을 설정할 때.

let configValue = userConfig.option || "기본 설정값";

1. 기본 메시지: 빈 문자열이나 false일 때도 기본값을 제공하고자 할 때.

let message = userMessage || "기본 메시지";

---

5. 성능 및 코드 유지보수

||와 ?? 모두 매우 가볍고 성능에 큰 영향을 미치지 않지만, 가독성 과 의도를 명확히 하는 것 이 중요합니다. ||를 사용했을 때 0이나 빈 문자열처럼 유효한 값이 기본값으로 대체될 수 있다는 점에서, 경우에 따라 의도와 다른 동작을 할 수 있습니다. 반면, ??는 보다 엄격하게 null과 undefined만을 처리하므로 의도한 동작을 더 잘 보장합니다.

---

6. 결론

• || 연산자 는 모든 falsy 값을 처리하며, 값이 존재하지 않을 때 기본값을 설정하는 데 유용합니다.
• ?? 연산자 는 보다 세밀하게 null과 undefined만을 처리하며, 0, false, 빈 문자열 같은 값이 유효한 상황에서 안전하게 사용할 수 있습니다.
  이 두 연산자를 적절히 활용하면, 코드의 명확성 과 유지보수성 을 높일 수 있으며, 의도하지 않은 값 대체를 방지할 수 있습니다.