2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

Matheus Lima Follow

JavaScript Lead Developer @ Concrete Solutions http://matheuslima.com/
Mar 21, 2016 8 min read

O Guia do ES6: TUDO que voc

precisasaber
Voc j ouviu falar em ES6, ECMAScript 6, ou ES2015 mas ainda no
sabe direito o que , quais seus benefcios e como us-lo?

Muitos desenvolvedores ainda se encontram com esse problema

tambm.

Foi pensando nisso que estruturei esse post para que voc no s
aprenda o que o ES6 mas tambm como tirar proveito dele o mais
rpido possvel.

Continue lendo esse post para aprender:

O que e como usar o ES6

Como usar o Babel

Como declarar variveis em ES6

Classes

let, const, arrow functions, destructuring

Mdulos

. . .
O que
https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 1/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

O que
ES6, ECMAScript 6 ou ES2015, simplesmente a mais nova verso do
JavaScript.

Na verdade, o nome mais usado atualmente ES2015. A ideia do

comit responsvel (conhecido como TC39) pelas atualizaes da
linguagem justamente fazer um release anual. Ento nesse ano
teremos o ES2016 (ou ES7). E assim sucessivamente.

Porm nesse post usarei o nome ES6 porque o mais conhecido pela
comunidade.

ECMAScript x JavaScript xES

Uma dvida bem comum o porqu dessa mudana do nome.
Na verdade no houve nenhuma mudana: JavaScript como ns
chamamos a linguagem, s que esse nome um trademark da Oracle
(que veio aps a compra da Sun). O nome ocial da linguagem
ECMAScript. E ES simplesmente uma abreviao do mesmo.

Objetivos doES6
O TC39 focou em alguns objetivos no desenvolvimento do ES6:

Ser uma linguagem melhor para construir aplicaes complexas

Resolver problemas antigos do JavaScript

Facilidade no desenvolvimento de libraries

Esses objetivos caro mais claros quando olharmos na prtica as

features do ES6.

. . .

Como usar
No momento que esse post est sendo escrito, a grande maioria dos
browsers ainda no do suporte ao ES6, ento o que podemos fazer
para contornar essa limitao?

Podemos usar um transpiler como o Babel.

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 2/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

O Babel transforma o seu cdigo de ES6 para ES5 (verso que a

maioria dos browsers d suporte hoje).

Transpilando ES6 paraES5

Vamos comear um projeto simples para demonstrar o uso do Babel:

mkdires6
cdes6
touchindex.js.babelrc

Agora vamos iniciar o npm com:

npminit

Aceite todas as opes e agora entre com o comando:

npmsavedevbabelclibabelpresetes2015

Vamos agora abrir o index.js para escrever cdigo em ES6:

1 letnumber=1
2
3 console.log(number)

O Babel por si s no sabe como transpilar o cdigo. Por isso ele

precisa de alguns plugins.

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 3/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

Vamos alterar o.babelrc para informar ao Babel qual plugin estamos

utilizando para fazer a converso de que precisamos. Como iremos
usar o ES2015, nosso.babelrc dever car assim:

{
'presets':['es2015']
}

Basta ento rodarmos o comando abaixo para que o transpile seja

concludo.

babelindex.jsoscript.js

O comando pode ser traduzido da seguinte forma: Babel, pegue o

arquivo index.js e gere um output com o nome script.js.

Se abrirmos o novo arquivo (script.js) que foi gerado, ele car

assim:

1 'usestrict';
2
3 varnumber=1;
4 console.log(number);

Portanto, geramos um arquivo ES5 a partir de um ES6. Obviamente o

que foi feito acima no recomendado para aplicaes reais, mas
apenas uma forma rpida de se demonstrar a utilidade de transpilers.

Numa aplicao real uma recomendao seria utilizar o Webpack com

o Babel. Mas isso por si s, grande o bastante para caber em um post
futuro. Inclusive j estou trabalhando nesse post, ento se voc quiser
ser informado de quando ele estiver pronto, assine a nossa newsletter!

. . .

Quais as novidades doES6

Agora que j sabemos o que o ES6 e como podemos us-lo hoje
mesmo com o Babel, podemos ento ver as features que ele adicionar

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 4/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

na linguagem e seus benefcios.

Declarao de variveis
Para entender os benefcios da nova forma de se declarar variveis em
ES6 com let e const, precisamos antes entender o conceito de hoisting.

Eu expliquei esse conceito e mais outros detalhes que todo

