>  기사  >  웹 프론트엔드  >  선택적 연결 및 Nullish Coalescing

선택적 연결 및 Nullish Coalescing

王林
王林원래의
2024-08-21 06:13:02767검색

Optional Chaining and Nullish Coalescing

선택적 연결: 우아한 접근자

사용자를 나타내는 객체가 있고 해당 사용자의 주소에 액세스하려고 한다고 가정해 보겠습니다.

과거에는 다음과 같은 작업을 수행했을 수도 있습니다.

const user = {
 name: "Alice",
 address: { street: "123 Main St" }
};

const street = user.address && user.address.street;

console.log('Street: ', street); // Output: 123 Main St

그런데 사용자 개체에 주소 속성이 없거나 주소 개체에 거리 속성이 없으면 어떻게 되나요?

오류가 발생합니다!

선택적 체인을 입력하세요!

이 연산자(?.)를 사용하면 중첩된 속성에 안전하게 액세스할 수 있으며 체인의 일부가 누락된 경우 정의되지 않은 값을 반환합니다.

예:

const user = {
 name: "Bob"
};

const street = user.address?.street;
console.log('Street: ', street); // Output: undefined

코드가 얼마나 깔끔하고 간결해졌는지 확인해보세요

무효 합체

기본값 수호자.

이제 변수가 null이거나 정의되지 않은 경우 변수에 기본값을 할당한다고 가정해 보겠습니다. 일반적으로 OR 연산자(||)를 사용합니다. 그러나 변수에 0과 같은 "거짓" 값이 있거나 빈 문자열이 있는 경우 예기치 않은 동작이 발생할 수 있습니다.

유용한 이유:

  • 장황한 if 문이나 삼항 연산자를 대체하여 코드를 단순화합니다.
  • 허위 값(예: 0 또는 빈 문자열)을 "누락"으로 처리하는 논리 OR 연산자(||)와는 달리 특히 null 및 정의되지 않음에 중점을 둡니다.
let userSettings = null; // Imagine this comes from an API or user input

// Without nullish coalescing:
let theme = userSettings !== null && userSettings !== undefined ? userSettings.theme : 'light';

// With nullish coalescing:
let theme = userSettings?.theme ?? 'light'; // If userSettings.theme is null or undefined, 'light' is used

핵심 사항:

  • ??의 왼쪽 먼저 평가됩니다.
  • 왼쪽이 null이거나 정의되지 않은 경우 오른쪽이 반환됩니다.
  • 그렇지 않으면 왼쪽이 반환됩니다.

선택적 속성이나 잠재적으로 누락된 데이터를 처리할 때 특히 유용합니다.


선택적 연결 및 nullish 병합은 읽기 쉽고 강력하며 오류 방지 기능이 있는 코드를 작성하는 데 도움이 됩니다.

위 내용은 선택적 연결 및 Nullish Coalescing의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:Node JS 시작하기다음 기사:Node JS 시작하기