분류 javascript

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

컨텐츠 정보

  • 조회 23 (작성일 )

본문

JavaScript는 매년 향상되고 있습니다. 2020 년에는 ES2020 표준이 있었습니다.


나를 위해 선택적 체인?., nullish 병합 연산자 ?? 그리고 string.matchAll은 실제로 ES2020의 가장 유용한 세 가지 기능입니다. 

이 블로그 게시물에서 예제와 함께 사용 방법을 설명하겠습니다.


https://dev.to/lgrammel/3-javascript-features-from-2020-that-will-make-your-life-easier-9ha


?로 선택적 연결. 


선택적 연결은 속성에 액세스하기 전에 값이 null인지 정의되지 않았는지 확인합니다. 그렇다면 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 병합 연산자는 왼쪽이 null인지 정의되지 않았는지 평가하고 이 경우 오른쪽을 반환합니다. 왼쪽이 null이 아니거나 정의되지 않은 경우 반환됩니다.


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


예를 들면 다음과 같습니다.


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 가지 JavaScript 기능을 사용하면 코딩을 더욱 즐겁게 만들 수 있습니다. 그리고 더 많은 JS 굉장함이 2021 년에 올 것입니다 🚀