Voici les bases à connaître pour utiliser ES6:

Arrow Functions (Fonctions fléchées)

Exemple:
Plutôt que de coder:

1
2
3
const myFunction = function foo() {
//...
}

Utiliser maintenant:

1
2
3
4
5
6
const myFunction = () => {
//...
}

// Si la méthode ne possède qu'une seule déclaration, on écrit la méthode comme ceci:
const myFunction = i => 3 * i

The spread operator (Syntaxe de décomposition)

Si on a:

1
const c = [...a]

Cette déclaration copie le tableau a dans c.
On peut ajouter d’autres éléments derrière un spread operator:

1
const c = [...a, 2, 'test']

Destructuring assignments (Affectation par décomposition)

On peut extraire juste certaines propriétés d’un objet en utilisant la syntaxe suivante:

1
2
3
4
5
6
7
8
const person = {
firstName: 'Tom',
lastName: 'Cruise',
actor: true,
age: 54 //made up
}

const { firstName: name, age } = person

Cela va créer 2 const variables appelées name et age.

La synataxe suivante fonctionne également:

1
2
const a = [1,2,3,4,5]
[first, second, , , fifth] = a

Template Literals (Modèles de libellés)

1
const str = `test`
1
2
const string = `something ${1 + 2 + 3}`
const string2 = `something ${foo() ? 'x' : 'y'}`
1
2
3
4
5
const string3 = `Hey
this

string
is awesome!`

Async / Await

Une fonction async retourne une promesse:

1
2
3
4
5
const doSomethingAsync = () => {
return new Promise((resolve) => {
setTimeout(() => resolve('I did something'), 3000)
})
}

Quand on veut appeler cette fonction on ajoute await comme ceci:

1
2
3
const doSomething = async () => {
console.log(await doSomethingAsync())
}

Exemple

1
2
3
4
5
6
7
8
9
10
11
12
13
const doSomethingAsync = () => {
return new Promise((resolve) => {
setTimeout(() => resolve('I did something'), 3000)
})
}

const doSomething = async () => {
console.log(await doSomethingAsync())
}

console.log('Before')
doSomething()
console.log('After')

Résultat:

1
2
3
Before
After
I did something // Après 3s

Autre exemple, au lieu de:

1
2
3
4
5
6
7
8
9
const getFirstUserData = () => {
return fetch('/users.json') // get users list
.then(response => response.json()) // parse JSON
.then(users => users[0]) // pick first user
.then(user => fetch(`/users/${user.name}`)) // get user data
.then(userResponse => response.json()) // parse JSON
}

getFirstUserData()

Le code se simplifie avec async / await:

1
2
3
4
5
6
7
8
9
10
const getFirstUserData = async () => {
const response = await fetch('/users.json') // get users list
const users = await response.json() // parse JSON
const user = users[0] // pick first user
const userResponse = await fetch(`/users/${user.name}`) // get user data
const userData = await user.json() // parse JSON
return userData
}

getFirstUserData()

Dernier exemple avec des async / await en série:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const promiseToDoSomething = () => {
return new Promise(resolve => {
setTimeout(() => resolve('I did something'), 10000)
})
}

const watchOverSomeoneDoingSomething = async () => {
const something = await promiseToDoSomething()
return something + ' and I watched'
}

const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
const something = await watchOverSomeoneDoingSomething()
return something + ' and I watched as well'
}

watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => {
console.log(res)
})

Résultat:

1
I did something and I watched and I watched as well

Classes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class Person {
constructor(name) {
this.name = name
}

hello() {
return 'Hello, I am ' + this.name + '.'
}

get fullName() {
return `${this.firstName} ${this.lastName}`
}

set age(years) {
this.theAge = years
}
}

class Actor extends Person {
hello() {
return super.hello() + ' I am an actor.'
}
}

var tomCruise = new Actor('Tom Cruise')
tomCruise.hello()

Modules

Importer des modules

L’import se fait via les commandes import ... from ...:

1
2
3
4
import * from 'mymodule'
import React from 'react'
import { React, Component } from 'react'
import React as MyLibrary from 'react'

Exporter des modules

1
2
export var foo = 2
export function bar() { /* ... */ }

FOR-OF LOOP

C’est un forEach avec la possibilité de faire un break

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//iterate over the value
for (const v of ['a', 'b', 'c']) {
console.log(v);
}
a
b
c

//get the index as well, using `entries()`
for (const [i, v] of ['a', 'b', 'c'].entries()) {
console.log(i, v);
}
0 "a"
1 "b"
2 "c"