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.

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.

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.

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.

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).

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.

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 é 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.