desenvolvedor JavaScript deveria saber. Se voc ainda no domina o
hoisting sugiro ler o post antes, e somente depois retornar aqui.

var x let
A diferena principal entre o var e o let que enquanto o primeiro
tem escopo de funo, o segundo possui escopo de bloco:

1 //escopodefunocomvar
2 functiondoSomething(){
3 vara=1;
4 if(true){
5 varb=2;//bdeclaradodentrodoifmasvisvelfora
6 }
7 varc=a+b;//3
8 }
9
10 //escopodeblococomlet
11 functiondoSomethingElse(){
12 leta=1

Um outro exemplo de coisas inesperadas que acontecem quando

usamos o var:

1 for(vari=0;i<5;i++){/*dosomething*/}
2 for(letj=0;j<5;j++){/*dosomethingelse*/}
3
4 console.log(i);//5

Em resumo, let conserta o antigo problema causado pelo hoisting

fazendo com que a declarao de variveis funcione da forma
esperada pela maioria dos desenvolvedores.

let x const
const funciona de forma semelhante. A nica diferena que as
variveis criadas no podem ser reatribudas:

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 5/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

1 leta=1
2 a=2
3
4 constb=1

comum achar que const deixa a varivel imutvel, assim como

algumas libs como ImmutableJS. Isso no verdade. As propriedades
de um objeto, por exemplo, podem ser alteradas:

1 constobject={
2 property:1
3 }
4
5 object.property=2

A minha opinio de que devemos declarar todas as variveis com

const e quando a varivel precisa ser reatribuda, e somente nesse
caso, devemos usar o let. No devemos usar o var (praticamente)
nunca.

Parmetro defunes
Algumas pequenas alteraes foram adicionadas em relao a
parametrizao de funes. Apesar dessas mudanas serem pequenas,
elas trazem enormes benefcios.

default parameters
Os parmetros de funes tem undened como valor default. Porm,
em alguns casos, pode ser necessrio utilizar um outro valor. Com a
verso atual do JavaScript (ES5) ns j podemos fazer isso dessa
forma:

1 varmultiply=function(x,y){
2 y=y|1;
3 returnx*y;
4 };
5
6 multiply(3,2);//6

O ES6 introduziu uma nova forma, bem mais simples, de se fazer isso.
Basta adicionar o valor default na denio do parmetro desejado:

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 6/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

1 constmultiply=(x,y=1)=>{
2 returnx*y
3 }
4
5 multiply(3,2)//6

Ou ento, com apenas uma linha:

1 constmultiply=(x,y=1)=>x*y
2
3 multiply(3,2)//6
4 multiply(3)//3

rest parameters
Na verso atual do JavaScript podemos utilizar o objeto arguments
para pegar todos os parmetros de uma funo:

1 varsum=function(){
2 varresult=0;
3 for(vari=0;i<arguments.length;i++){
4 result+=arguments[i];
5 }
6 returnresult;
7 }

O arguments porm, apresenta alguns problemas:

1. O objeto parece com um array, mas no exatamente um

2. Todos os parmetros da funo so automaticamente atribudos

ao arguments. No temos uma forma clara de diferenciar os
parmetros.

Com esses problemas em mente, os Rest Parameters foram adicionados

no ES6. O mesmo exemplo da soma poderia ser reescrito dessa forma:

1 functionsum(...numbers){
2 letresult=0
3 numbers.forEach((number)=>{
4 result+=number
5 })
6 returnresult
7 }

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 7/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

Ou dessa forma mais funcional:

1 constsum=(...numbers)=>
2 numbers.reduce((acc,current)=>acc+current,0)
3
4 sum(1,2,3,4,5)//15

Se o exemplo cou confuso, uma dica interessante ler meu ltimo

post sobre Programao Funcional com JavaScript. provvel que
deixe o exemplo mais claro.

Agora vamos imaginar o mesmo problema da soma, s que o primeiro

parmetro seria de onde a soma comearia e os prximos parmetros
seriam os nmeros a serem somados:

1 functionsum(start,...numbers){
2 letresult=start;
3 numbers.forEach((number)=>{
4 result+=number;
5 });
6 returnresult;
7 }

Ou ento:

1 constsum=(start,...numbers)=>
2 numbers.reduce((acc,current)=>acc+current,start)
3
4 sum(10,1,2,3,4,5)//25

Programao Funcional
As minhas alteraes preferidas do ES6 esto nessa categoria. Nos
prximos exemplos tentarei mostrar o porqu.

arrow functions
Os arrow functions so um excelente syntax sugar na criao de
funes. Uma funo que seria escrita dessa forma em ES5:

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 8/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

1 varsum=function(x,y){
2 returnx+y;
3 };
4

Pode ser escrita dessa forma em ES6 com o uso das arrow functions:

1 constsum=(x,y)=>{
2 returnx+y
3 }
4

Dessa forma j conseguimos ver uma maior expressividade e um

menor nmero total de caracteres. Mas podemos melhor-la ainda
mais:

1 constsum=(x,y)=>x+y
2
3 sum(1,2)//3

Com funes de apenas uma linha, podemos simplesmente omitir o

return e as chaves.

Mas o verdadeiro benefcio das arrows functions no est na

expressividade, ele se encontra na resoluo de um antigo problema
da linguagem: o this.

No exemplo abaixo em ES5, podemos observar o this sendo utilizado

de forma errada:

1 functionWidget(){
2 varbutton=document.getElementById('button');
3 button.addEventListener('click',function(){
4 this.doSomething();//o'this'noapontaparaWidgetcomoesperadoeprovocar
5 });

Uma das formas mais comuns de resolver esse problema, como

demonstrei nesse post, usando o bind() ou ento com self = this.

Com as arrow functions isso no necessrio. O this funcionar

exatamente da forma esperada:

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 9/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

1 functionWidget(){
2 constbutton=document.getElementById('button')
3 button.addEventListener('click',()=>{
4 this.doSomething()//o'this'apontaparaWidgetenoprovocarnenhumerro.
5 })

destructuring
Uma nova forma de declarar variveis extraindo valores de objetos e
arrays atravs do destructuring. Ela funciona dessa forma:

1 const[a,b]=[1,2]
2
3 console.log(a)//1
4 console.log(b)//2

E com rest parameters:

1 const[a,b,...rest]=[1,2,3,4,5]
2
3 console.log(a)//1
4 console.log(b)//2

Com objetos ela funciona desse jeito:

1 constperson={name:'Matheus',age:26}
2
3 const{name,age}=person
4
5 console.log(name)//'Matheus'

Provavelmente, o uso mais comum vai ser no import de libs. Vamos ter
o poder de transformar isso:

1 varReactRouter=require('reactrouter');
2 varRoute=ReactRouter.Route;
3 varLink=ReactRouter.Link;
4 varRouter=ReactRouter.Router;

Nisso:

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 10/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

1 const{
2 Route,
3 Link,
4 Router

Voc deve estar se perguntando sobre a minha motivao de ter

colocado o destructuring na categoria de Programao Funcional.
A resposta simples: destructuring muito semelhante ao pattern
matching, que uma das bases das linguagens funcionais.

. . .

Orientao aObjetos
Vamos falar agora sobre a feature mais polmica do ES6: classes.

Eu pessoalmente no gosto dessa adio. Posso estar errado em

relao a isso, e s o tempo vai conrmar ou no, mas acredito que os
grandes problemas da linguagem foram causados por tentar se
parecer com Java. Adicionar classes algo que segue exatamente essa
linha.

Mas independente da minha opinio elas foram adicionadas e vo

trazer mudanas, ento precisamos estud-las.

Classes
Classes nos do uma sintaxe amigvel que denem o estado e o
comportamento de objetos que representam as abstraes que usamos
diariamente.

constructor
Por exemplo, se necessitarmos de uma abstrao para animais em que
cada animal possui um nome, poderamos implementar dessa forma:

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 11/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

1 classAnimal{
2 constructor(name){
3 this._name=name
4 }
5
6 getName(){
7 returnthis._name
8 }
9
10 setName(name){
11 this._name=name
12 }
13 }

O mtodo constructor tem como tarefa fazer a inicializao da

instncia. Ele chamado automaticamente na criao da mesma e
garante que ela esteja em um estado vlido.

getters/setters
Como getters e setters so muito comuns na utilizao de classes, o
ES6 veio com um syntax sugar para lidar com os mesmos. Ento
podemos reescrever o exemplo anterior dessa forma melhorada:

1 classAnimal{
2 constructor(name){
3 this._name=name
4 }
5
6 getname(){
7 returnthis._name
8 }
9
10 setname(name){
11 this._name=name
12 }
13 }

Lembrando que a principal funo dos getters/setters proteger os

dados internos das instncias de um objeto.

Se voc est se perguntando o porqu do underscore antes da

propriedade name, a resposta simples de que isso uma conveno
que indica que essa varivel deve ser mantida privada.

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 12/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

herana
Vamos pensar em um caso em que alm de um nome, um Animal
tambm ter um novo comportamento: emitir um som.

Podemos utilizar o conceito de herana com o extends e implementar

dessa forma:

1 classAnimal{
2 constructor(name){
3 this._name=name
4 }
5
6 speak(){
7 console.log(`${this._name}makesanoise`)
8 }
9 }
10
11 classDogextendsAnimal{
12 speak(){
13 console.log(`${this._name}barks`)
14 }
15 }
16
17 classCatextendsAnimal{
18 speak(){

Para os leitores que querem ir mais a fundo em relao as classes em

ES6, sugiro esses dois posts:

Object-Oriented JavaScript: A Deep Dive E6 Classes

ES6 Classes

. . .

Mdulos
Um dos grandes problemas do JavaScript era no ter um sistema
built-in de mdulos assim como a maioria das linguagens possui.

Dessa ausncia surgiram algumas possveis solues como CommonJS

e AMD. Se voc quiser saber mais sobre esses dois ltimos, eu sugiro
essa thread no Stack Overow.

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 13/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

Nesse post falarei apenas sobre o novo sistema de mdulos do ES6.

ES6 Modules
A maioria dos desenvolvedores que j trabalhou em projetos grandes
sabe a importncia dos mdulos: organizar o sistema, aumentar o
reuso e diminuir a complexidade de cada pequeno trecho do seu code
base.

export/import
Exportar mdulos bem simples. Aps criarmos uma funo podemos
simplesmente adicionar a palavra export antes da denio da mesma:

1 //lib.js
2 exportfunctionsum(x,y){
3 returnx+y
4 }

E para importar esse mdulo em outro arquivo tambm simples:

1 import{sum}from'lib'
2
3 sum(1,2)//3

Com mltiplas funes bem semelhante:

1 //lib.js
2 exportfunctionsum(x,y){
3 returnx+y
4 }
5
6 exportfunctionmult(x,y){

E para importar:

1 import{sum,mult}from'lib'
2
3 sum(1,2)//3
4 mult(1,2)//2

Podemos tambm importar o mdulo completo:

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 14/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

1 import*aslibfrom'lib'
2
3 lib.sum(1,2)//3
4 lib.mult(1,2)//2

classes
Para importar e exportar classes tambm no h muitas mudanas,
basta criar uma classe com o export na frente:

1 //developer.js
2 exportclassDeveloper{
3 constructor(name){
4 this._name=name
5 }
6
7 getname(){
8 returnthis._name

Agora podemos import-la assim:

1 import{Developer}from'developer'
2
3 constdev=newDeveloper('Matheus')
4 dev.name//'Matheus'

default
comum termos a necessidade de exportar apenas uma funo/classe
por arquivo. Nesse cenrio podemos utilizar a exportao default:

1 //square.js
2 exportdefaultfunction(x){
3 returnx*x
4 }

Uma das vantagens que o cliente (quem faz o import) que vai setar
o nome do mdulo como bem quiser:

1 importsquarefrom'square'
2
3 square(2)//4

. . .
Caso Real
https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 15/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

Caso Real
Para ver um caso real de todas as features citadas acima (exceto
classes) s dar uma lida no projeto open source que estou
trabalhando recentemente, o pareto.js.

Ele semelhante ao underscore/lodash s que tem somente os poucos

mtodos que ns realmente precisamos no dia-a-dia, foi desenvolvido
com as tecnologias mais novas: ES6, Babel e Webpack e alm disso
encoraja o uso de functional programming.

. . .

Se voc gostou do post no se esquea de dar um aqui

embaixo!
E se quiser receber de antemo mais posts como esse, assine
nossa newsletter.

JSCasts
difcil encontrar contedo bom e atualizado em portugus. Com isso
em mente criamos o JSCasts, onde voc vai se manter em dia com o
JavaScript e todo o seu ecossistema de forma fcil e interativa.

Cursos:

Comeando com React.js

React.js com ES6

Obrigado por ler!

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 16/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 17/18
2017516 OGuiadoES6:TUDOquevocprecisasaberMatheusLimaMedium

https://medium.com/@matheusml/oguiadoes6tudoquevoc%C3%AAprecisasaber8c287876325f 18/18