JavaScript moderno com ES6-ES13 (Tutorial de JS)

Isto é o que te espera neste curso de JavaScript ES6.

O JavaScript está presente nos navegadores há muitos anos. Praticamente todos os sites contêm mais ou menos código JS. Embora as primeiras versões fossem um pouco desajeitadas, até agora era possível trabalhar bem com o padrão ES5, pelo menos se fosse possível contornar astutamente as armadilhas e incertezas. Então, por que aprender algo novo em vez de ficar com o testado e comprovado? Nesta lição, mostrarei as vantagens do novo padrão ES6 e as razões pelas quais você não pode realmente ficar sem ele.

Esta lição apresenta uma maneira de configurar um ambiente de desenvolvimento. Neste caso, usamos o IDE Visual Studio Code da MS e ViteJS como servidor de desenvolvimento.

Até e incluindo o ES5, a palavra-chave var era a única maneira de declarar variáveis, e muitas vezes causava comportamentos indesejados ou mesmo erros com suas peculiaridades. O ES6 introduz as duas novas palavras-chave let e const, que corrigem algumas deficiências do var.

O loop for é conhecido por todos os desenvolvedores da web. É frequentemente usado para percorrer arrays. Com o ES6, existe uma variante do loop for que permite fazer isso de forma muito mais curta e compacta.

As funções são essenciais no JS e até agora foram declaradas e definidas apenas pela palavra-chave function. O ES6 introduz uma forma de escrita muito elegante e curta que não só torna o código mais legível, mas também oferece uma solução para um problema irritante com this.

Parâmetros opcionais podem ser implementados de forma um pouco complicada no ES5 e não são revelados ao chamador de uma função. Com o ES6, os parâmetros opcionais com seus valores padrão podem ser escritos diretamente na assinatura da função.

A desconstrução permite extrair elementos de objetos e arrays de forma direcionada. Ao observar com atenção, surgem muitas possibilidades de aplicação que tornam o código JS mais elegante e compacto.

O manuseio da variável arguments era necessário até o ES6 para permitir uma quantidade variável de parâmetros em funções. Isso é muito mais fácil no ES6 com os chamados parâmetros restantes.

Não apenas em definições de função, o operador ... é utilizado em parâmetros restantes, mas também em destructuring de array, ele pode ser usado para capturar o "resto" dos elementos e disponibilizá-los como um Array.

Não apenas em arrays, o operador rest também pode ser usado em objetos para capturar as propriedades restantes e disponibilizá-las como objeto.

O operador oposto ao operador rest é o operador spread. Ele tem a mesma aparência (…), mas fica do outro lado de uma atribuição e espalha o array em suas partes individuais.

A "artimanha" com o operador spread funciona muito bem também com objetos. Isso permite que objetos sejam "misturados" em outros objetos. Com Object.assign(), no entanto, existe uma alternativa muito boa para isso.

Funções em literais de objeto são muito complicadas de escrever com a palavra-chave function-. Com o ES6, elas podem ser escritas de forma muito mais curta e concisa.

Lidar com cadeias de caracteres faz parte da caixa de ferramentas básica de qualquer programador. É bom que o ES6 ofereça algumas novas e muito úteis funções de string que economizam muito trabalho de escrita.

Não há como negar: literais de string multilinha com valores de variáveis integrados eram uma dor de cabeça até o ES6 e também muito desagradável de ler. Os novos literais de modelo do ES6, por outro lado, são um alívio sintático.

Já com ES5, existem algumas funções de array muito úteis que seguem uma abordagem mais funcional. O ES6 adicionou algumas outras, tornando o manuseio de arrays ainda mais agradável. Algumas das "antigas" funções já presentes no ES5 também são reconhecidas aqui.

Os objetos sempre puderam ser usados como um armazenamento de chave-valor ou dicionário, no entanto, com algumas desvantagens. A nova estrutura de dados Map elimina essas desvantagens e oferece funcionalidade de dicionário sólida, como se conhece de outras linguagens de programação.

As operações assíncronas podem ser tratadas com funções de retorno de chamada, no entanto, há o perigo de que a profundidade do aninhamento seja muito grande e o código se torne confuso (o chamado Inferno da Função de Retorno de Chamada). Promessas resolvem esse problema, evitando aninhamentos profundos e permitindo a encadeamento de operações assíncronas em um nível.

Depois de evitar o callback hell com Promises, a construção async/await vai ainda mais longe com açúcar sintático. Ela se baseia em Promises e permite programar operações assíncronas quase como operações síncronas. Quem já programou com async/await evita o uso direto do método then de Promises (e, muito menos, o uso de callbacks).

No Node.js, os módulos são usados desde o início, no entanto, inicialmente eles dependiam exclusivamente do formato de módulo CommonJS com require. Desde o ES6, existe uma definição de módulo no padrão e os novos palavras-chave import/export. Atualmente, este formato é suportado pela maioria das bibliotecas JS (novas) e o Node.js também consegue lidar com isso nas versões mais recentes.

Além da importação estática de módulos com a palavra-chave import, o ES6 também suporta a importação dinâmica com a função import. Como tudo funciona de forma assíncrona, é retornado uma Promise, na qual se pode esperar principalmente com await. Isso permite o carregamento de módulos durante a execução em momentos arbitrários.

A programação orientada a objetos clássica com classes e herança só estava disponível até o ES6 através de um protótipo em uma função construtora. Isso era complicado, parecia pouco compacto e, por isso, propenso a erros. A nova palavra-chave class agora permite, com o ES6, a definição de forma mais compacta, como é conhecido de outras linguagens de programação como Java, C# e C++. Internamente, no entanto, continua a ser um sistema fundamentalmente baseado em protótipos, apenas com uma sintaxe mais bonita.

Também a herança baseia-se ainda em protótipos, escrita em ES6 com a palavra-chave extends, no entanto, torna-se muito mais fácil e mais clara. Ao usá-la, deve-se chamar o construtor da classe base no momento certo com super. Como fazer isso, é claro, também será explicado nesta lição.

Também a declaração de membros ou campos foi possibilitada com os novos padrões. Isso permite também declarar e inicializar campos estáticos.

Também é possível declarar campos privados agora, e com isso, é garantido que não pode ser acessado externamente. Um pouco incomum é a declaração, que difere significativamente de outras linguagens de programação.

Com a nova palavra-chave class e recursos associados como herança e encapsulamento de dados (campos privados), todos os programadores orientados a objetos deveriam estar satisfeitos, certo? Nesta lição, gostaria de apresentar uma alternativa para a criação de objetos que dispensa completamente classes, protótipos e this, mas que permite uma forma mais flexível de "herança" ou melhor "composição".

As características mais importantes da versão ES6 e posterior devem estar cobertas agora. No entanto, sempre estão surgindo novidades. Algumas funções menos utilizadas ainda não foram mencionadas. Nesta lição, será explicado o que mais esperar no futuro e quais funções ainda podem ser interessantes em casos especiais.