Em meados de 2015, foi lançada uma nova versão do Javascript, o ECMAScript 6 (ES6) ou ECMAScript 2015 (ES2015) com diversas funcionalidades que vieram para aumentar de forma exponencial a produtividade no desenvolvimento.
O ano de 2015 pode parecer longe no passado, quando falamos de tecnologia, mas ainda existe muito código legado de versões anteriores do Javascript por aí, então é um assunto que ainda vale muito a pena ser explorado.
São muitas novidades e para não se tornar uma leitura cansativa, vou focar nos pontos que mais trouxeram ganhos de produtividade e confiabilidade no código desenvolvido.
1. Variáveis e constantes
Nessa nova implementação, os conceitos de armazenamento de dados da aplicação respeitam o escopo onde elas são definidos. O uso do var para declaração de variáveis é desaconselhado, sendo substituido por let e const.
// formato não recomendado var nomeAntigo = 'Lando'; // declarando uma constante const nome = 'Han Solo'; // declarando uma variável let anoNascimento = 1973; // declarando uma variável dentro de um escopo de função function calcularIdade(anoNascimento) { const anoAtual = 2020; return anoAtual - anoNascimento; } Não é possível alterar o valor de uma constante após o valor inicial definido, a tentativa retorna um erro (é possivel e não recomendado, alterar o valor de propriedades de um objeto definido com const).
2. Arrow functions
Uma grande vantagem da utilização de arrow functions é a redução de tamanho de código, principalmente quando executado em larga escala, com diversas funções encadeadas.
// declarando uma funcao antes do ES6 const calcularSoma = function (a, b) { return a + b; }; // utilizando arrow function const calcularSoma = (a, b) => { return a + b; }; // forma resumida (return e chaves implícito) const calcularSoma = (a, b) => a + b; É importante deixar claro que a declaração de function não foi descontinuada ou desincentivada, as arrow functions vieram para complementar, com uma forma mais ágil de escrever.
3. Map, filter e reduce para arrays
Foram criadas 3 funções embutidas para facilitar o trabalho de operações em arrays, com 3 diferentes focos. Nos exemplos abaixo, vou citar com exemplos a funcionalidade de cada um.
Vamos usar o .map() para resgatar o ID de cada usuário de uma lista de usuários. Essa função vai percorrer cada item de um array e retornar exatamente o mesmo numero de elementos do array origem.
const usuarios = [ { id: 10, name: 'Luke' }, { id: 15, name: 'Leia' }, { id: 20, name: 'Ackbar' }, ]; const usuariosIds = usuarios.map(usuario => usuario.id); // resultado será: [10, 15, 20] Nesse próximo exemplo, vou utilizar .filter() para, veja bem… FILTRAR os elementos de uma lista. Essa função vai percorrer cada item de um array e retornar um novo array com os elementos filtrados do array original.
const usuarios = [ { name: 'Luke', idade: 25 }, { name: 'Leia', idade: 26 }, { name: 'Ackbar', idade: 300}, ]; const usuariosIds = usuarios.filter(usuario => usuario.idade > 30); // resultado será: [{ name: 'Ackbar', idade: 300}] E por fim, o .reduce(). Essa função vai percorrer cada elemento de um array para retornar um único valor decorrente de alguma operação em cada elemento.
const array = [1, 2, 3, 4]; const soma = array.reduce((total, elemento) => total + elemento); // resultado será: 10 O argumento das funções .map(), .filter(), .reduce() é uma função.
4. Parâmetros padrão
Agora é possível definir um valor padrão para os argumentos de funções, o que pode facilitar o desenvolvimento em alguns casos.
// antes do ES6 function soma(a, b, c) { if (c == null) { c = 0; } return a + b + c; } // com ES6 function soma(a, b, c = 0) { return a + b + c; } 5. Operador spread
O operador spread (…) nova funcionalidade no ES6 dá a possibilidade de realizar operações em arrays e objects sem necessidade de realizar uma iteração em cada um de seus valores.
// utilizando spread como argumento de uma função function soma(...argumentos) { let total = 0; for (let i = 0; i < argumentos.length; i++) { total += argumentos[i]; } return total; } soma(1, 2); soma(1, 2, 3); // utilizando spread para unir dois arrays const lista1 = [1, 2, 3, 4]; const lista2 = [5, 6, 7, 8]; // listaResultado será: [1, 2, 3, 4, 5, 6, 7, 8]; const listaResultado = [...lista1, ...lista2]; // também é possível usar com objetos const obj1 = {a: 1, b: 2}; const obj2 = {c: 3, d: 4}; // objResultado será:{a: 1, b: 2, c: 3, d: 4} const objResultado = {...obj1, ...obj2}; 6. Template string
Com a implementação do template string é possível definir valores de string concatenando variáveis e operações de forma simples e o código fica mais legível, além de ser muito mais rápido de escrever, visto que não é necessário se preocupar com os concatenadores (+).
const nome = 'Vader'; const anoNascimento = 1977; const empresa = 'Death Star'; // antes do ES6 const frase = 'O ' + nome + ' tem ' + (2020 - anoNascimento) + ' e trabalha na empresa ' + empresa + '.'; // com ES6 const frase = `O ${nome} tem ${2020 - anoNascimento} e trabalha na empresa ${empresa}.`; A template string suporta multi-line, ou seja, a string pode ter várias linhas sem necessidade de um caractere (+) no fim de cada linha informando a quebra.
7. Destructuring assignment
O recurso de destructuring agiliza a utilização de propriedades de objetos e valores de listas, como variáveis. Fica mais fácil de entender no exemplo abaixo:
const aluno = { nome: 'Padme', email: 'padme@secondtrilogy.com', idade: 23, cidade: 'Tikal', }; // antes do ES6 var nome = aluno.nome; var email = aluno.email; var idade = aluno.idade; var cidade = aluno.cidade; // com ES6 const { nome, email, idade, cidade } = aluno; Com a definição acima, as informações nome, email, idade, cidade podem ser usadas como variáveis no código a seguir.
8. Property Shorthand
Você pode agora inializar um objeto, sem precisar definir chave e valor para cada propriedade utilizando o property shorthand. Émais uma forma de agilizar e diminuir o tamanho do código. Vamos para o exemplo:
// antes do ES6 function cadastrarProfessor(nome, email, telefone) { var professor = { nome: nome, email: email, telefone: telefone, }; cadastrar(professor); }; // com ES6 function cadastrarProfessor(nome, email, telefone) { var professor = { nome, email, telefone, }; cadastrar(professor); }; A diferença do segundo para o primeiro caso é sutil, as propriedades do objeto professor podem omitir o valor, deixando apenas a chave.
PS.: As duas opções acima são válidas no ES6, a segunda é apenas uma alternativa de escrita.
9. Modules
Permite importar/exportar valores sem a necessidade de declaração deles em nível global dentro da aplicação.
Exemplo: nesse arquivo abaixo, operacoes.js, são declarados 2 funções e são exportadas para serem usadas em outros escopos.
function soma (a, b) { return a + b; }; function multiplicacao (a, b) { return a * b; }; export { soma, multiplicacao, }; Essas funções podem ser chamadas em outros arquivos, como no exemplo abaixo do arquivo main.js.
import { soma } from './operacoes.js'; soma(3, 2); 10. Promises
Um dos principais motivos para criação das promises foi a necessidade de desenvolver um código mais limpo e organizado quando trabalhamos com operações assíncronas. Um famoso problema encontrado em muitos códigos javascript é o callback hell. As promises são uma proposta de resolução para esse problema.
No exemplo abaixo, vou efetuar uma requisição à API da minha aplicação para buscar os usuários cadastrados, dividindo a responsabilidade de um método exclusivo para o tratamento da requisição.
function getUsers() { return new Promise((resolve, reject) => { fetch('api/getUsers'/) .then(resposta => resolve(resposta.json()) .catch(erro => reject(error); }); }; // utilizando a funcao acima getUsers() .then(usuarios => console.log(usuarios)) .catch(erro => console.log(erro.message)); Compatibilidade
A compatibilidade do ES6 com navegadores é bastante ampla e para os casos em que não é possível, a utilização de compiladores, como babel.js é recomendada. No link abaixo tem algumas informações sobre compatibilidade.
https://www.w3schools.com/js/js_versions.asp
Referência
Para construção desse artigo foram usadas informações disponibilizadas no site es6-features.org, que traz todas as novas funcionalidades implementadas no ES6.
Espero que essa leitura possa ter ajudado. 🚀
Até mais.
Top comments (0)