당신의 삶을 더 쉽게 만들어줄 2020년의 3가지 JavaScript 기능

JavaScript는 매년 향상되고 있습니다. 2020년에는 ES2020 standard .

저에게 옵셔널 체이닝?. , 무효 병합 연산자?? 및 string.matchAll는 실제로 ES2020의 세 가지 가장 유용한 기능입니다. 이 블로그 게시물의 예제와 함께 사용하는 방법을 설명하겠습니다.

?를 사용한 선택적 연결

Optional chaining 속성에 액세스하기 전에 값이 null 또는 undefined인지 확인합니다. 그렇다면 undefined 를 반환합니다.

예를 들어 .? 표현식을 대체하여 x == null ? undefined : x.b로 더 간결한 코드를 작성할 수 있습니다. 또한 x && x.b와 같은 다른 패턴을 대체하고 오류 발생 가능성을 낮출 수 있습니다. 이것은 체인이 더 길 때 특히 유용합니다.

예를 살펴보겠습니다.

const test = (example) => {
  console.log(example?.value)
};

test({value: ".?"});       // .?
test(null);                // undefined (optional chaining)
test(undefined);           // undefined (optional chaining)
test(true);                // undefined (true.value is undefined)
test(1);                   // undefined (1.value is undefined)

Nullish 병합 연산자 ??

nullish coalescing operator은 왼쪽이 null인지 undefined인지 평가하고 이 경우 오른쪽을 반환합니다. null 또는 undefined 가 아니면 왼쪽이 반환됩니다.

선택적 연결과 마찬가지로 nullish 병합 연산자는 오류가 발생하기 쉬운 코드를 작성하는 데 도움이 됩니다. a = x || something 기본값 패턴을 대체할 수 있습니다. 이 패턴은 x 가 거짓이고 null 또는 undefined 가 아닌 경우 의도하지 않은 결과를 초래할 수 있습니다.

다음은 예입니다.

const test = (example) => {
  console.log(example ?? 'default')
};

test("??");                // ??
test(null);                // default (nullish coalescing)
test(undefined);           // default (nullish coalescing)
test(false);               // false - would be "default" with `||`
test(0);                   // 0 - would be "default" with `||`

string.matchAll을 사용하여 캡처 그룹과 정규 표현식 일치

string.match 이미 전역 플래그가 있는 정규식에서 일치하는 모든 값을 반환합니다. 그러나 일치하는 값과 해당 캡처 그룹의 위치를 ​​파악하는 것이 중요할 수 있습니다. string.matchAll는 해당 사용 사례에 가장 적합한 솔루션입니다.

string.matchAll 전역 정규식의 모든 일치 항목에 대해 반복자를 반환합니다. 각 일치 항목에는 일치하는 값, 해당 위치 및 일치하는 캡처가 포함됩니다.

명명된 캡처 그룹과 함께 사용하면 특히 유용합니다.

const text = "Let's match one:1 and let's also match two:2.";
const regexp = /match\s(?<word>\w+):(?<digit>\d)/g;

for (const match of text.matchAll(regexp)) {
    console.log(match);
}

위의 예제 코드에는 다음과 같은 출력이 있습니다.

[
  'match one:1',
  'one',
  '1',
  index: 6,
  input: "Let's match one:1 and let's also match two:2.",
  groups: { word: 'one', digit: '1' }
]
[
  'match two:2',
  'two',
  '2',
  index: 33,
  input: "Let's match one:1 and let's also match two:2.",
  groups: { word: 'two', digit: '2' }
]

2021년이 코앞입니다. 위의 3가지 자바스크립트 기능으로 오늘의 코딩을 더욱 즐겁게 만들 수 있습니다. 그리고 2021년에는 더 많은 JS의 놀라운 기능이 제공됩니다 🚀