초보자가 2022년에 JavaScript를 수행하는 것처럼

새로운 언어를 선택하는 모든 사람에게 가장 좋은 방법은 JavaScript와 다릅니다!

Nesse vídeo eu explico um pouco mais sobre o processo de lançamento de novas funcionalidades do JavaScript, se você ainda não assistiu, eu recomendo fortemente para poder entender melhor como tudo funciona!

2022년 ECMAScript 버전, JS에 대한 구체적인 설명, 최신 버전의 새로운 기능에 대해 자세히 살펴보겠습니다!

Metodo .at() 모두 색인이 생성됨

Uma das novidades mais simples, mas ao mesmo tempo mais legais é a adição do método .at() em listas e qualquer outro indexável nativo, tipo strings.

O que ele faz é dar o item na posição pedida do array, for example:

const carrinho = ['banana', 'maçã', 'pera']
carrinho.at(0) // banana
carrinho.at(-1) // pera

// Fora do limite
carrinho.at(100) // undefined

E isso funciona para qualquer indexável, então se tivermos uma 문자열:

const frase = 'O rato roeu a roupa do rei de Roma'

frase.at(0) // O
frase.at(-1) // async

RegExp에서 캡처한 인덱스

Agora는 정규식과 일치하며 RegExp의 구성자는 다음과 같이 예를 들어 종착역과 일치하는 색인 ​​목록을 나열합니다.

const input = 'abcd'
const match = /b(c)/.exec(input)
const indices = match.indices

indices.length // 2
matches.length // 2
// O número de indices é igual ao numero de matches

indices[0] // [1,3] inicio/fim do primeiro match "b"
input.slice(indices[0][0], indices[0][1
]) // mesma coisa que match[0]

Object.hasOwn

Uma variação mais simples do Object.hasOwnProperty que retorna true para todas as propriedades que são diretamente pertencentes a um objeto (sem serem herdadas):

const livros = {}
livros.paginas = 123

Object.hasOwn(livros, 'paginas') // true
Object.hasOwn(livros, 'toString') // false

// O 'in' verifica todas as propriedades
'paginas' in livros // true
'toString' in livros // true

Error.cause의 오류 원인

Uma das principais mudanças e uma das que eu acho que vão ser mais úteis. Essa nova propriedade da classe erro mostra a causa do erro enviado.

const erro = new Error('Um erro', { cause: 'A causa desse erro' })

erro instanceof Error // true
erro.cause // 'A causa desse erro'

O principal caso de uso é evitar que o objeto de erro seja passado diretamente:

try {
  naoFunciona();
} catch (err) {
  throw new Error('naoFunciona failed!', { cause: err });
}

최상위 대기

Node.js는 시간이 지남에 따라 속도가 빨라지고ESModules 최상위 수준에서 실현 가능성이 있습니다await.

// index.mjs

// falha na implementação antiga
await Promise.resolve('🍎');
// → SyntaxError: await is only valid in async function

// correção que a gente costuma fazer com IIFE
(async function() {
  await Promise.resolve('🍎');
  // → 🎉
}());

// nova implementação de top-level await
await Promise.resolve('🍎') // '🍎'

클래스 필드 선언

Nós FINALMENTE agora temos a declaração de propriedades de classe fora do construtor, ou seja, a gente pode declarar e atribuir um valor a uma propriedade de uma classe sem precisar de um construtor comasync function .

Isso já era bastante comum no TypeScript, mas agora está chegando nativamente ao JavaScript:

class Classe {
    /*
      ao invés de:
      constructor() { this.publicID = 42; }
    */
    publicID = 42; // public field

    /*
      ao invés de:
      static get staticPublicField() { return -1 }
    */
    static campoEstatico = -1;

    // propriedades privadas estáticas
    static #campoPrivadoEstatico = 'private';

    //métodos privados
    #privateMethod() {}

    // declarações estáticas com static declaration blocks
    static {
      // Executado quando a classe é criada
    }
}

Checagem de campos por reflexão de classe

Esse é um caso de uso complicado, mas quando tentávamos checar uma propriedade de uma classe através de um bloco de inicialização estático, iríamos ter um erro dizendo que a classe não foi inicializada ou que a propriedade não existe, isso foi corrigido:

class C {
  #prop;

  #metodo() {}

  get #getter() {}

  static isC(obj) {
    // usando 'in'
    return #prop in obj && #metodo in obj && #getter in obj;
  }
}