Introdução ao ES6

ECMAScript 2015, também conhecido como ES6 (ECMAScript 6), é uma atualização significativa do JavaScript, introduzindo nova sintaxe e recursos que tornam a codificação mais eficiente e fácil de gerenciar. JavaScript é uma das linguagens de programação mais populares usadas para desenvolvimento web, e as melhorias no ES6 melhoram muito seus recursos.

Este guia cobrirá os recursos importantes introduzidos no ES6, com foco especial em Arrow Functions, uma nova maneira poderosa de escrever funções.

Principais recursos do ES6

1. deixe e const

ES6 introduziu duas novas maneiras de declarar variáveis: let e const.

• let: Declara uma variável com escopo de bloco, o que significa que a variável só está disponível dentro do bloco em que foi declarada.
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

• const: Declara uma variável constante que não pode ser reatribuída. No entanto, isso não torna a variável imutável – objetos declarados com const ainda podem ter suas propriedades alteradas.
  

   const y = 10;
   y = 5; // Error: Assignment to constant variable.
  
   const person = { name: "John", age: 30 };
   person.age = 31; // This is allowed.
  

2. Funções de seta

Um dos recursos mais comentados do ES6 é a Função de seta. Ele fornece uma sintaxe mais curta e concisa para escrever funções.

#### Comparação de sintaxe:

Função Tradicional (ES5):

   var add = function(x, y) {
     return x   y;
   };

Função de seta (ES6):

   const add = (x, y) => x   y;

Aqui está o que torna o Arrow Functions diferente:

• Sintaxe mais curta: você não precisa escrever a palavra-chave da função e pode omitir as chaves {} se a função tiver uma única instrução.
• Retorno implícito: Se a função contém apenas uma expressão, o resultado dessa expressão é retornado automaticamente.
• Sem esta ligação: As funções de seta não possuem seu próprio this, o que as torna inadequadas para métodos de objeto.

Exemplo de função de seta de linha única:

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

Funções de seta também podem ser usadas sem parâmetros:

   const greet = () => "Hello, World!";
   console.log(greet()); // "Hello, World!"

Para funções com mais de uma linha, chaves {} são obrigatórias e a instrução return deve ser explícita:

   const sum = (a, b) => {
     let result = a   b;
     return result;
   };

Funções de seta e isso
Uma distinção importante é como isso se comporta nas Arrow Functions. Ao contrário das funções tradicionais, as Arrow Functions não vinculam seu próprio this - elas herdam this do contexto circundante.

   const person = {
     name: "John",
     sayName: function() {
       setTimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayName(); // "John"

No exemplo acima, a função Arrow dentro de setTimeout herda isso do método sayName, que se refere corretamente ao objeto person.

3. Tarefa de desestruturação

A desestruturação nos permite extrair valores de arrays ou objetos e atribuí-los a variáveis ​​de uma forma mais concisa.

Desestruturação de objetos:

   const person = { name: "John", age: 30 };
   const { name, age } = person;
   console.log(name); // "John"
   console.log(age);  // 30

Desestruturação de array:

   const fruits = ["Apple", "Banana", "Orange"];
   const [first, second] = fruits;
   console.log(first);  // "Apple"
   console.log(second); // "Banana"

4. Operador de propagação e descanso (...)

O operador ... pode ser usado para expandir matrizes em elementos individuais ou para reunir vários elementos em uma matriz.

• Spread: Expande uma matriz em elementos individuais.
  

   const numbers = [1, 2, 3];
   const newNumbers = [...numbers, 4, 5];
   console.log(newNumbers); // [1, 2, 3, 4, 5]
  

• Rest: reúne vários argumentos em um array.
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc   curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

5. Promessas

Promessas são usadas para lidar com operações assíncronas em JavaScript. Uma promessa representa um valor que pode estar disponível agora, no futuro ou nunca.

Exemplo:

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 1000);
   });

   myPromise.then(result => {
     console.log(result); // "Success!" after 1 second
   });

Neste exemplo, a promessa é resolvida após 1 segundo e o método then() trata o valor resolvido.

6. Parâmetros padrão

No ES6, você pode definir valores padrão para parâmetros de função. Isso é útil quando um parâmetro não é fornecido ou é indefinido.

Exemplo:

   function greet(name = "Guest") {
     return `Hello, ${name}!`;
   }
   console.log(greet());       // "Hello, Guest!"
   console.log(greet("John")); // "Hello, John!"

7. Métodos de String (inclui(), startWith(), endsWith())

Novos métodos foram adicionados às strings para facilitar tarefas comuns:

• includes(): Verifica se uma string contém um valor especificado.
  

   let str = "Hello world!";
   console.log(str.includes("world")); // true
  

• startsWith(): Verifica se uma string começa com um valor especificado.
  

   console.log(str.startsWith("Hello")); // true
  

• endsWith(): verifica se uma string termina com um valor especificado.
  

   console.log(str.endsWith("!")); // true
  

8. Métodos de array (find(), findIndex(), from())

ES6 introduziu novos métodos para trabalhar com arrays:

• find(): Retorna o primeiro elemento que satisfaz uma condição.
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

• findIndex(): Retorna o índice do primeiro elemento que satisfaz uma condição.
  

   const index = numbers.findIndex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

9. Aulas

ES6 introduziu classes no JavaScript, que são um açúcar sintático sobre a herança baseada em protótipo existente do JavaScript. As classes permitem uma programação orientada a objetos mais limpa e compreensível.

Exemplo:

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

Conclusão

ES6 transformou o JavaScript, tornando-o mais eficiente e fácil de usar. A introdução de Arrow Functions simplifica a sintaxe da função, enquanto novos recursos como desestruturação, promessas, classes e o operador spread permite que os desenvolvedores escrevam códigos mais limpos e expressivos. Quer você seja um desenvolvedor iniciante ou avançado, compreender esses recursos do ES6 é essencial para escrever JavaScript moderno.

Ao dominar esses conceitos, você estará mais bem equipado para lidar com os desafios de codificação do mundo real e criar aplicativos da Web eficientes e escaláveis.

Acompanhe o projeto Arrow Functions no GitHub

Referências

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements