2022년 최신 자바스크립트 기능

JavaScript는 개발자가 코드를 점점 더 잘 작성하는 데 도움이 되는 많은 새롭고 흥미로운 기능으로 빠르게 변화하고 있습니다. 이러한 기능은 한동안 출시되었습니다. 확인해 봅시다!

1. 비공개 필드

이전에는 모든 클래스 필드를 생성자에서 정의해야 했습니다. 그리고 개인 필드가 없습니다. 모든 필드는 외부에서 액세스할 수 있습니다. 물론 일부 변수에 액세스할 수 없도록 범위를 지정하는 트릭이 있습니다. 그러나 그들에 대해 이야기하지 말자.

class Counter {
  constructor() {
    this.name = 'Counter';
    this.count = 0;
  }

  inc() {
    this.count++;
  }
}

이제 간단히 다음과 같이 작성할 수 있습니다.

class Counter {
  name = 'Counter';
  #count = 0;  // private field!

  inc() {
    this.#count++;
  }
}

2. 키워드로 비공개 필드에 액세스 확인

개인 필드에는 몇 가지 문제가 있습니다. 프라이빗 필드가 없는 개체에서 프라이빗 필드에 액세스하면 오류가 발생합니다. 그러나 객체에 객체가 있는지 확인하는 방법은 무엇입니까? 사용 try/catch !

이제 더 나은 방법이 있습니다: in 키워드.

class Counter {
  name = 'Counter';
  #count = 0;

  static isCounter(obj) {
    return #count in obj;
  }
}

const counter = new Counter();
Counter.isCounter(counter);   // true

3. 배열 및 문자열에 대한 at() 메서드

i 를 작성하여 A[i] 위치에 있는 배열 항목에 액세스할 수 있습니다. 그러나 i가 음수이고 배열의 끝에서 요소를 가져오려면 어떻게 해야 합니까? 우리는 쓸 수 있습니다 A[A.length + i] . 그러나 그다지 편리하지 않습니다. 다른 방법은 use A.slice(i)[0] 입니다. 그러나 그다지 효율적이지 않습니다.

이에 대한 at() 방법이 있습니다.

const A = [2, 4, 6, 8, 10]
A.at(-1)    // 10

const S = "Hello World"
S.at(-1)    // 'd'

findLast()로 끝에서 배열의 항목 찾기

배열에서 항목을 찾는 방법은 무엇입니까? find() 방법을 사용하십시오. 그리고 끝에서 찾는 방법? reverse() 및 find()를 사용합니다. 또는 자신의 함수를 작성하십시오.

const A = [1, 20, 3, 40, 5];

function findBackward(A, predicate) {
  for (let i = A.length-1; i>=0; i--) {
    if (predicate(A[i])) {
      return A[i];
    }
  }
  return -1;
}

findBackward(A, x => x % 10 == 0);    // 40

// be careful with this function!
A.reverse().find(x => x % 10 == 0);   // 40

이제 findLast() 및 findLastIndex() 메서드를 사용할 수 있습니다.

const A = [1, 20, 3, 40, 5];

A.find(v => v%10 == 0)     // 20
A.findLast(v => v%10 == 0) // 40

A.findIndex(v => v%10 == 0)     // 1
A.findLastIndex(v => v%10 == 0) // 3
A.findLastIndex(v => v == 0)    // -1

hasOwn() 대신 hasOwnProperty()를 사용합시다.

개체가 직접 속성으로 속성을 가지고 있는지 확인하는 방법이 있습니다Object.prototype.hasOwnProperty(). 그러나 사용하기가 상당히 번거롭습니다.

let hasOwnProperty = Object.prototype.hasOwnProperty;

if (hasOwnProperty.call(object, 'foo')) {
  console.log('has property foo');
}

그러나 다음과 같이 작성하지 않는 이유는 무엇입니까?

object.hasOwnProperty('foo')

JavaScript는 동적 언어라는 점을 명심하십시오. 모든 개체에 속성을 추가할 수 있습니다. 따라서 hasOwnProperty()는 같은 이름을 가진 개체의 속성에 의해 가려질 수 있습니다. 이를 방지하기 위해 hasOwn() 방법을 사용할 수 있습니다.

if (Object.hasOwn(object, 'foo')) {
  console.log('has property foo');
}

cause는 오류

의 새로운 속성입니다.



다음과 같은 오류 처리 코드를 보는 것은 매우 일반적입니다.

await fetch('https://example.com/data.csv')
  .catch((err) => {
     throw new Error('failed to get: ' + err.message);
  })

원래 오류를 새 오류로 래핑하는 것입니다. 그러나 원래 오류는 손실됩니다. 이제 원인 속성을 사용하여 원래 오류를 저장하고 나중에 검색할 수 있습니다.

await fetch('https://example.com/data.csv')
  .catch((err) => {
     throw new Error('failed to get', { cause: err })
  })
  .catch((err) => {
     console.log('cause', err.cause)
  })

#! 이제 Hashbang이 지원됨

이제 Hashbang이 지원됩니다. 터미널에서 직접 NodeJS 스크립트를 실행할 수 있습니다.

#!/usr/bin/env node

'use strict';
console.log(1);

#!/usr/bin/env node

export {};
console.log(1);

저는 올리버 응우옌입니다. 프로그래밍, JavaScript 및 Go에 대해 공유합니다. GitHub 탐색을 위한 브라우저 확장 프로그램OneSidebar을 만들었습니다. 더 많은 콘텐츠를 보려면 저를 팔로우하세요.