JavaScript 팁: Nullish 병합(??)

Nullish Coalescing( ?? ) 연산자는 JavaScript에서 무엇을 합니까?

JavaScript의 Nullish Coalescing 연산자는 서로 옆에 있는 두 개의 물음표 문자입니다( ?? ). 왼쪽 및 오른쪽 피연산자를 사용하여 왼쪽이 null 또는 undefined 인 경우 오른쪽 값을 반환합니다. 그렇지 않으면 왼쪽 값을 반환합니다.

let x;

x = 1 ?? 100;         // 1
x = null ?? 100;      // 100
x = undefined ?? 100; // 100

x = 'Peas' ?? 'Carrots';    // Peas
x = null ?? 'Carrots';      // Carrots
x = undefined ?? 'Carrots'; // Carrots

using Boolean on array.filter() 과 달리 여기에서 Javascript의 참 값 또는 거짓 값에 대해 고려해야 할 특별한 경우가 없습니다. Nullish 병합은 Null 및 undefined 에 대한 올바른 값만 반환하고 false 및 다음과 같은 다른 경우에는 반환하지 않습니다.

let y;

y = -1 ?? 2; // -1
y = false ?? 2; // false

y = true ?? 2; // true
y = NaN ?? 2; // NaN
y = Infinity ?? 2; // Infinity
y = -Infinity ?? 2; // -Infinity

y = new Date() ?? 'soon'; // [the date object created by new Date()]

React 구성 요소에서 Nullish 병합 사용

이는 React 구성 요소에서 매우 일반적인 패턴이 된 것을 단순화하는 데 사용할 수 있습니다. 값을 렌더링하기 전에 값이 있는지 확인하고 그렇지 않은 경우 대체를 제공합니다.

// use a ternary operator
const LetterIntro = ({name}) => {
  return (
    <div>
      Hi {name ? name : 'there'},
    </div>
  )
};

const BetterLetterIntro = ({name}) => {
  return (
    <div>
      Hi {name ?? 'there'}
    </div>
  )
}

둘 다 유효한 구문이지만 ?? 연산자가 수행하는 작업을 이해하는 한 후자가 더 읽기 쉽다고 주장할 수 있습니다.

프로젝트의 호환성을 확인하십시오.

Nullish 병합은 브라우저 및 JavaScript/Node/Deno에서 빠르게 사용할 수 있게 되었지만 모든 코드에 ??를 추가하기 전에 작업 중인 프로젝트가 호환되는 버전의 언어를 사용하고 있는지 확인해야 합니다. .

노드 및 Deno와의 호환성

Node와의 호환성을 보장하려면 프로젝트에서 Node 버전 14.0.0 이상을 사용해야 합니다.

Deno와의 호환성을 보장하려면 rproject가 Deno 버전 1.0.0 이상을 사용해야 합니다.

최신 브라우저와의 호환성

조정해야 할 또 다른 사항 - 이 기사를 작성하는 시점에서 Nullish Coalescing은 아직 모든 웹 브라우저에서 사용할 수 없습니다. Internet Explorer와 Android용 Opera는 나머지 두 가지 보류입니다. 그것이 당신을 위한 쇼스토퍼인지 여부는 당신에게 맡기겠습니다. 그리고 2021년 중반에 발표된 IEend-of-life에서 지원을 볼 수 있을지 모르겠습니다.

추가 읽기

이 정보가 유용하다고 생각되면 다른 JavaScript 팁을 확인하고 싶을 수도 있습니다.

Using array.filter(Boolean)

deconstructructing objects in JavaScript의 입문서

Understanding import syntax in Node

그리고 이 내용이 정말 마음에 드셨다면 제 newsletter 를 구독하여 간헐적으로 개발 및 디자인 지혜를 제 머리에서 받은 편지함으로 직접 받아보실 수 있으면 좋겠습니다.