ECMAScript 6 - Introduction

ECMAScript 6
Drama in 5 acts
Piotr Lewandowski
20.03.2015

View Slide

All temporary solutions
become final
Act 1 - Preludium

View Slide

ES 4

View Slide

ES 4
ES 6

View Slide

ES 4
ES 6
ES 2015

View Slide

Make JavaScript better
for complex application
for libraries
as target of code generators

View Slide

Pave the Cowpaths
and don't break the web

View Slide

View Slide

Modules
Act 2

View Slide

Design goals
Compact syntax
Support cyclic dependencies
Asynchronous loading
Configurable

View Slide

Design goals
Compact syntax
Support cyclic dependencies
Asynchronous loading
Configurable
/
/ l
i
b
/
m
a
t
h
.
j
s
e
x
p
o
r
t f
u
n
c
t
i
o
n s
u
m
(
x
, y
) {
r
e
t
u
r
n x + y
;
}
e
x
p
o
r
t v
a
r p
i = 3
.
1
4
1
5
9
3
;
/
/ a
p
p
.
j
s
i
m
p
o
r
t * a
s m
a
t
h f
r
o
m "
l
i
b
/
m
a
t
h
"
;
m
a
t
h
.
s
u
m
(
2
2
, 2
0
)
; /
/ 4
2

View Slide

/
/ D
e
f
a
u
l
t e
x
p
o
r
t
s a
n
d n
a
m
e
d e
x
p
o
r
t
s
i
m
p
o
r
t m
y
L
i
b f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
i
m
p
o
r
t { f
u
n
c
t
i
o
n
1
, f
u
n
c
t
i
o
n
2 } f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
Importing

View Slide

/
/ D
e
f
a
u
l
t e
x
p
o
r
t
s a
n
d n
a
m
e
d e
x
p
o
r
t
s
i
m
p
o
r
t m
y
L
i
b f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
i
m
p
o
r
t { f
u
n
c
t
i
o
n
1
, f
u
n
c
t
i
o
n
2 } f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
Importing
/
/ R
e
n
a
m
i
n
g
: i
m
p
o
r
t n
a
m
e
d
1 a
s m
y
N
a
m
e
d
1
i
m
p
o
r
t { f
u
n
c
t
i
o
n
1 a
s f
n
, f
u
n
c
t
i
o
n
2 } f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;

View Slide

/
/ D
e
f
a
u
l
t e
x
p
o
r
t
s a
n
d n
a
m
e
d e
x
p
o
r
t
s
i
m
p
o
r
t m
y
L
i
b f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
i
m
p
o
r
t { f
u
n
c
t
i
o
n
1
, f
u
n
c
t
i
o
n
2 } f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
Importing
/
/ R
e
n
a
m
i
n
g
: i
m
p
o
r
t n
a
m
e
d
1 a
s m
y
N
a
m
e
d
1
i
m
p
o
r
t { f
u
n
c
t
i
o
n
1 a
s f
n
, f
u
n
c
t
i
o
n
2 } f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
/
/ I
m
p
o
r
t
i
n
g t
h
e m
o
d
u
l
e a
s a
n o
b
j
e
c
t
/
/ (
w
i
t
h o
n
e p
r
o
p
e
r
t
y p
e
r n
a
m
e
d e
x
p
o
r
t
)
i
m
p
o
r
t * a
s m
y
l
i
b f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;

View Slide

