이 새로운 JavaScript 연산자는 절대적인 게임 체인저입니다.

JavaScript는 언어의 성능과 표현력을 향상시키기 위해 끊임없이 새로운 기능과 구문을 도입하면서 계속 발전하고 있습니다. 가장 흥미로운 개선 사항 중 하나는 널 병합 연산자(??)입니다. 이 연산자는 null 및 undefined 값을 사용하는 간결하고 직관적인 방법을 제공하는 획기적인 연산자입니다. 이 기사에서는 Null 병합 연산자를 심층적으로 살펴보고 장점을 분석하며 TypeScript에서 이를 효과적으로 사용하는 방법을 설명합니다.

널 값 병합 연산자 소개

널 병합 연산자(??)는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하는 논리 연산자입니다. 이는 기본값을 제공하고 논리 OR(||) 연산자와 관련된 일반적인 함정을 피하는 데 특히 유용합니다.

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

Null 병합 연산자가 도입되기 전에 개발자는 종종 논리 OR(||) 연산자를 사용하여 기본값을 제공했습니다. 그러나 이 접근 방식에는 심각한 단점이 있습니다. 즉, 허수 값(예: 0, '' 및 false)을 null 또는 undefined과 동일시합니다.

<code class="language-javascript">let value = 0;
let defaultValue = value || 10;
console.log(defaultValue); // 输出：10</code>

위 예시에서 value는 0으로, 허수값입니다. 따라서 defaultValue에는 0이 유효한 숫자이더라도 값 10이 할당됩니다. 이 동작으로 인해 코드에 예상치 못한 결과와 오류가 발생할 수 있습니다.

널 병합 연산자(??)의 해법

null 병합 연산자(??)는 왼쪽 피연산자가 null 또는 undefined인 경우에만 오른쪽 피연산자를 반환하여 이 문제를 해결합니다. 따라서 기본값을 제공하는 데 있어 보다 안정적인 옵션이 됩니다.

<code class="language-typescript">let value: number | null | undefined = 0;
let defaultValue = value ?? 10;
console.log(defaultValue); // 输出：0</code>

이 예에서 value은 0이며 null이 아닙니다. 따라서 defaultValue에는 예상 값을 유지하면서 0 값이 할당됩니다.

널 값 병합 연산자의 장점

1. 의도 지우기: null 병합 연산자는 원래 값이 null 또는 undefined인 경우에만 기본값을 제공하려는 의도를 명확하게 전달합니다.
2. 오류 방지: Null 병합 연산자는 허수 값과 null 값을 구별하여 일반적인 오류와 예상치 못한 동작을 방지하는 데 도움이 됩니다.
3. 간결함: Null 병합 연산자는 간결하고 읽기 쉬운 기본값 처리 방법을 제공하여 긴 조건문의 필요성을 줄여줍니다.

TypeScript에서 null 병합 연산자 사용

TypeScript는 Null 병합 연산자를 완벽하게 지원하므로 TypeScript 프로젝트에 쉽게 통합할 수 있습니다. 몇 가지 예를 살펴보고 어떻게 효과적으로 사용할 수 있는지 살펴보겠습니다.

예: 기본값 제공

널 병합 연산자의 가장 일반적인 사용 사례 중 하나는 함수 매개변수에 기본값을 제공하는 것입니다.

<code class="language-typescript">function greet(name: string | null | undefined, greeting: string = 'Hello'): string {
  const defaultName = name ?? 'Guest';
  return `${greeting}, ${defaultName}!`;
}

console.log(greet(null)); // 输出：Hello, Guest!
console.log(greet(undefined)); // 输出：Hello, Guest!
console.log(greet('Alice')); // 输出：Hello, Alice!</code>

이 예에서 greet 함수는 name 인수가 null 또는 undefined일 때 기본 이름 'Guest'를 제공하기 위해 null 병합 연산자를 사용합니다.

예: 선택적 속성 처리

Null 병합 연산자를 사용하여 객체의 선택적 속성을 처리할 수도 있습니다.

<code class="language-javascript">let value = 0;
let defaultValue = value || 10;
console.log(defaultValue); // 输出：10</code>

