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

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

타입스크립트에서 nullish coalescing operator(널 병합 연산자)는 `??`로 표현되며, 주로 변수의 값이 `null` 또는 `<a href='https://sangseek.com/sangseeks/undefined/ko'>undefined</a>`일 때 대체 값을 제공하는 데 사용됩니다. 이 연산자는 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(value2); // 10    const value3 = value1 ?? 10; // value3는 0이 됩니다.  console.log(value3); // 0  ```    위의 예제에서 `value1`은 `0`이라는 falsy 값이지만, nullish coalescing operator는 이를 `null`이나 `undefined`와 구분하여 `0`을 그대로 반환합니다.           사용 시 주의사항    1.   타입 안전성  : 타입스크립트는 타입 안전성을 제공하므로, nullish coalescing operator를 사용할 때 변수의 타입을 명확히 정의하는 것이 중요합니다. 예를 들어, `string | null | undefined` 타입의 변수를 사용할 때, 이를 적절히 처리하여 런타임 오류를 방지해야 합니다.    2.   <a href='https://sangseek.com/sangseeks/중첩/ko'>중첩</a> 사용  : 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.   <a href='https://sangseek.com/sangseeks/타입 추론/ko'>타입 추론</a>  : 타입스크립트는 nullish coalescing operator를 사용할 때 타입을 추론합니다. 따라서, 대체 값의 타입이 원래 변수의 타입과 일치해야 합니다.           결론    nullish coalescing operator는 타입스크립트에서 매우 유용한 기능으로, `null`이나 `undefined`를 처리할 때 코드의 가독성을 높이고, 불필요한 <a href='https://sangseek.com/sangseeks/조건문/ko'>조건문</a>을 줄이는 데 큰 도움이 됩니다. 이를 통해 개발자는 보다 간결하고 명확한 코드를 작성할 수 있으며, 런타임 오류를 예방할 수 있습니다.