/
/ D
e
f
a
u
l
t e
x
p
o
r
t
s a
n
d n
a
m
e
d e
x
p
o
r
t
s
i
m
p
o
r
t m
y
L
i
b f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
i
m
p
o
r
t { f
u
n
c
t
i
o
n
1
, f
u
n
c
t
i
o
n
2 } f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
Importing
/
/ R
e
n
a
m
i
n
g
: i
m
p
o
r
t n
a
m
e
d
1 a
s m
y
N
a
m
e
d
1
i
m
p
o
r
t { f
u
n
c
t
i
o
n
1 a
s f
n
, f
u
n
c
t
i
o
n
2 } f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
/
/ I
m
p
o
r
t
i
n
g t
h
e m
o
d
u
l
e a
s a
n o
b
j
e
c
t
/
/ (
w
i
t
h o
n
e p
r
o
p
e
r
t
y p
e
r n
a
m
e
d e
x
p
o
r
t
)
i
m
p
o
r
t * a
s m
y
l
i
b f
r
o
m '
s
r
c
/
m
y
l
i
b
'
;
/
/ O
n
l
y l
o
a
d t
h
e m
o
d
u
l
e
, d
o
n
’
t i
m
p
o
r
t a
n
y
t
h
i
n
g
i
m
p
o
r
t '
s
r
c
/
m
y
l
i
b
'
;

View Slide

Syntax
Act 3

View Slide

Object {} enhancement
l
e
t f
i
r
s
t
N
a
m
e = '
J
o
e
'
;
l
e
t l
a
s
t
N
a
m
e = '
D
o
e
'
;
l
e
t p
e
r
s
o
n = {
f
i
r
s
t
N
a
m
e
,
[
'
l
a
s
t
' + '
N
a
m
e
'
]
: l
a
s
t
N
a
m
e
,
g
e
t
A
g
e
(
) {
r
e
t
u
r
n 4
2
;
}
}
;
p
e
r
s
o
n
.
f
i
r
s
t
N
a
m
e /
/ J
o
e
p
e
r
s
o
n
.
l
a
s
t
N
a
m
e /
/ D
o
e
p
e
r
s
o
n
.
g
e
t
A
g
e
(
) /
/ 4
2
v
a
r f
i
r
s
t
N
a
m
e = '
J
o
e
'
;
v
a
r l
a
s
t
N
a
m
e = '
D
o
e
'
;
v
a
r p
e
r
s
o
n = {
f
i
r
s
t
N
a
m
e
: f
i
r
s
t
N
a
m
e
,
g
e
t
A
g
e
: f
u
n
c
t
i
o
n
(
) {
r
e
t
u
r
n 4
2
;
}
}
;
p
e
r
s
o
n
[
'
l
a
s
t
' + '
N
a
m
e
'
] = l
a
s
t
N
a
m
e
;
p
e
r
s
o
n
.
f
i
r
s
t
N
a
m
e /
/ J
o
e
p
e
r
s
o
n
.
l
a
s
t
N
a
m
e /
/ D
o
e
p
e
r
s
o
n
.
g
e
t
A
g
e
(
) /
/ 4
2
ES6 ES5

View Slide

Destructuring
l
e
t [
a
, , b
] = [
1
, 2
, 3
]
;

View Slide

Destructuring
l
e
t [
a
, , b
] = [
1
, 2
, 3
]
;
[
a
, b
] = [
b
, a
]

View Slide

l
e
t p
e
r
s
o
n = {
f
i
r
s
t
N
a
m
e
: '
J
o
e
'
,
l
a
s
t
N
a
m
e
: '
D
o
e
'
.
a
g
e
: 4
2
}
;
l
e
t { f
i
r
s
t
N
a
m
e
, l
a
s
t
N
a
m
e } = p
e
r
s
o
n
;
f
i
r
s
t
N
a
m
e /
/ J
o
e
l
a
s
t
N
a
m
e /
/ D
o
e
Destructuring
l
e
t [
a
, , b
] = [
1
, 2
, 3
]
;
[
a
, b
] = [
b
, a
]

View Slide

Spread operator
M
a
t
h
.
m
a
x
(
.
.
.
[
1
, 2
, 3
]
)
;
/
/ t
h
e s
a
m
e a
s
M
a
t
h
.
m
a
x
(
1
, 2
, 3
)
;

View Slide

