¿Qué ES 6? - Introducción a ECMAScript y Babel

¿Qué ES 6?
Introducción a ECMAScript 6 y Babel
(aka 6to5)
/
Dan Zajdband @dzajdband

View Slide

getmango.com

View Slide

¿Qué es ES?
1995: Sun y Netscape anuncian JavaScript para Netscape
2.0
1996: Microsoft introduce JScript para IE 3.0
1996/97: Netscape estandariza JavaScript bajo el nombre
de ECMAScript

View Slide

ECMAScript
"ECMAScript was always an unwanted trade
name that sounds like a skin disease."
Brendan Eich

View Slide

ECMAScript
1999: ES3 introduce expresiones regulares y manejo de
excepciones entre otras features.
2008: La especificación de ES4 es abandonada por
razones políticas.
2009/11: ES5 trae strict mode, soporte para JSON, getters
& setters...
2015: ES6 la especificación está pautada para ser
presentada a mitad de este año.
(2015-): ES7 Work in progress.

View Slide

Evolución

View Slide

ECMAScript 6
Metas
Brindar una base para la creación de aplicaciones
complejas
Agregar utilidades del lenguaje
Mantener compatibilidad con ES5

View Slide

ECMAScript 6
Overview*

View Slide

*Ordenado por nivel de
polémica entre los presentes
Un poquito de quilombo sin romper nada

View Slide

Variables &
scoping

View Slide

let vs. var - Block scoping
/
/ E
S
6
i
f
(
t
r
u
e
) {
v
a
r x = 1
;
l
e
t y = 2
;
}
c
o
n
s
o
l
e
.
l
o
g
(
x
)
; /
/ 1
c
o
n
s
o
l
e
.
l
o
g
(
y
)
; /
/ y i
s n
o
t d
e
f
i
n
e
d
/
/ E
S
5
i
f (
t
r
u
e
) {
v
a
r x = 1
;
v
a
r _
y = 2
;
}
c
o
n
s
o
l
e
.
l
o
g
(
x
)
; /
/ 1
c
o
n
s
o
l
e
.
l
o
g
(
y
)
; /
/ y i
s n
o
t d
e
f
i
n
e
d

View Slide

const
c
o
n
s
t P
I = 3
.
1
4
;
P
I = 8
; /
/ E
r
r
o
r

View Slide

Object literals

View Slide

Shorthands
/
/ E
S
6
l
e
t f
o
o = '
b
a
r
'
;
l
e
t x = {
m
y
F
u
n
c
(
) {
r
e
t
u
r
n 3
;
}
,
f
o
o
}
;
x
.
f
o
o
; /
/ b
a
r
x
.
m
y
F
u
n
c
(
)
; /
/ 3
/
/ E
S
5
v
a
r f
o
o = "
b
a
r
"
;
v
a
r x = {
m
y
F
u
n
c
: f
u
n
c
t
i
o
n m
y
F
u
n
c
(
) {
r
e
t
u
r
n 3
;
}
,
f
o
o
: f
o
o
}
;
x
.
f
o
o
; /
/ b
a
r
x
.
m
y
F
u
n
c
(
)
; /
/ 3

View Slide

Computed property keys
/
/ E
S
6
l
e
t n
o
m
b
r
e = '
M
é
t
o
d
o
'
;
l
e
t y = {
[
'
m
i
' + n
o
m
b
r
e
]
: "
E
s
t
e e
s m
i n
o
m
b
r
e
"
}
;
x
.
m
i
N
o
m
b
r
e
; /
/ "
E
s
t
e e
s m
i n
o
m
b
r
e
"
/
/ E
S
5
v
a
r _
d
e
f
i
n
e
P
r
o
p
e
r
t
y = f
u
n
c
t
i
o
n (
o
b
j
, k
e
y
, v
a
l
u
e
) {
r
e
t
u
r
n O
b
j
e
c
t
.
d
e
f
i
n
e
P
r
o
p
e
r
t
y
(
o
b
j
, k
e
y
, {
v
a
l
u
e
: v
a
l
u
e
,
e
n
u
m
e
r
a
b
l
e
: t
r
u
e
,
c
o
n
f
i
g
u
r
a
b
l
e
: t
r
u
e
,
w
r
i
t
a
b
l
e
: t
r
u
e
}
)
;
}
;
v
a
r n
o
m
b
r
e = "
M
é
t
o
d
o
"
;
v
a
r y = _
d
e
f
i
n
e
P
r
o
p
e
r
t
y
(
{
}
, "
m
i
" + n
o
m
b
r
e
, "
E
s
t
e e
s m
i n
o
m
b
r
e
"
)
;
x
.
m
i
N
o
m
b
r
e
; /
/ "
E
s
t
e e
s m
i n
o
m
b
r
e
"