이 예에서 User 인터페이스에는 선택적 name 및 email 속성이 있습니다. Null 병합 연산자는 이러한 속성이 null 또는 undefined인 경우 기본값을 제공하는 데 사용됩니다.

예: 배열 사용

Null 병합 연산자를 사용하여 배열의 Null 값을 처리할 수도 있습니다.

<code class="language-typescript">let value: number | null | undefined = 0;
let defaultValue = value ?? 10;
console.log(defaultValue); // 输出：0</code>

이 예에서 values 배열에는 숫자, null 및 undefined이 포함됩니다. 널 병합 연산자는 널 값을 0으로 대체합니다.

고급 사용 사례

Null 병합 연산자는 단순한 기본값에만 사용되는 것이 아닙니다. 여러 대체 값을 연결하고 다른 연산자와 결합하는 등 보다 고급 시나리오에서도 사용할 수 있습니다.

예: 여러 대체 값 연결

여러 개의 null 병합 연산자를 연결하여 여러 대체 값을 제공할 수 있습니다.

<code class="language-typescript">function greet(name: string | null | undefined, greeting: string = 'Hello'): string {
  const defaultName = name ?? 'Guest';
  return `${greeting}, ${defaultName}!`;
}

console.log(greet(null)); // 输出：Hello, Guest!
console.log(greet(undefined)); // 输出：Hello, Guest!
console.log(greet('Alice')); // 输出：Hello, Alice!</code>

이 예에서 value 및 fallback1은 null이므로 null 병합 연산자는 값이 42인 fallback2으로 대체됩니다.

예: 다른 연산자와 결합

Null 병합 연산자는 삼항 연산자 등의 다른 연산자와 결합하여 더 복잡한 조건식을 만들 수 있습니다.

<code class="language-typescript">interface User {
  id: number;
  name?: string;
  email?: string;
}

const user: User = {
  id: 1,
  name: null,
};

const displayName = user.name ?? 'Anonymous';
const displayEmail = user.email ?? 'No email provided';

console.log(`User ID: ${user.id}`);
console.log(`Display Name: ${displayName}`);
console.log(`Display Email: ${displayEmail}`);</code>

이 예에서는 삼항 연산자를 사용하여 value가 null이 아닌지 확인합니다. null이 아닌 경우 null 병합 연산자를 사용하여 기본값 10을 제공합니다. value이 null이면 결과는 20입니다.

모범 사례

Null 병합 연산자를 사용할 때는 모범 사례를 따라 코드가 명확하고 유지 관리 가능하며 오류가 없는지 확인하세요.

1. 주의해서 사용하세요: 널 병합 연산자는 강력하지만 주의해서 사용해야 합니다. 이를 과도하게 사용하면 코드를 읽고 이해하기 어려울 수 있습니다.
2. 의도 문서화: Null 병합 연산자를 사용할 때 특히 복잡한 표현식에서 의도를 문서화하기 위해 주석을 추가하는 것이 좋습니다.
3. 논리 OR와의 혼합 방지 : Null 병합 연산자와 논리 OR 연산자를 혼합하면 혼란과 오류가 발생할 수 있습니다. 연산자를 사용하여 기본값을 제공하세요.
4. 철저한 테스트: 항상 코드를 철저하게 테스트하여 특히 특수한 경우에 Null 병합 연산자가 예상대로 작동하는지 확인하세요.

결론

Null 병합 연산자(??)는 JavaScript 및 TypeScript 개발자에게 획기적인 기능입니다. 논리 OR 연산자와 관련된 일반적인 함정을 피하면서 null 및 undefined 값을 처리하는 간결하고 직관적인 방법을 제공합니다. Null 병합 연산자를 사용하면 더 명확하고 유지 관리가 용이하며 오류가 발생할 가능성이 적은 코드를 작성할 수 있습니다.

기본값을 제공하든, 선택적 속성을 처리하든, 배열을 사용하든 null 병합 연산자를 사용하면 됩니다. 지금 TypeScript 프로젝트에 통합하고 그 이점을 직접 경험해 보세요.

즐거운 코딩하세요!

위 내용은 이 새로운 JavaScript 연산자는 절대적인 게임 체인저입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!