Spread operator
M
a
t
h
.
m
a
x
(
.
.
.
[
1
, 2
, 3
]
)
;
/
/ t
h
e s
a
m
e a
s
M
a
t
h
.
m
a
x
(
1
, 2
, 3
)
;
l
e
t a
r
r
1 = [
0
, 1
, 2
]
;
l
e
t a
r
r
2 = [
3
, 4
, 5
]
;
a
r
r
1
.
p
u
s
h
(
.
.
.
a
r
r
2
)
;

View Slide

Spread operator
M
a
t
h
.
m
a
x
(
.
.
.
[
1
, 2
, 3
]
)
;
/
/ t
h
e s
a
m
e a
s
M
a
t
h
.
m
a
x
(
1
, 2
, 3
)
;
l
e
t a
r
r
1 = [
0
, 1
, 2
]
;
l
e
t a
r
r
2 = [
3
, 4
, 5
]
;
a
r
r
1
.
p
u
s
h
(
.
.
.
a
r
r
2
)
;
[
h
e
a
d
, .
.
.
t
a
i
l
] = [
1
, 2
, 3
, 4
, 5
]
;

View Slide

Scope - let & const
f
u
n
c
t
i
o
n f
o
o
(
) {
a = 1
;
i
f (
a
) {
v
a
r a
;
l
e
t b = a + 2
;

View Slide

Scope - let & const
f
u
n
c
t
i
o
n f
o
o
(
) {
a = 1
;
i
f (
a
) {
v
a
r a
;
l
e
t b = a + 2
;
c
o
n
s
o
l
e
.
l
o
g
( b )
;
}
c
o
n
s
o
l
e
.
l
o
g
( a )
;
c
o
n
s
o
l
e
.
l
o
g
( b )
;
}

View Slide

Scope - let & const
f
u
n
c
t
i
o
n f
o
o
(
) {
a = 1
;
i
f (
a
) {
v
a
r a
;
l
e
t b = a + 2
;
c
o
n
s
o
l
e
.
l
o
g
( b )
;
}
c
o
n
s
o
l
e
.
l
o
g
( a )
;
c
o
n
s
o
l
e
.
l
o
g
( b )
;
}
c
o
n
s
o
l
e
.
l
o
g
( b )
; /
/ 3
}
c
o
n
s
o
l
e
.
l
o
g
( a )
; /
/ 1
c
o
n
s
o
l
e
.
l
o
g
( b )
; /
/ R
e
f
e
r
e
n
c
e
E
r
r
o
r
: `
b
` i
s n
o
t d
e
f
i
n
e
d
}
f
u
n
c
t
i
o
n f
o
o
(
) {
a = 1
; /
/ c
a
r
e
f
u
l
, `
a
` h
a
s b
e
e
n h
o
i
s
t
e
d
!
i
f (
a
) {
v
a
r a
; /
/ h
o
i
s
t
e
d t
o f
u
n
c
t
i
o
n s
c
o
p
e
!
l
e
t b = a + 2
; /
/ `
b
` b
l
o
c
k
-
s
c
o
p
e
d t
o `
i
f
` b
l
o
c
k
!

View Slide

Scope - let & const
f
u
n
c
t
i
o
n f
o
o
(
) {
a = 1
;
i
f (
a
) {
v
a
r a
;
l
e
t b = a + 2
;
c
o
n
s
o
l
e
.
l
o
g
( b )
;
}
c
o
n
s
o
l
e
.
l
o
g
( a )
;
c
o
n
s
o
l
e
.
l
o
g
( b )
;
}
c
o
n
s
o
l
e
.
l
o
g
( b )
; /
/ 3
}
c
o
n
s
o
l
e
.
l
o
g
( a )
; /
/ 1
c
o
n
s
o
l
e
.
l
o
g
( b )
; /
/ R
e
f
e
r
e
n
c
e
E
r
r
o
r
: `
b
` i
s n
o
t d
e
f
i
n
e
d
}
f
u
n
c
t
i
o
n f
o
o
(
) {
a = 1
; /
/ c
a
r
e
f
u
l
, `
a
` h
a
s b
e
e
n h
o
i
s
t
e
d
!
i
f (
a
) {
v
a
r a
; /
/ h
o
i
s
t
e
d t
o f
u
n
c
t
i
o
n s
c
o
p
e
!
l
e
t b = a + 2
; /
/ `
b
` b
l
o
c
k
-
s
c
o
p
e
d t
o `
i
f
` b
l
o
c
k
!
i
f (
t
r
u
e
) {
c
o
n
s
t f
o
o = "
f
o
o
"
;
/
/ e
r
r
o
r
f
o
o = "
b
a
r
"
;
}

View Slide

Functions
Act 4

View Slide

Classes
c
l
a
s
s P
o
i
n
t {
c
o
n
s
t
r
u
c
t
o
r
(
x
, y
) {
t
h
i
s
.
x = x
;
t
h
i
s
.
y = y
;
}
t
o
S
t
r
i
n
g
(
) {
r
e
t
u
r
n '
(
' + t
h
i
s
.
x + '
, ' + t
h
i
s
.
y + '
)
'
;
}
}

View Slide

Classes
c
l
a
s
s P
o
i
n
t {
c
o
n
s
t
r
u
c
t
o
r
(
x
, y
) {
t
h
i
s
.
x = x
;
t
h
i
s
.
y = y
;
}
t
o
S
t
r
i
n
g
(
) {
r
e
t
u
r
n '
(
' + t
h
i
s
.
x + '
, ' + t
h
i
s
.
y + '
)
'
;
}
}
c
l
a
s
s C
o
l
o
r
P
o
i
n
t e
x
t
e
n
d
s P
o
i
n
t {
c
o
n
s
t
r
u
c
t
o
r
(
x
, y
, c
o
l
o
r
) {
s
u
p
e
r
(
x
, y
)
;
t
h
i
s
.
c
o
l
o
r = c
o
l
o
r
;
}
t
o
S
t
r
i
n
g
(
) {
r
e
t
u
r
n s
u
p
e
r
.
t
o
S
t
r
i
n
g
(
) + ' i
n ' + t
h
i
s
.
c
o
l
o
r
;
}
}

View Slide

Classes
c
l
a
s
s P
o
i
n
t {
c
o
n
s
t
r
u
c
t
o
r
(
x
, y
) {
t
h
i
s
.
x = x
;
t
h
i
s
.
y = y
;
}
t
o
S
t
r
i
n
g
(
) {
r
e
t
u
r
n '
(
' + t
h
i
s
.
x + '
, ' + t
h
i
s
.
y + '
)
'
;
}
}
c
l
a
s
s C
o
l
o
r
P
o
i
n
t e
x
t
e
n
d
s P
o
i
n
t {
c
o
n
s
t
r
u
c
t
o
r
(
x
, y
, c
o
l
o
r
) {
s
u
p
e
r
(
x
, y
)
;
t
h
i
s
.
c
o
l
o
r = c
o
l
o
r
;
}
t
o
S
t
r
i
n
g
(
) {
r
e
t
u
r
n s
u
p
e
r
.
t
o
S
t
r
i
n
g
(
) + ' i
n ' + t
h
i
s
.
c
o
l
o
r
;
}
}
l
e
t c
p = n
e
w C
o
l
o
r
P
o
i
n
t
(
2
5
, 8
, '
g
r
e
e
n
'
)
;
c
p
.
t
o
S
t
r
i
n
g
(
)
; /
/ '
(
2
5
, 8
) i
n g
r
e
e
n
'
c
o
n
s
o
l
e
.
l
o
g
(
c
p i
n
s
t
a
n
c
e
o
f C
o
l
o
r
P
o
i
n
t
)
; /
/ t
r
u
e
c
o
n
s
o
l
e
.
l
o
g
(
c
p i
n
s
t
a
n
c
e
o
f P
o
i
n
t
)
; /
/ t
r
u
e
c
o
n
s
o
l
e
.
l
o
g
(
t
y
p
e
o
f P
o
i
n
t
)
; /
/ f
u
n
c
t
i
o
n

View Slide

Arrow functions
(
x
, y
) =
> x + y

View Slide

Lexical scope
c
l
a
s
s P
e
r
s
o
n {
c
o
n
s
t
r
u
c
t
o
r
(
) {
t
h
i
s
.
n
a
m
e = '
J
o
e
'
;
}
/
/ .
.
.
l
o
a
d
(
) {
x
h
r
G
e
t
(
d
a
t
a =
> {
t
h
i
s
.
n
a
m
e = d
a
t
a
.
n
a
m
e
;
}
)
;
}
}
f
u
n
c
t
i
o
n P
e
r
s
o
n {
t
h
i
s
.
n
a
m
e = '
J
o
e
'
;
/
/ .
.
.
t
h
i
s
.
l
o
a
d = f
u
n
c
t
i
o
n
(
) {
v
a
r t
h
a
t = t
h
i
s
;
x
h
r
G
e
t
(
f
u
n
c
t
i
o
n
(
d
a
t
a
) {
t
h
a
t
.
n
a
m
e = d
a
t
a
.
n
a
m
e
;
}
)
;
}
}

View Slide

Lexical scope
vs
d
o
c
u
m
e
n
t
.
b
o
d
y
.
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
(
e
v
e
n
t
) {
c
o
n
s
o
l
e
.
l
o
g
(
e
v
e
n
t
, t
h
i
s
) /
/ E
v
e
n
t
O
b
j
e
c
t
, B
o
d
y
E
l
e
m
e
n
t
}
)
;
d
o
c
u
m
e
n
t
.
b
o
d
y
.
a
d
d
E
v
e
n
t
L
i
s
t
e
n
e
r
(
'
c
l
i
c
k
'
, e
v
e
n
t =
>
c
o
n
s
o
l
e
.
l
o
g
(
e
v
e
n
t
, t
h
i
s
) /
/ E
v
e
n
t
O
b
j
e
c
t
, W
i
n
d
o
w
E
l
e
m
e
n
t
)
;

View Slide

Default parameters
f
u
n
c
t
i
o
n a
d
d
(
x = 0
, y = 0
) {
r
e
t
u
r
n x + y
;
}
f
u
n
c
t
i
o
n a
d
d
(
x
, y
) {
x = x |
| 0
;
y = y |
| 0
;
r
e
t
u
r
n x + y
;
}
ES6
ES5

View Slide

Rest parameter
f
u
n
c
t
i
o
n f
r
i
e
n
d
s
(
.
.
.
f
r
i
e
n
d
s
) {
f
r
i
e
n
d
s
.
f
o
r
E
a
c
h
(
f
r
i
e
n
d =
> {
/
/ .
.
.
}
}
f
u
n
c
t
i
o
n f
r
i
e
n
d
s
(
) {
v
a
r f
r
i
e
n
d
s = [
]
.
s
l
i
c
e
.
c
a
l
l
(
a
r
g
u
m
e
n
t
s
, 1
)
;
f
r
i
e
n
d
s
.
f
o
r
E
a
c
h
(
f
u
n
c
t
i
o
n
(
f
r
i
e
n
d
) {
/
/ .
.
.
}
}
ES6
ES5

View Slide

Can I use it?
Act 5 - Final

View Slide

Compilators
TypeScript
Traceur
Babel

View Slide

Compilators
TypeScript
Traceur
Babel
for back-end
Babel-node for node.js
io.js - fork of node.js

View Slide

Stay tuned
and check
compatibility table
http://kangax.github.io/compat-table/es6/

View Slide

View Slide

Further reading
2ality.com
kangax ES6 compatibility table
babeljs.io/docs/learn-es6

View Slide

ECMAScript 6 - Introduction

ECMAScript 6 - Introduction

Piotr Lewandowski

More Decks by Piotr Lewandowski

Other Decks in Programming

Featured

Transcript