View Slide

Destructuring

View Slide

Object destructuring
/
/ E
S
6
l
e
t f
u
l
l
N
a
m
e = {
"
f
i
r
s
t
"
: "
C
o
s
m
e
"
,
"
l
a
s
t
"
: "
F
u
l
a
n
i
t
o
"
}
;
c
o
n
s
t {
f
i
r
s
t
: F
, l
a
s
t
: L
} = f
u
l
l
N
a
m
e
;
l
e
t {
f
i
r
s
t
: f
, l
a
s
t
: l
} = f
u
l
l
N
a
m
e
;
f
; /
/ C
o
s
m
e
l
; /
/ F
u
l
a
n
i
t
o
f = "
C
a
r
l
o
s
"
;
F = "
C
a
r
l
o
s
"
;
/
/ e
r
r
o
r
: "
F
" i
s r
e
a
d
-
o
n
l
y
/
/ E
S
5
v
a
r f
u
l
l
N
a
m
e = {
f
i
r
s
t
: "
C
o
s
m
e
"
,
l
a
s
t
: "
F
u
l
a
n
i
t
o
"
}
;
v
a
r F = f
u
l
l
N
a
m
e
.
f
i
r
s
t
;
v
a
r L = f
u
l
l
N
a
m
e
.
l
a
s
t
;
v
a
r f = f
u
l
l
N
a
m
e
.
f
i
r
s
t
;
v
a
r l = f
u
l
l
N
a
m
e
.
l
a
s
t
;
f
; /
/ C
o
s
m
e
l
; /
/ F
u
l
a
n
i
t
o
f = "
C
a
r
l
o
s
"
;
F = "
C
a
r
l
o
s
"
;
/
/ e
r
r
o
r
: "
F
" i
s r
e
a
d
-
o
n
l
y

View Slide

Array destructuring
/
/ E
S
6
l
e
t f = "
C
o
s
m
e
"
;
l
e
t l = "
F
u
l
a
n
i
t
o
"
;
[
f
, l
] = [
l
, f
]
;
f
; /
/ F
u
l
a
n
i
t
o
l
; /
/ C
o
s
m
e
/
/ E
S
5
v
a
r f = "
C
o
s
m
e
"
;
v
a
r l = "
F
u
l
a
n
i
t
o
"
;
v
a
r _
r
e
f = [
l
, f
]
;
v
a
r _
r
e
f
2 = _
s
l
i
c
e
d
T
o
A
r
r
a
y
(
_
r
e
f
, 2
)
;
f = _
r
e
f
2
[
0
]
;
l = _
r
e
f
2
[
1
]
;
f
; /
/ F
u
l
a
n
i
t
o
l
; /
/ C
o
s
m
e

View Slide

Multiple return values
/
/ E
S
6
f
u
n
c
t
i
o
n m
u
l
t
i
R
e
t
(
) {
l
e
t x = "
f
o
o
"
;
l
e
t y = "
b
a
r
"
;
r
e
t
u
r
n {
x
, y
}
;
}
l
e
t {
x
, y
} = m
u
l
t
i
R
e
t
(
)
;
x
; /
/ "
f
o
o
"
y
; /
/ "
b
a
r
"
/
/ E
S
5
f
u
n
c
t
i
o
n m
u
l
t
i
R
e
t
(
) {
v
a
r x = "
f
o
o
"
;
v
a
r y = "
b
a
r
"
;
r
e
t
u
r
n { x
: x
, y
: y }
;
}
v
a
r _
m
u
l
t
i
R
e
t = m
u
l
t
i
R
e
t
(
)
;
v
a
r x = _
m
u
l
t
i
R
e
t
.
x
;
v
a
r y = _
m
u
l
t
i
R
e
t
.
y
;
x
; /
/ "
f
o
o
"
y
; /
/ "
b
a
r
"

