Você está na página 1de 16

O bsico do

ECMA cript 6
produzido por:
Agradecimentos

Seja muito bem-vindo!

H muitos e muitos anos que o JavaScript no ganhava melhorias relevantes,


mas isso finalmente mudou com a chegada do ES6. Aqui voc aprender o
bsico sobre as novidades que chegaram a linguagem e que so
fundamentais para o entendimento das melhorias que j esto chegando com
a ES7, ES8 e as prximas que viro.

Agora, sem mais delongas, boa leitura e bons cdigos!

Diego Martins de Pinho


Cofundador da Code Prestige
Introduo

O profissional de tecnologia que deseja se manter relevante no mercado


precisa estar antenado s mudanas. Uma das grandes mudanas nos
ltimos anos foi a chegada da sexta verso da especificao ECMAScript,
responsvel por descrever as funcionalidades da linguagem JavaScript.

Com ela, o JavaScript nunca esteve to convidativo para iniciantes e


confortvel de se trabalhar. Aqui voc aprender o bsico sobre as principais
mudanas e sair sabendo quais aspectos deve aprofundar nos estudos.

Preparado para entrar de cabea no futuro do JavaScript?


Sumrio

Mtodos para Arrays


Arrow Functions
Valores padres para parmetros
Operadores Rest e Spread
Templates Literais
Lao de repetio for...of
Const e let
Desestruturamento de objetos e
Arrays
Classes
Geradores
Aprenda mais sobre a ECMAScript 6
Mtodos para Arrays
Agora temos uma srie de Antes
mtodos auxiliares para for (var i = 0; i < lista.length; i++) {
// corpo da lgica que queremos
iterar Arrays, cada um com }
um objetivo diferente:

Agora
Objetivo Objetivo Objetivo
iterar todos os registros iterar todos os registros e fazer filtrar a lista de acordo com
algo com eles algum critrio

lista.forEach(function(item) { lista.map(function(item) { lista.filter(function(item) {


// corpo return // corpo; return // corpo do critrio;
}); }); });

Objetivo Objetivo Objetivo


encontrar um registro de verifica se todos os itens verifica se pelo menos um item
acordo com um critrio obedecem a um dado critrio obedece a dado critrio

lista.find(function(item) { lista.every(function(item) { lista.some(function(item) {


return // corpo do critrio; return // corpo do critrio; return // corpo do critrio;
}); }); });

- Ensino de programao distncia | 01


Arrow Functions
Arrow Functions so uma notao para escrever funes. A definio de uma
funo desse tipo consiste de uma lista de parmetros ( ... ), seguido de uma
fat arrow (=>) e o corpo da funo.

Antes Agora
var soma = function (a,b) { var soma = (a,b) => a + b;
return a + b;
} Quando s houver um
Quando s h uma linha, no
parmetro, o uso dos
necessrio o return nem as
parnteses desnecessrio
chaves!

O comportamento das Arrow Functions com o this (contexto de execuo)


diferente do das funes normais. Cada funo no JavaScript define seu
prprio contexto de this, mas as Arrow Functions capturam o this do seu
contexto delimitador. Isso evita que faamos gambiarras.

- Ensino de programao distncia | 02


Valores padres para parmetros
O ECMAScript 6 agora nos permite atribuir valores padres aos parmetros
de nossas funes.

Antes
function multiplicaPor(num, multi) {
if(multi !== undefined) return num * multi;
return num * 2; // valor padro
}

Agora
function multiplicaPor(num, multi = 2) {
return num * multi;
} Se na chamada do mtodo
nenhum valor for especificado, o
valor padro assumido!

- Ensino de programao distncia | 03


Operadores Rest e Spread

Agora lidamos com os parmetros de uma funo muito mais tranquilamente


utilizando os trs pontos (...), que dependendo de sua localizao, atua como
operador rest ou spread.
Ele encapsula todos os
parmetros que recebe dentro

Rest de um Array

function somaTudo(...params) {
return params.reduce((soma, param) => {
return soma + param;
}, 0);
} Spread
var lista = [1,2,3,4,5];
somaTudo(...lista); // 15

Os itens so interpretados um a
um e enviados para o mtodo

- Ensino de programao distncia | 04


Templates literais

Lidamos agora com Strings de maneira muito mais eficiente utilizando os


