×

O JavaScript passou por mudanças significativas na última década, com cada versão introduzindo novas funcionalidades. No entanto, o ECMAScript 2018 (ES9) trouxe algumas das mudanças mais transformadoras. Neste artigo, exploraremos as 5 funcionalidades mais impactantes introduzidas pelo ES9.

1. Encadeamento Opcional (Optional Chaining)

O Encadeamento Opcional permite acessar propriedades aninhadas de objetos de maneira segura, sem precisar verificar se cada propriedade existe. Isso evita erros e torna o código mais limpo e legível.

const usuario = { informacao: { endereco: { cidade: 'São Paulo' } } };

// Antes do ES9
const cidade = usuario && usuario.informacao && usuario.informacao.endereco && usuario.informacao.endereco.cidade;

// Com Encadeamento Opcional
const cidade = usuario?.informacao?.endereco?.cidade;

console.log(cidade); // 'São Paulo'

Quer saber mais? Confira este artigo detalhado sobre Encadeamento Opcional na MDN.

2. Coalescência Nula (Nullish Coalescing)

A Coalescência Nula oferece uma maneira abreviada de verificar se um valor é nulo ou indefinido, permitindo a atribuição de um valor padrão.

const usuarioId = null;

// Antes do ES9
const id = usuarioId !== null && usuarioId !== undefined ? usuarioId : 'defaultId';

// Com Coalescência Nula
const id = usuarioId ?? 'defaultId';

console.log(id); // 'defaultId'

Para mais detalhes, veja este guia sobre Coalescência Nula na MDN.

3. BigInt

O BigInt introduz um novo tipo de dado capaz de lidar com inteiros arbitrariamente grandes, especialmente útil para aplicações que requerem cálculos precisos.

const numeroGrande = 9007199254740991n; // Sufixo 'n' denota um BigInt

const resultado = numeroGrande + 1n;

console.log(resultado); // 9007199254740992n

Entenda mais sobre BigInt visitando esta página informativa na MDN.

4. Importação Dinâmica (Dynamic Import)

A Importação Dinâmica permite importar módulos dinamicamente durante a execução, melhorando o desempenho ao reduzir o número de módulos carregados inicialmente.

// Uso de importação dinâmica
import('./meuModulo.js')
  .then((modulo) => {
    modulo.minhaFuncao();
  })
  .catch((erro) => {
    console.error('Falha ao carregar o módulo', erro);
  });

Para uma visão aprofundada, veja este artigo sobre importação dinâmica na MDN.

5. globalThis

A funcionalidade globalThis proporciona uma maneira consistente de acessar o objeto global, independentemente do ambiente em que o código está sendo executado.

console.log(globalThis); // Em navegadores, retorna o objeto 'window'; em Node.js, retorna 'global'

Explore mais sobre globalThis no guia completo na MDN.

Conclusão

As funcionalidades apresentadas pelo ES9 são revolucionárias, proporcionando maior segurança, legibilidade e eficiência ao código JavaScript. Para se aprofundar no assunto, recomendamos visitar a documentação oficial do MDN. Tente incorporar essas novas funcionalidades em seus projetos e veja a diferença que elas podem fazer!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Autor

flpchapola@hotmail.com

Posts relacionados

Substituindo ESLint e Prettier: Biome simplifica linting e formatação em um só lugar!

Substituindo ESLint e Prettier: Biome simplifica linting e formatação em um só lugar!

Nos meus novos projetos, tenho substituído o ESLint e Prettier pelo Biome. Um dos grandes destaques do Biome é que ele já...

Leia tudo
10 Dicas de CSS para Melhorar Seus Layouts e se Tornar um Desenvolvedor Melhor

10 Dicas de CSS para Melhorar Seus Layouts e se Tornar um Desenvolvedor Melhor

10 Ferramentas para Melhorar suas Habilidades como Desenvolvedor Se você está buscando formas de se tornar um desenvolvedor mais eficiente e habilidoso,...

Leia tudo
Substituindo ESLint e Prettier pelo Biome: Uma Solução Completa para Linting e Formatação de Código

Substituindo ESLint e Prettier pelo Biome: Uma Solução Completa para Linting e Formatação de Código

Nos meus novos projetos, tenho substituído o ESLint e Prettier pelo Biome. Um dos grandes destaques do Biome é que ele já...

Leia tudo
"10 Classes do Tailwind Que Você Gostaria de Ter Conhecido Antes"

“10 Classes do Tailwind Que Você Gostaria de Ter Conhecido Antes”

O Tailwind CSS é uma estrutura de CSS poderosa e flexível, ideal para projetos de front-end que requerem desenvolvimento rápido e alta...

Leia tudo
Explorando a Arquitetura e Conceitos Fundamentais do React Fiber para Otimização de Performance

Explorando a Arquitetura e Conceitos Fundamentais do React Fiber para Otimização de Performance

React Fiber é uma nova arquitetura introduzida pelo React para gerenciar o processo de renderização de forma mais eficiente. Ele visa melhorar...

Leia tudo
10 Dicas para Se Tornar um Desenvolvedor Melhor e Aumentar Suas Habilidades

10 Dicas para Se Tornar um Desenvolvedor Melhor e Aumentar Suas Habilidades

Em um mercado cada vez mais competitivo, tornar-se um desenvolvedor de alta performance é essencial para garantir relevância e sucesso. A seguir,...

Leia tudo