View Slide

Parameter
handling

View Slide

Default, Named, Rest and
Spread parameters
/
/ E
S
6
f
u
n
c
t
i
o
n m
i
S
P
r
i
n
t
f
(
s
t
r
=
'
C
u
a
l
q
u
i
e
r c
o
s
a
'
, {
u
p
p
e
r
c
a
s
e
}
, .
.
.
f
o
r
m
a
t
) {
f
o
r
(
l
e
t p
a
r
a
m
e
t
e
r o
f f
o
r
m
a
t
) {
s
t
r = s
t
r
.
r
e
p
l
a
c
e
(
/
%
s
/
, p
a
r
a
m
e
t
e
r
)
;
}
i
f
(
u
p
p
e
r
c
a
s
e
) s
t
r = s
t
r
.
t
o
U
p
p
e
r
C
a
s
e
(
)
;
r
e
t
u
r
n s
t
r
;
}
m
i
S
P
r
i
n
t
f
(
'
H
o
l
a m
e l
l
a
m
o %
s y t
e
n
g
o %
s a
ñ
o
s
.
'
,
{
u
p
p
e
r
c
a
s
e
: t
r
u
e
, f
o
o
: '
b
a
r
'
}
, '
D
a
n
'
, 2
5
)
;
/
/ "
H
O
L
A M
E L
L
A
M
O D
A
N Y T
E
N
G
O 2
5 A
Ñ
O
S
"
l
e
t b
l
a
;
m
i
S
P
r
i
n
t
f
(
.
.
.
[
b
l
a
, {
u
p
p
e
r
c
a
s
e
: f
a
l
s
e
, f
o
o
: '
b
a
r
'
}
, '
D
a
n
'
, 2
5
]
)
;
/
/ "
C
u
a
l
q
u
i
e
r c
o
s
a
"

View Slide