templates literais. Basta utilizarmos a crase (`) e o ${ } para interpolar valores!

Antes Agora
var nome = Luiz; var nome = Luiz;
var sobrenome = var sobrenome =
Augusto; Augusto;

console.log(Bom dia, + console.log(`Bom dia,


nome + + sobrenome); ${nome} ${sobrenome}`);

// Bom dia, Luiz Augusto // Bom dia, Luiz Augusto

O valor da varivel (ou


expresso) interpretado e
jogado dentro da String

- Ensino de programao distncia | 05


Lao de repetio for...of
Com este tipo de lao, ficou muito mais fcil iterar objetos que sejam iterveis:

Antes
var lista = [1,2,3,4,5];
for(var i = 0; i < lista.length; i++) {
console.log(lista[i]);
}

Agora
var lista = [1,2,3,4,5];
A cada iterao, o item da lista for(var numero of lista) {
recuperado e jogado para a
varivel console.log(numero);
}

- Ensino de programao distncia | 06


Const e Let

Com o ECMAScript 6, no declaramos mais nossas variveis com o var, agora


utilizamos as palavras chave: const e let. Esse novo tipo contm escopo de
bloco, ao invs de escopo de funo como tnhamos antigamente.

let const
var a = 2; const nome = Luiz;
{
let a = 3; // vamos tentar alterar
console.log(a); // 3 nome = Kiko;
}
console.log(a); // 2 // TypeError
Os valores deste tipo de
Como o escopo de bloco, as variveis no podem ser
variveis declaradas neste alterados!
espao no so vistas fora

- Ensino de programao distncia | 07


Desestruturamento de objetos e arrays

Desestrututamento ajuda a evitar a necessidade de variveis temporrias


quando lidamos com objetos e arrays.

Considerando... Antes
var titulo = livro.titulo;
var livro = {
var autor = livro.autor;
titulo: ECMAScript 6,
autor: Diego Pinho,
editora: Casa do Cdigo,
ISBN: 128301212 Agora
}
let {titulo,autor} = livro;

As propriedades com estes


nomes so extradas e variveis
locais com o mesmo nome
criada

- Ensino de programao distncia | 08


Classes
A herana por prototipagem sempre foi bem confuso de entender, mas agora
o JavaScript tem suporte classes assim como j conhecemos em outras
linguagens de programao. As classes so sintaxe de acar, ou seja, por
debaixo dos panos, tudo continua como antes, mas temos um nova abstrao
de alto nvel para trabalhar.

class Fiat extends Carro {

constructor(cor, modelo) {
super(cor,modelo);
}

andar() {
console.log(vrum vrum);
}

static mostrarModelo() {
console.log(this.modelo);
Temos os mtodos estticos que
podem ser invocados sem a
}
necessidade de instanciar a }
classe!

- Ensino de programao distncia | 09


Geradores
Funes geradoras so um novo tipo de funo que nos permite gerar
quantos valores forem necessrios, ou seja, podemos execut-la, interromper
a sua execuo, e retom-la.
O asterisco descreve
uma funo como
geradora
O yield a palavra chave que
define o ponto de parada da
function* percorrerLinha477() { funo
console.log('Passei pela rua 1');
yield 'Parada 1'; Passei pela rua 1
console.log('Passei pela rua 2'); Parada 1
yield 'Parada 2'; Passei pela rua 2
console.log('Passei pela rua 3'); Parada 2
yield 'Parada 3'; Passei pela rua 3
Parada 3
console.log('Passei pela rua 4');
Passei pela rua 4
yield 'Fim da linha'; Fim da linha
}

const linha = percorrerLinha477();


for (let parada of linha) {
console.log(parada);
}

- Ensino de programao distncia | 10


Aprenda mais sobre o ECMAScript 6!
Gostou das novidades? E olha que isso s o comeo! Confira o nosso livro e
o nosso curso para aprender com detalhes como funcionam essas melhorias
e entre de cabea no futuro do JavaScript!

Somente no livro/curso:
Fundamentao terica
Aplicao em casos reais do 0,00
R$ 3
dia a dia do desenvolvedor
Exerccios prticos e 0,00
R$ 3
tericos para fixao
Maps, WeakMaps, Set e
Weaksets
Iteradores e iterveis
Melhorias em objetos
literais
Modularizao Clique e compre!
Operaes assncronas com
Promises
Metaprogramao com Clique e compre!
proxies
E muito mais!

- Ensino de programao distncia | 11


/

Confira outros e-books, vdeos e cursos nas nossas redes sociais!

E-book produzido em 04/09/2017. 2017 Code .


Todos os direitos reservados.

- Ensino de programao distncia | 12