ECMAScript 2015 é nova especificação do JavaScript antes chamado ECMAScript 6, por um padrão de conversão e buscando implementações menores em pequeno prazo.
Lembrando que esses recursos nem todos os navegadores rodam, o ideal é utilizar uma ferramenta para compilar o seu código para navegadores antigos, um dos mais utilizados é o Babel, ele possui um handbook em português que mostra instalação e como usar:
https://github.com/thejameskyle/babel-handbook/blob/master/translations/pt-BR/user-handbook.md
O que é ECMAScript?
ECMAScript é um padrão JavaScript que permite que páginas da web funcionem de forma interoperável em diferentes navegadores da web. O ECMAScript é comumente usado para scripts do lado do cliente na World Wide Web e é cada vez mais usado para escrever aplicativos e serviços de servidor usando Node.js. ECMAScript é uma linguagem de programação baseada na linguagem Java, mas com semelhanças com a linguagem C#. ECMAScript é um padrão internacional estabelecido pela Ecma Internacional conforme o documento ECMA-262.
Rodando os exemplos com ECMAScript 2015
Boa parte dos exemplos eu rodei no Chrome sem precisar do babel, nesta página(ECMAScript 6 compatibility table) você tem uma tabela detalhada do suporte de cada browser. Para um projeto em produção é necessário o uso do babel. Agora voltando ao ECMAScript 2015, ela vem com uma série de novidades, já mostrei alguns dos novos recursos nos posts sobre REACT, mas não entrei em detalhes, neste post listarei algumas das novidades.
Declarando variáveis com EcmaScript 2015
let
let é utilizado para declarar variáveis dentro de um escopo menor comparado ao var com um escopo global ou relacionado a funções, com o let o escopo pode ser limitado por blocos menores if, else, for e while.
const
const como em outras linguagens o permite nos criarmos variáveis read-only, constantes ajudam-nos a criar códigos mais legíveis no ecmaScript 2015, exemplo quando lemos o seguinte código:
function doSomething(num) {
if(num < 5) {
//doSomething
}
for(var i = 0; i < 5; i++) {
//doSomething
}
}Code language: JavaScript (javascript)Não temos ideia o que é o número 5, apenas um fator na condicional, se mudarmos para o seguinte código:
function doSomething(num) {
const MAX_PRODUCTS = 5;
if(num < MAX_PRODUCTS) {
//doSomething
}
for(var i = 0; i < MAX_PRODUCTS; i++) {
//doSomething
}
}Code language: JavaScript (javascript)Agora com as modificações batemos o olho, sabemos que os loops estão limitados por um número máximo de produtos. Esse valor é escrito apenas uma vez, ele não pode ser alterado após ser definido. Por um padrão de escrita de código, todas as constantes precisam ser escritas em uppercase.
Funções
Surgiram novas funcionalidades úteis relacionadas a funções com ECMAScript 2015. A primeira delas, valores default na assinatura da função. Um problema básico é acesso a variáveis undefined, temos um tratamento comum para isso da seguinte forma:
function listProducts(listOfProducts) {
var products = typeof listOfProducts !== 'undefined' ? listOfProducts : [];
var total = products.length;
//do something
}Code language: JavaScript (javascript)Com nova definição de EcmaScript 2015 podemos criar valores default sem precisar de um tratamento especial como a versão anterior da seguinte forma:
function listProducts(listOfProducts = []) {
let total = listOfProducts.length;
//do something
}Code language: JavaScript (javascript)Nomeando parâmetros
Uma nova funcionalidade, agora é possível nomear parâmetros como isso é útil, no exemplo abaixo:
function setProduct(newProduct = {}) {
product.name = newProduct.name;
product.price = newProduct.price;
product.category = newProduct.category;
}Code language: JavaScript (javascript)Exemplo acima contornamos o problema do parâmetro “undefined” mas se os atributos não existirem nosso código irá disparar um erro.
function setProduct({name, price, category} = {}) {
product.name = name;
product.price = price;
product.category = category;
}Code language: JavaScript (javascript)Nomeando parâmetros, além do código, ficar mais legível, não caímos nos problemas de atributos inválidos.
Rest Params
Outro novo recurso do ECMAScript 2015 é possível passar um array de parâmetros como argumento, como isso funciona, por exemplo, temos uma função de produtos relacionados onde podemos exibir, um, dois ou três produtos:
showRelacionados("produto-1");
showRelacionados("produto-1", "produto-2", "produto-3");
showRelacionados("produto-1", "produto-2");
Code language: JavaScript (javascript)Você precisa passar um número x de argumentos que sempre variam, nunca é uma quantidade exata. Com parâmetros rest, permite definir que a função espera um array de argumentos.
function showRelated(...related) {
for(let i in related ) {
console.log(related[i]);
}
}
showRelated("produto-1", "produto-2", "produto-3");Code language: JavaScript (javascript)Além dos “…” na assinatura da função, podemos adicionar na chamada da função, mas ela tem uma funcionalidade diferente quando acionamos a função.
Neste caso ela quebra os parâmetros do objeto em vários argumentos. Exemplo temos o objeto:
produto.nome = "Prato";
produto.preco = 20;
produto.categoria = "casa";
adicionaProduto(...produto);
Code language: JavaScript (javascript)A função adicionaProduto irá receber 3 parâmetros(nome, preço e categoria).
Arrow function
Arrow function além de simplificar a escrita de funções ela mantém o escopo de quem invoca a função útil quando estamos a tratar, também chamado lexical binding ele cria um escopo de quem o define e não de onde ele roda, outro ponto a Arrow functions sempre são anónimas. A sua sintaxe é simples:
([parametro], [parametro]) => {
//código que será executado na chamada da função
}Code language: PHP (php)Exemplo temos um código sem arrow function:
let categorias = ["casa", "jardim", "praia"];
categorias.map(function(prop) {
console.log(prop);
});Code language: JavaScript (javascript)Com arrow function ele fica da seguinte forma:
let categorias = ["casa", "jardim", "praia"];
categorias.map(prop => {
console.log(prop);
});Code language: JavaScript (javascript)Apenas uma chamada, mas imagine isso sendo repetido várias vezes no dia, mas outra vantagem é a questão do escopo, um problema comum é perder o escopo quando você codando alguma funcionalidade exemplo:
function Clock() {
this.time = 10;
setInterval(function count() {
this.time++;
console.log(this.time, this);
}, 1000);
};
var c = new Clock();Code language: JavaScript (javascript)Criamos um objeto tipo Clock, mas ele tem um problema quando usamos o console dentro do setInterval, por exemplo, o escopo do setInterval é global, nesse momento o this não é o clock e sim o objeto Window. Claro que podemos resolver esse problema criando uma variável self para o clock e guardar o this(clock) dentro dessa variável, outra solução seria usar o arrow function:
function Clock() {
this.time = 10;
setInterval( () => {
console.log(++this.time, this);
}, 1000);
};
var c = new Clock();Code language: JavaScript (javascript)Vamos ficando por aqui o próximo post sobre ECMAScript 2015 falarei sobre objetos e classes.
Deixe um comentário