타입스크립트에서 nullish coalescing operator는 어떻게 사용하나요?

Q1: 타입스크립트에서 nullish coalescing operator가 무엇인가요?
A1: nullish coalescing operator(`??`)는 좌측 피연산자가 `null` 또는 `undefined`일 때 우측 피연산자를 반환하는 연산자입니다. 좌측 값이 `null`이나 `undefined`가 아니면 그 값을 그대로 반환합니다.

---

Q2: nullish coalescing operator를 사용하는 기본 문법은 어떻게 되나요?
A2:
```typescript
let result = value ?? defaultValue;
```
위 코드에서 `value`가 `null` 또는 `undefined`이면 `defaultValue`가 반환됩니다.

---

Q3: 예제 코드를 보여주세요.
A3:
```typescript
let name: string | null = null;
let displayName = name ?? "Guest";
console.log(displayName); // 출력: "Guest"
```

---

Q4: nullish coalescing operator와 OR 연산자(`||`)의 차이점은 무엇인가요?
A4: OR 연산자(`||`)는 좌측 값이 falsy (`false`, `0`, `''`, `null`, `undefined`, `NaN`)일 때 우측 값을 반환하지만, nullish coalescing operator는 오직 `null` 또는 `undefined`일 때만 우측 값을 반환합니다. 따라서 빈 문자열(`''`)이나 0 같은 falsy 값은 그대로 반환됩니다.

예:
```typescript
let value = 0;
console.log(value || 42); // 출력: 42
console.log(value ?? 42); // 출력: 0
```

---

Q5: nullish coalescing operator를 사용할 때 주의할 점이 있나요?
A5: nullish coalescing operator(`??`)는 `&&` 또는 `||` 같은 논리 연산자와 함께 사용할 때 괄호를 사용해야 합니다. 그렇지 않으면 문법 오류가 발생할 수 있습니다.

예:
```typescript
let foo = null;
let bar = "bar";

// 올바른 사용법
let result = (foo && bar) ?? "default";
// 잘못된 사용법 (문법 오류)
let result = foo && bar ?? "default";
```

---

Q6: nullish coalescing 연산자는 어느 버전부터 사용할 수 있나요?
A6: 타입스크립트 3.7부터 nullish coalescing operator를 지원합니다. 또한, 컴파일 설정에서 `target` 옵션을 적절히 설정해주어야 합니다(`ES2020` 이상 권장).

---

Q7: nullish coalescing operator를 사용하여 함수 매개변수 기본값 설정이 가능한가요?
A7: 네, 가능합니다.
```typescript
function greet(name?: string) {
const displayName = name ?? "Anonymous";
console.log(`Hello, ${displayName}!`);
}
greet(); // Hello, Anonymous!
greet("Alice"); // Hello, Alice!
```

---

Q8: nullish coalescing operator를 중첩해서 사용할 수 있나요?
A8: 네, 가능합니다.
```typescript
let a = null;
let b = undefined;
let c = "Hello";

let result = a ?? b ?? c ?? "Default";
console.log(result); // 출력: "Hello"
```

---

Q9: nullish coalescing operator가 boolean 컨텍스트에서 어떻게 동작하나요?
A9: nullish coalescing operator는 boolean 평가와 관계없이 `null` 또는 `undefined` 여부만 판단합니다.
즉, 값이 falsy라도 null이나 undefined가 아니면 그 값을 반환합니다.

---

Q10: 타입스크립트에서 nullish coalescing operator를 사용할 때 Lint 규칙에 문제가 생길 수 있나요?
A10: 일부 Lint 규칙(특히 eslint와 관련된)에서 nullish coalescing operator 사용을 제한할 수 있습니다. 이런 경우 설정에서 관련 규칙을 조정하거나, 최신 플러그인을 사용하는 것이 좋습니다.

타입스크립트에서 nullish coalescing operator(널 병합 연산자)는 `??`로 표현되며, 주로 변수의 값이 `null` 또는 `undefined`일 때 대체 값을 제공하는 데 사용됩니다.

이 연산자는 ES2020(ECMAScript 2020)에서 도입되었으며, 타입스크립트

3.7 버전부터 지원됩니다.

기본 사용법 nullish coalescing operator는 다음과 같은 형태로 사용됩니다: ```typescript const value = someVariable ?? defaultValue; ``` 위의 코드에서 `someVariable`이 `null` 또는 `undefined`일 경우, `value`는 `defaultValue`로 설정됩니다.

반면, `someVariable`이 다른 falsy 값(예: `0`, `''`, `false` 등)일 경우, 그 값이 그대로 사용됩니다.

예제 다음은 nullish coalescing operator의 사용 예제입니다: ```typescript let userInput: string | null | undefined; // 사용자 입력을 받을 수 있는 상황 userInput = null; // userInput이 null이므로 default 값인 "default value"가 사용됩니다.

const finalValue = userInput ?? "default value"; console.log(finalValue); // "default value" userInput = "Hello, World!"; // userInput이 유효한 문자열이므로 그 값이 사용됩니다.

const anotherValue = userInput ?? "default value"; console.log(anotherValue); // "Hello, World!" ``` nullish coalescing operator와 논리 OR 연산자 nullish coalescing operator는 논리 OR 연산자(`||`)와 비슷한 역할을 하지만, 두 연산자는 서로 다른 방식으로 작동합니다.

논리 OR 연산자는 모든 falsy 값(예: `0`, `''`, `false`, `null`, `undefined`)을 고려하여 대체 값을 제공하는 반면, nullish coalescing operator는 오직 `null`과 `undefined`만을 체크합니다.

```typescript const value1 = 0; const value2 = value1 || 10; // value2는 10이 됩니다.

console.log(value

2); // 10 const value3 = value1 ?? 10; // value3는 0이 됩니다.

console.log(value

3); // 0 ``` 위의 예제에서 `value1`은 `0`이라는 falsy 값이지만, nullish coalescing operator는 이를 `null`이나 `undefined`와 구분하여 `0`을 그대로 반환합니다.

사용 시 주의사항 1. 타입 안전성 : 타입스크립트는 타입 안전성을 제공하므로, nullish coalescing operator를 사용할 때 변수의 타입을 명확히 정의하는 것이 중요합니다.

예를 들어, `string | null | undefined` 타입의 변수를 사용할 때, 이를 적절히 처리하여 런타임 오류를 방지해야 합니다.



2. 중첩 사용 : nullish coalescing operator는 중첩해서 사용할 수 있습니다.

여러 개의 변수를 체크하고 싶을 때 유용합니다.

```typescript const a = null; const b = undefined; const c = "Some value"; const result = a ?? b ?? c ?? "Default value"; console.log(result); // "Some value" ```

3. 타입 추론 : 타입스크립트는 nullish coalescing operator를 사용할 때 타입을 추론합니다.

따라서, 대체 값의 타입이 원래 변수의 타입과 일치해야 합니다.

결론 nullish coalescing operator는 타입스크립트에서 매우 유용한 기능으로, `null`이나 `undefined`를 처리할 때 코드의 가독성을 높이고, 불필요한 조건문을 줄이는 데 큰 도움이 됩니다.

이를 통해 개발자는 보다 간결하고 명확한 코드를 작성할 수 있으며, 런타임 오류를 예방할 수 있습니다.