Default, Named, Rest and
Spread parameters
/
/ E
S
5
f
u
n
c
t
i
o
n m
i
S
P
r
i
n
t
f
(
_
x
, _
r
e
f
) {
f
o
r (
v
a
r _
l
e
n = a
r
g
u
m
e
n
t
s
.
l
e
n
g
t
h
, f
o
r
m
a
t = A
r
r
a
y
(
_
l
e
n > 2 ? _
l
e
n - 2 : 0
)
, _
k
e
y
f
o
r
m
a
t
[
_
k
e
y - 2
] = a
r
g
u
m
e
n
t
s
[
_
k
e
y
]
;
}
v
a
r s
t
r = a
r
g
u
m
e
n
t
s
[
0
] =
=
= u
n
d
e
f
i
n
e
d ? "
C
u
a
l
q
u
i
e
r c
o
s
a
" : a
r
g
u
m
e
n
t
s
[
0
]
;
v
a
r u
p
p
e
r
c
a
s
e = _
r
e
f
.
u
p
p
e
r
c
a
s
e
;
f
o
r (
v
a
r _
i
t
e
r
a
t
o
r = f
o
r
m
a
t
[
S
y
m
b
o
l
.
i
t
e
r
a
t
o
r
]
(
)
, _
s
t
e
p
; !
(
_
s
t
e
p = _
i
t
e
r
a
t
o
r
.
n
e
x
t
v
a
r p
a
r
a
m
e
t
e
r = _
s
t
e
p
.
v
a
l
u
e
;
s
t
r = s
t
r
.
r
e
p
l
a
c
e
(
/
%
s
/
, p
a
r
a
m
e
t
e
r
)
;
}
i
f (
u
p
p
e
r
c
a
s
e
) s
t
r = s
t
r
.
t
o
U
p
p
e
r
C
a
s
e
(
)
;
r
e
t
u
r
n s
t
r
;
}
m
i
S
P
r
i
n
t
f
(
"
H
o
l
a m
e l
l
a
m
o %
s y t
e
n
g
o %
s a
ñ
o
s
.
"
, { u
p
p
e
r
c
a
s
e
: t
r
u
e
, f
o
o
: "
b
a
r
" }
, "
/
/ "
H
O
L
A M
E L
L
A
M
O D
A
N Y T
E
N
G
O 2
5 A
Ñ
O
S
"
v
a
r b
l
a = u
n
d
e
f
i
n
e
d
;

View Slide

Arrow
functions

View Slide

Shorthand syntax
/
/ E
S
6
l
e
t d
a
t
a = [
1
, 2
, 3
]
;
l
e
t d
o
u
b
l
e
s = d
a
t
a
.
m
a
p
(
n
u
m =
> n
u
m * 2
)
; /
/ [
2
, 4
, 6
]
d
o
u
b
l
e
s
.
f
o
r
E
a
c
h
(
(
e
l
e
m
e
n
t
, i
n
d
e
x
) =
> {
e
l
e
m
e
n
t = e
l
e
m
e
n
t * 2
;
d
o
S
o
m
e
t
h
i
n
g
(
e
l
e
m
e
n
t
)
;
}
)
;
m
y
O
b
j
.
o
n
(
'
d
a
t
a
'
, (
) =
> c
o
n
s
o
l
e
.
l
o
g
(
d
o
u
b
l
e
s
)
)
;
/
/ E
S
5
v
a
r d
a
t
a = [
1
, 2
, 3
]
;
v
a
r d
o
u
b
l
e
s = d
a
t
a
.
m
a
p
(
f
u
n
c
t
i
o
n (
n
u
m
) {
r
e
t
u
r
n n
u
m * 2
;
}
)
; /
/ [
2
, 4
, 6
]
d
o
u
b
l
e
s
.
f
o
r
E
a
c
h
(
f
u
n
c
t
i
o
n (
e
l
e
m
e
n
t
, i
n
d
e
x
) {
e
l
e
m
e
n
t = e
l
e
m
e
n
t * 2
;
d
o
S
o
m
e
t
h
i
n
g
(
e
l
e
m
e
n
t
)
;
}
)
;
m
y
O
b
j
.
o
n
(
"
d
a
t
a
"
, f
u
n
c
t
i
o
n (
) {
r
e
t
u
r
n c
o
n
s
o
l
e
.
l
o
g
(
d
o
u
b
l
e
s
)
;
}
)
;

View Slide

Lexical this
/
/ E
S
6
c
o
n
s
t a
n
c
h
o
r = d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
'
c
l
i
c
k
m
e
'
)
;
f
u
n
c
t
i
o
n m
y
C
o
m
p
o
n
e
n
t
(
) {
a
n
c
h
o
r
.
a
d
d
E
v
e
n
t
L
i
s
t
e
n
e
r
(
'
c
l
i
c
k
'
, (
) =
> t
h
i
s
.
o
n
C
l
i
c
k
(
)
)
;
}
/
/ E
S
5
v
a
r a
n
c
h
o
r = d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
"
c
l
i
c
k
m
e
"
)
;
f
u
n
c
t
i
o
n m
y
C
o
m
p
o
n
e
n
t
(
) {
v
a
r _
t
h
i
s = t
h
i
s
;
a
n
c
h
o
r
.
a
d
d
E
v
e
n
t
L
i
s
t
e
n
e
r
(
"
c
l
i
c
k
"
, f
u
n
c
t
i
o
n (
) {
r
e
t
u
r
n _
t
h
i
s
.
o
n
C
l
i
c
k
(
)
;
}
)
;
}

View Slide

Classes

View Slide

Basics
/
/ E
S
6
c
l
a
s
s P
l
a
y
e
r {
c
o
n
s
t
r
u
c
t
o
r
(
n
a
m
e
, s
k
i
l
l
s
=
1
0
) {
t
h
i
s
.
n
a
m
e = n
a
m
e
;
t
h
i
s
.
s
k
i
l
l
s = s
k
i
l
l
s
;
}
m
a
k
e
G
o
a
l
(
) {
t
h
i
s
.
s
k
i
l
l
s +
= 5
;
}
}

View Slide

Basics
/
/ E
S
5
v
a
r P
l
a
y
e
r = (
f
u
n
c
t
i
o
n (
) {
f
u
n
c
t
i
o
n P
l
a
y
e
r
(
n
a
m
e
) {
v
a
r s
k
i
l
l
s = a
r
g
u
m
e
n
t
s
[
1
] =
=
= u
n
d
e
f
i
n
e
d ? 1
0 : a
r
g
u
m
e
n
t
s
[
1
]
;
_
c
l
a
s
s
C
a
l
l
C
h
e
c
k
(
t
h
i
s
, P
l
a
y
e
r
)
;
t
h
i
s
.
n
a
m
e = n
a
m
e
;
t
h
i
s
.
s
k
i
l
l
s = s
k
i
l
l
s
;
}
_
p
r
o
t
o
t
y
p
e
P
r
o
p
e
r
t
i
e
s
(
P
l
a
y
e
r
, n
u
l
l
, {
m
a
k
e
G
o
a
l
: {
v
a
l
u
e
: f
u
n
c
t
i
o
n m
a
k
e
G
o
a
l
(
) {
t
h
i
s
.
s
k
i
l
l
s +
= 5
;
}
,
w
r
i
t
a
b
l
e
: t
r
u
e
,
c
o
n
f
i
g
u
r
a
b
l
e
: t
r
u
e
}
}
)
;
r
e
t
u
r
n P
l
a
y
e
r
;
}
)
(
)
;

View Slide

Static methods
c
l
a
s
s P
l
a
y
e
r {
c
o
n
s
t
r
u
c
t
o
r
(
n
a
m
e
, s
k
i
l
l
s
=
1
0
) {
t
h
i
s
.
n
a
m
e = n
a
m
e
;
t
h
i
s
.
s
k
i
l
l
s = s
k
i
l
l
s
;
}
s
t
a
t
i
c d
o
r
s
a
l
(
) {
r
e
t
u
r
n M
a
t
h
.
f
l
o
o
r
(
M
a
t
h
.
r
a
n
d
o
m
(
)
)
;
}
}

View Slide

Subclassing
c
l
a
s
s M
i
l
i
t
o e
x
t
e
n
d
s P
l
a
y
e
r {
c
o
n
s
t
r
u
c
t
o
r
(
f
n
a
m
e
) {
l
e
t s
k
i
l
l
s = 2
5
;
s
k
i
l
l
s = f
n
a
m
e =
=
= '
G
a
b
r
i
e
l
' ? 5 : 8
0
;
s
u
p
e
r
(
f
n
a
m
e
, '
M
i
l
i
t
o
'
, s
k
i
l
l
s
)
;
}
m
a
k
e
G
o
a
l
(
) {
i
f
(
t
h
i
s
.
f
n
a
m
e =
=
= '
D
i
e
g
o
'
) {
s
u
p
e
r
.
m
a
k
e
G
o
a
l
(
)
;
}
}
}

View Slide

Modules

View Slide

Named exports
/
/ E
S
6
/
/ m
e
n
u
.
j
s
e
x
p
o
r
t f
u
n
c
t
i
o
n g
e
t
I
t
e
m
(
i
n
d
e
x
) {
r
e
t
u
r
n i
t
e
m
s
[
i
n
d
e
x
]
;
}
e
x
p
o
r
t c
o
n
s
t P
I = 3
.
1
4
;
/
/ m
a
i
n
.
j
s
i
m
p
o
r
t {
g
e
t
I
t
e
m
} f
r
o
m '
m
e
n
u
'
;
g
e
t
I
t
e
m
(
1
)
;
i
m
p
o
r
t * a
s m
e
n
u f
r
o
m '
m
e
n
u
'
;
m
e
n
u
.
g
e
t
I
t
e
m
(
1
)
;
/
/ E
S
5
/
/ m
e
n
u
.
j
s
e
x
p
o
r
t
s
.
g
e
t
I
t
e
m = g
e
t
I
t
e
m
;
f
u
n
c
t
i
o
n g
e
t
I
t
e
m
(
i
n
d
e
x
) {
r
e
t
u
r
n i
t
e
m
s
[
i
n
d
e
x
]
;
}
v
a
r P
I = e
x
p
o
r
t
s
.
P
I = 3
.
1
4
;
/
/ m
a
i
n
.
j
s
v
a
r _
m
e
n
u = r
e
q
u
i
r
e
(
"
m
e
n
u
"
)
;
v
a
r g
e
t
I
t
e
m = _
m
e
n
u
.
g
e
t
I
t
e
m
;
g
e
t
I
t
e
m
(
1
)
;
v
a
r m
e
n
u = r
e
q
u
i
r
e
(
"
m
e
n
u
"
)
;
m
e
n
u
.
g
e
t
I
t
e
m
(
1
)
;

View Slide

Default exports
/
/ E
S
6
/
/ m
e
n
u
.
j
s
e
x
p
o
r
t d
e
f
a
u
l
t g
e
t
I
t
e
m
(
i
n
d
e
x
) {
r
e
t
u
r
n i
t
e
m
s
[
i
n
d
e
x
]
;
}
/
/ m
a
i
n
.
j
s
i
m
p
o
r
t g
e
t
I
t
e
m f
r
o
m '
m
e
n
u
'
;
g
e
t
I
t
e
m
(
1
)
;
/
/ E
S
5
/
/ m
e
n
u
.
j
s
m
o
d
u
l
e
.
e
x
p
o
r
t
s = g
e
t
I
t
e
m
;
f
u
n
c
t
i
o
n g
e
t
I
t
e
m
(
i
n
d
e
x
) {
r
e
t
u
r
n i
t
e
m
s
[
i
n
d
e
x
]
;
}
/
/ m
a
i
n
.
j
s
v
a
r g
e
t
I
t
e
m = r
e
q
u
i
r
e
(
'
m
e
n
u
'
)
;
g
e
t
I
t
e
m
(
1
)
;

View Slide

Template
strings

View Slide

Interpolation
/
/ E
S
6
c
o
n
s
t c
h
a
m
p
i
o
n = `
R
a
c
i
n
g
`
;
c
o
n
s
t m
y
S
t
r
i
n
g = `
e
s
t
e e
s
m
i s
t
r
i
n
g
m
u
l
t
i
l
i
n
e
a
.
$
{
c
h
a
m
p
i
o
n
} C
a
m
p
e
ó
n
!
`
;
/
/ E
S
5
c
o
n
s
t c
h
a
m
p
i
o
n = '
R
a
c
i
n
g
'
;
c
o
n
s
t m
y
S
t
r
i
n
g = "
\
n
e
s
t
e e
s
\
n
m
i s
t
r
i
n
g
\
n

View Slide

Tagged template strings
f
u
n
c
t
i
o
n t
a
g
(
s
t
r
i
n
g
s
, .
.
.
v
a
l
u
e
s
) {
a
s
s
e
r
t
(
s
t
r
i
n
g
s
[
0
] =
=
= '
a
'
)
;
a
s
s
e
r
t
(
s
t
r
i
n
g
s
[
1
] =
=
= '
b
'
)
;
a
s
s
e
r
t
(
v
a
l
u
e
s
[
0
] =
=
= 0
)
;
r
e
t
u
r
n '
w
h
a
t
e
v
e
r
'
;
}
t
a
g `
a
$
{ 4
2 }
b
` /
/ "
w
h
a
t
e
v
e
r
"

View Slide

stdlib

View Slide

Maps
l
e
t m
a
p = n
e
w M
a
p
(
)
;
l
e
t o
b
j = {
}
;
m
a
p
.
s
e
t
(
o
b
j
, 1
2
3
)
;
m
a
p
.
g
e
t
(
o
b
j
)
; /
/ 1
2
3
m
a
p
.
h
a
s
(
o
b
j
)
; /
/ t
r
u
e
m
a
p
.
d
e
l
e
t
e
(
o
b
j
)
;
f
o
r
(
l
e
t [
k
, v
] o
f m
a
p
) {
c
o
n
s
o
l
e
.
l
o
g
(
k
, v
)
;
}

View Slide

Sets
l
e
t s
e
t = n
e
w S
e
t
(
)
;
s
e
t
.
a
d
d
(
'
h
o
l
a
'
)
;
s
e
t
.
a
d
d
(
'
m
u
n
d
o
'
)
;
s
e
t
.
a
d
d
(
'
h
o
l
a
'
)
;
f
o
r
(
l
e
t e
l
e
m o
f s
e
t
) {
c
o
n
s
o
l
e
.
l
o
g
(
e
l
e
m
)
;
} /
/ "
h
o
l
a m
u
n
d
o
"
l
e
t u
n
i
q
u
e = [
.
.
.
n
e
w S
e
t
(
[
1
,
2
,
3
,
5
,
1
,
2
,
3
,
1
,
5
]
)
;
]
; /
/ [
1
,
2
,
3
,
5
]

View Slide

Object.assign
l
e
t o
b
j = {
x
: 8
, y
: 1
0
}
;
O
b
j
e
c
t
.
a
s
s
i
g
n
(
o
b
j
, {
y
: 5
}
)
;
o
b
j
; /
/ {
x
: 8
: y 5
}

View Slide

Strings utilities
`
$
{
'
n
a
n
'
.
r
e
p
e
a
t
(
6
)
}
a B
a
t
m
a
n
`
; /
/ n
a
n
a
n
a
n
a
n
a
n
a
n
a
n
a
n
a
n
a B
a
t
m
a
n
'
a
b
c
'
.
s
t
a
r
t
s
W
i
t
h
(
'
a
b
'
)
; /
/ t
r
u
e
'
a
b
c
'
.
e
n
d
s
W
i
t
h
(
'
b
c
'
)
; /
/ t
r
u
e
'
n
e
u
q
u
e
n
'
.
i
n
c
l
u
d
e
s
(
'
u
q
u
'
)
; /
/ t
r
u
e
http://esdiscuss.org/topic/having-a-non-enumerable-
array-prototype-contains-may-not-be-web-compatible

View Slide

Symbols

View Slide

Symbols
c
o
n
s
t M
Y
_
K
E
Y = S
y
m
b
o
l
(
)
;
l
e
t o
b
j = {
}
;
o
b
j
[
M
Y
_
K
E
Y
] = 1
2
3
;
c
o
n
s
o
l
e
.
l
o
g
(
o
b
j
[
M
Y
_
K
E
Y
]
)
; /
/ 1
2
3

View Slide

Iteration

View Slide

Iterables
l
e
t f
i
b
o
n
a
c
c
i = {
[
S
y
m
b
o
l
.
i
t
e
r
a
t
o
r
]
(
) {
l
e
t p
r
e = 0
, c
u
r = 1
;
r
e
t
u
r
n {
n
e
x
t
(
) {
[
p
r
e
, c
u
r
] = [
c
u
r
, p
r
e + c
u
r
]
;
r
e
t
u
r
n { d
o
n
e
: f
a
l
s
e
, v
a
l
u
e
: c
u
r }
}
}
}
}
f
o
r (
v
a
r n o
f f
i
b
o
n
a
c
c
i
) {
/
/ t
r
u
n
c
a
t
e t
h
e s
e
q
u
e
n
c
e a
t 1
0
0
0
i
f (
n > 1
0
0
0
)
b
r
e
a
k
;
}

View Slide

for-of
/
/ E
S
6
l
e
t i
t
e
m
s = [
1
,
2
,
4
]
;
f
o
r
(
l
e
t i
t
e
m o
f i
t
e
m
s
) {
c
o
n
s
o
l
e
.
l
o
g
(
i
t
e
m
)
;
}
/
/ E
S
5
v
a
r i
t
e
m
s = [
1
, 2
, 4
]
;
f
o
r (
v
a
r _
i
t
e
r
a
t
o
r = i
t
e
m
s
[
S
y
m
b
o
l
.
i
t
e
r
a
t
o
r
]
(
)
, _
s
t
e
p
; !
(
_
s
t
e
p = _
i
t
e
r
a
t
o
r
.
n
e
x
t
(
)
)
v
a
r i
t
e
m = _
s
t
e
p
.
v
a
l
u
e
;
c
o
n
s
o
l
e
.
l
o
g
(
i
t
e
m
)
;
}

View Slide

Comprehensions
v
a
r s
q
u
a
r
e
d = [ f
o
r (
x o
f [
1
,
2
,
3
,
4
,
5
]
) i
f (
x > 2
) x * x ]
;

View Slide

Generators

View Slide

Generators
v
a
r f
i
b
o
n
a
c
c
i = {
[
S
y
m
b
o
l
.
i
t
e
r
a
t
o
r
]
: f
u
n
c
t
i
o
n
*
(
) {
v
a
r p
r
e = 0
, c
u
r = 1
;
f
o
r (
;
;
) {
v
a
r t
e
m
p = p
r
e
;
p
r
e = c
u
r
;
c
u
r +
= t
e
m
p
;
y
i
e
l
d c
u
r
;
}
}
}
f
o
r (
v
a
r n o
f f
i
b
o
n
a
c
c
i
) {
/
/ t
r
u
n
c
a
t
e t
h
e s
e
q
u
e
n
c
e a
t 1
0
0
0
i
f (
n > 1
0
0
0
)
b
r
e
a
k
;
c
o
n
s
o
l
e
.
l
o
g
(
n
)
;
}

View Slide

Otros
Promises
Proxies
Tail call optimization

View Slide

Use next generation JavaScript, today.

View Slide

Babel
Transpiler de ES6+ a ES5
Genera código claro y legible
Funciona tanto en node.js como en el navegador
Extensible via plugins (hay muchos andando)
Comunidad creciente

View Slide

Features de ES7
async/await
f
u
n
c
t
i
o
n p
r
o
m
i
s
i
n
g
O
p
e
r
a
t
i
o
n
(
) {
r
e
t
u
r
n n
e
w P
r
o
m
i
s
e
(
f
u
n
c
t
i
o
n
(
r
e
s
o
l
v
e
, r
e
j
e
c
t
) {
s
e
t
T
i
m
e
o
u
t
(
f
u
n
c
t
i
o
n
(
) {
i
f
( M
a
t
h
.
r
o
u
n
d
(
M
a
t
h
.
r
a
n
d
o
m
(
)
) )
r
e
s
o
l
v
e
(
'
S
u
c
c
e
s
s
!
'
)
;
e
l
s
e
r
e
j
e
c
t
(
'
F
a
i
l
u
r
e
!
'
)
;
}
, 1
0
0
0
)
;
}
}
a
s
y
n
c f
u
n
c
t
i
o
n f
o
o
(
) {
v
a
r m
e
s
s
a
g
e = a
w
a
i
t p
r
o
m
i
s
i
n
g
O
p
e
r
a
t
i
o
n
(
)
;
c
o
n
s
o
l
e
.
l
o
g
(
m
e
s
s
a
g
e
)
;
}

View Slide

Referencias
ES6 Rocks
Understanding ES6
Blog de Axel Rauschmayer
Tour de Babel
ES6 Overview

View Slide

Preguntas?

View Slide

Gracias

View Slide

¿Qué ES 6? - Introducción a ECMAScript y Babel

¿Qué ES 6? - Introducción a ECMAScript y Babel

Dan Zajdband

More Decks by Dan Zajdband

Other Decks in Technology

Featured

Transcript