JavaScript ES2020 기능: Nullish Coalescing Operator(??) 및 Optional Chaining(?.)

두 가지 기능은 JavaScript ES2020의 새로운 기능입니다. 코드를 단순화하고 읽기 쉽게 만드는 데 사용됩니다.

나는 그들이 어떻게 작동하는지 보여주기 위해 몇 가지 간단한 예를 쓰기로 결정했습니다.

Nullish 병합 연산자(??)

null이 아니거나 정의되지 않은 경우 첫 번째 값을 반환하고, 그렇지 않으면 두 번째 값을 반환하는 연산자입니다.

간단한 예:

const defaultValue = 'hello';
const nullishValue = null || undefined;
const result = nullishValue ?? defaultValue;
console.log(result); // hello

이 연산자는 논리 연산자||(또는)와 비교할 수 있는데 차이점은 무엇입니까?

논리 연산자||는 거짓이 아니고(예: '', 0, NaN, null, undefined) null 또는 undefined가 아닌 경우 첫 번째 값을 반환합니다.

아래 예를 참조하세요.

const defaultValue = 'hello';
const nullishValue = null || undefined; // undefined
const result = nullishValue || defaultValue;
console.log(result); // hello

- - -

const count = 0;
const result2 = count || 1;
console.log(result2); // result is 1 and not 0

- - -

const text = '';
const result3 = text || 'default';
console.log(result3); // result is 'default' and not ''

이 동작은 0, '' 또는 NaN을 유효한 값으로 간주하는 경우 예기치 않은 결과를 초래할 수 있습니다.

이를 방지하기 위해 위에서 소개한 nullish 병합 연산자??를 사용할 수 있습니다.

선택적 연결(?.)

선택적 연결 연산자?는 개체의 속성 및 메서드에 액세스하는 데 사용됩니다. 연결 연산자.처럼 작동하지만 값이 null인 경우 오류를 반환하지 않습니다.

연산자는 다음과 같이 작동합니다.

const students = {
  student1: {
    name: 'John',
    age: 15,
  },
};
console.log(students.student1.name); // John

console.log(students.student2.name); // TypeError: Cannot read properties of undefined (reading 'name')

// using optional chaining the error is avoided
console.log(students.student2?.name); // undefined

객체에 접근할 때 JavaScript는 속성이 존재하는지 확인합니다(nullish 값이 아님). 그렇다면 값을 반환합니다. 그렇지 않으면 undefined를 반환합니다.

무효 병합을 통한 선택적 연결

선택적 연결 연산자?.는 널 병합 연산자??와 함께 사용할 수 있습니다. 이 연산자 조합은 매우 강력합니다.

예를 들어 보겠습니다.

const students = {
  student1: {
    name: 'John',
    age: 15,
  },
};

const student = students.student2?.name; // undefined

// using nullish coalescing operator `??` with optional chaining operator `?.`
const student = students.student2?.name ?? 'student not found'; // student not found

Optional Chaining 및 Nullish Coalescing MDN 페이지에서 더 많은 예제를 찾을 수 있습니다.

이 기사를 읽어 주셔서 감사합니다.
이 글이 마음에 드셨다면 투표와 댓글 부탁드립니다.
나를 따라와