Javascript
EcmaScript 6
Rapide historique
● Créé en 1995 sous le nom de Mocha puis LiveScript
pour Mosaic HTTP Server
● Rapidement décliné en vers...
Rapide historique
● Implémentation par Microsoft sous le nom de JScript
● Quelques versions (ES2 et ES3 avec expr. réguliè...
Rapide historique
● 2009, ES5 : JSON, mode strict, reflection, etc.
● Création (2008) puis normalisation (2009) du TC39, u...
Rapide historique
● 2011 : Le TC39 commence à écrire la prochaine
version
● 2011-2015 : Ecriture …
● 2015 : Publication de...
Alors quoi de neuf dans
ES6 ?
Javascript : ES6
Les déclarations de
variables
Javascript : ES6
Jusqu’à ES5, pas de gestion du
scope
Javascript : ES6
for (var i = 0; i < 10; i++) {
// Quelque chose.
}
console.log(i);
/...
ES6 → nouvelles déclarations
Javascript : ES6
for (let i = 0; i < 10; i++) {
// Quelque chose.
}
console.log(i);
// => und...
ES6 → nouvelles déclarations
Javascript : ES6
let i = 'bonjour';
for (let i = 0; i < 10; i++) {
console.log(i);
// 1 2 3 ....
ES6 → nouvelles déclarations
Javascript : ES6
const PI = 3.14;
console.log(PI);
// => 3.14
PI = 'circonférence d’un
cercle...
La destructuration
Javascript : ES6
La déstructuration
Javascript : ES6
La déstructuration permet de définir des variables depuis
un tableau ou un objet en ut...
La déstructuration
Javascript : ES6
var mon_array = ['un', 'deux', 'trois', 'quatre'];
var [a, b, c, d] = mon_array;
conso...
La déstructuration
Javascript : ES6
var mon_object = { a: 1, b: 2, c: 3};
var { a: un, b: deux, c: trois} = mon_object;
co...
La déstructuration
Javascript : ES6
var [a, b, c] = [1, 2];
console.log(a, b, c);
// => 1, 2, undefined
var [a] = [];
cons...
La déstructuration
Javascript : ES6
var [a, b, c = 'Hoy !'] = [1, 2];
console.log(a, b, c);
// => 1, 2, 'Hoy !'
var {a = '...
Les prototypes de
fonctions
Javascript : ES6
Valeurs par défaut
Javascript : ES6
function defaulted(x, y = 'foobar') {
console.log({
x: x,
y: y
});
}
defaulted();
// =...
Les paramètres restants
Javascript : ES6
function ma_fonction(arg1, ...leReste) {
console.log(leReste);
}
ma_fonction();
/...
Les paramètres restants
Javascript : ES6
Cette syntaxe est différente par rapport au fait d’exploiter la
variable argument...
Les propagation de paramètres
Javascript : ES6
function ma_fonction(arg1, arg2, arg3) {
console.log(`1: ${arg1}, 2: ${arg2...
Les fonctions “fléchées”
(Arrow functions)
Javascript : ES6
Les fonctions fléchées
Syntaxes :
Javascript : ES6
([parametre] [, parametre]) => {
code
}
([parametre] [, parametre]) => ...
Les fonctions fléchées
Exemples avec simple retour de valeur ou expression :
Javascript : ES6
// Un argument parenthèses n...
Les fonctions fléchées
Exemple avec corps de fonction :
Javascript : ES6
var reverse_string = str => {
for (var i = str.le...
Les fonctions fléchées
Exemple avec corps de fonction et x paramètres :
Javascript : ES6
var reverse_strings = (...strings...
Les fonctions fléchées
Avantage #1 : Simplification du code
Javascript : ES6
var nums = [0, 5, 6, 7, 125, 9654];
// ES5 :
...
Les fonctions fléchées
Avantage #2 : Un this lexical et non local
En ES5, on rencontre souvent le “problème” de la valeur ...
Les fonctions fléchées
Avantage #2 : Un this lexical et non local
Les fonctions fléchées en es6 utilise un this lexical (c...
Les classes
Javascript : ES6
Les classes
Syntaxe :
Javascript : ES6
class NomClasse extends ClasseParent {
constructor(arguments) {
//...
}
methode(arg...
Les classes
Javascript : ES6
● Gestion de l’héritage avec extends et super()
class NomClasse extends ClasseParent
● Gestio...
Nouveaux littéraux
d’objets
(Object literals)
Javascript : ES6
Nouveaux littéraux d’objets
Javascript : ES6
var es6Object = {
// Raccourci pour 'propriete': propriete
propriete,
// Racc...
Nouvelles structures de
données (Sets & Maps)
Javascript : ES6
Sets
Javascript : ES6
let set = new Set();
set.add(1)
set.has(1)
// => true
set.delete(1)
set.has(1)
// => false
set.add(2...
Sets
Javascript : ES6
● Valeurs uniques nativement
Améliorations notables par rapport à la gestion en array :
let set = ne...
Sets
Javascript : ES6
● Recherche plus rapide / simple que .indexOf()
Améliorations notables par rapport à la gestion en a...
Sets
Javascript : ES6
● Suppression plus rapide / simple que .filter(), etc.
Améliorations notables par rapport à la gesti...
Sets
Javascript : ES6
● Assurance d’itérer dans l’ordre d’ajout
Améliorations notables par rapport à la gestion en array :...
Maps
Javascript : ES6
let map = new Map();
map.set('foo', 'bar');
map.set('réponse', 42);
map.has('foo')
// => true
map.de...
Maps
Javascript : ES6
● Les clés ne sont plus forcément des chaînes
Améliorations notables par rapport à la gestion en obj...
Maps
Javascript : ES6
● Plus de risques de télescopage avec des propriété
natives :
Améliorations notables par rapport à l...
WeakSet & WeakMap
Javascript : ES6
● Structure de données qui ne protège pas ses éléments
contre le ramasse-miettes (Garba...
WeakSet
Javascript : ES6
let set = new Set();
let myKey = {};
set.add(myKey);
(function() {
let myScopedKey = {};
set.add(...
WeakMap
Javascript : ES6
let map = new Map();
let myKey = {};
map.set(myKey, 'Kawai !');
(function() {
let myScopedKey = {...
Limitations de WeakSet &
WeakMap
Javascript : ES6
● La volatilité des structures rend impossible l’itération sur
ces objet...
Exemple : Des propriétés
“privées”
Javascript : ES6
let privates = new WeakMap();
class MaClasseBidon {
constructor(foo, b...
Les symboles
Javascript : ES6
Les symboles
Javascript : ES6
● Immuables
● Uniques
Symbol('bonjours') === Symbol('bonjours'); // => false
● Utilisés comm...
Les symboles
Javascript : ES6
● Permet d’éviter les conflits de noms
let toString = Symbol('toString');
let obj = {
[toStr...
Les symboles
Javascript : ES6
● Assure une “confidentialité” des propriétés
var obj = (function() {
let prop = Symbol('not...
Itérateurs & nouvelle
structure de boucle
Javascript : ES6
Les itérateurs
Javascript : ES6
● Objet pouvant être parcourus (itérés)
● Implémentent les interfaces Iterable, Iterator e...
Les itérateurs
Javascript : ES6
Lancement de l’itération
Iterable.[Symbol.iterator]()
=> Iterator
Iterator.next()
=> Itera...
Les itérateurs
Javascript : ES6
let fibonacciDe10 = {
[Symbol.iterator]() {
let precedent = 0, actuel = 1, tour = 0;
retur...
Itérateurs pour les types natifs
Javascript : ES6
let monTableau = [1, 2, 3];
console.log(monTableau[Symbol.iterator]);
//...
Boucle pour itérateurs
Javascript : ES6
● Syntaxe “for…of” :
for (variable of iterator) { /*...*/ }
● Permet de “consommer...
Boucle pour itérateurs
Javascript : ES6
for (let i of fibonacciDe10) {
console.log(i);
// 1, puis 2, 3, 5, 8, 13, 21,
// 3...
Boucle pour itérateurs
Javascript : ES6
let monTableau = [1, 2, 3];
for (let i of monTableau) {
console.log(i);
// => 1, p...
Les générateurs
Javascript : ES6
Les générateurs
Javascript : ES6
● Les itérateurs sont très utiles mais syntaxe complexe
● Les générateurs rendent la synt...
Les générateurs
Javascript : ES6
● Un générateur est une fonction qui retourne
automatiquement un objet Iterable
● Définis...
Les générateurs
Javascript : ES6
function* fibonacciDe10(){
let precedent = 0, actuel = 1, tour = 0;
while(tour < 10) {
[p...
Délégation de générateurs
Javascript : ES6
function* subGen(){
yield 'c';
yield 'd';
}
function* gen(){
yield 'a';
yield '...
Les promesses
Javascript : ES6
Les promesses
Javascript : ES6
● Une promesse représente un objet dont on ne connaît
pas encore la valeur
● Nouvelle façon...
Les promesses
Javascript : ES6
● Syntaxe simple :
let maPromesse =
new Promise(function(resolve, reject) {
// Code
resolve...
Les promesses
Javascript : ES6
● Chaînables et mixables :
maPromesse1()
.then(maPromesse2)
.then(maPromesse3)
.then(maProm...
Les promesses
Javascript : ES6
● Asynchrone :
let maPromesse =
new Promise(function(resolve, reject) {
setTimeout(function...
Les promesses
Javascript : ES6
get('/monUrl', function(data, err) {
if (err) { }
get('/monUrl2', function(data, err) {
if ...
Les modules
Javascript : ES6
Les modules
Javascript : ES6
● Programmation modulaire permettant d’isoler des
composants dans des fichiers
● Hérite des s...
Les modules
Javascript : ES6
// lib/malib.js
export const PI = 3.14;
export function* fibonacciDe10(){
let precedent = 0, ...
Les modules
Javascript : ES6
// lib/otherLib.js
export * from 'lib/malib';
export var maVar = 42;
// index.js
import * fro...
La gestion des chaînes
de caractères
Javascript : ES6
La gestion des chaînes de
caractères
String.prototype.includes(substring, startingAt)
String.prototype.startsWith(substrin...
La gestion des chaînes de
caractères
Javascript : ES6
// String.prototype.includes(substring, startingAt)
'Hello world'.in...
La gestion des chaînes de
caractères
Gestion des gabarits de chaînes de caractères :
Javascript : ES6
`Simple chaîne`
`cha...
La gestion des chaînes de
caractères
Gère les sauts de lignes nativement et protège des erreurs
de guillemets :
Javascript...
La gestion des chaînes de
caractères
Gère les interpolation d’expressions Javascript :
Javascript : ES6
let ma_variable = ...
La gestion des chaînes de
caractères
Gère les interpolation d’expressions Javascript … mais !
Javascript : ES6
let ma_vari...
La gestion des chaînes de
caractères
Gestion des étiquettes (tags) pour le taint checking, par ex
:
Javascript : ES6
let a...
Merci !
Des question ?
Pour me contacter :
linkedin.com/in/jucrouzet
github.com/jucrouzet
twitter.com/c2c
Prochain SlideShare
Chargement dans…5
×

Présentation de ECMAScript 6

1 076 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 076
Sur SlideShare
0
Issues des intégrations
0
Intégrations
28
Actions
Partages
0
Téléchargements
54
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Présentation de ECMAScript 6

    1. 1. Javascript EcmaScript 6
    2. 2. Rapide historique ● Créé en 1995 sous le nom de Mocha puis LiveScript pour Mosaic HTTP Server ● Rapidement décliné en version client sous le nom de Javascript (Sun et Netscape étaient partenaires) ● Proposé à la standardisation à ECMA International en 1996, adopté et publié en 1997 (ECMA-262) Javascript : ES6
    3. 3. Rapide historique ● Implémentation par Microsoft sous le nom de JScript ● Quelques versions (ES2 et ES3 avec expr. régulières, try/catch, ...) en 98 et 99 ● … puis 10 ans d’hibernation avec une version 4 abandonnée ... Javascript : ES6
    4. 4. Rapide historique ● 2009, ES5 : JSON, mode strict, reflection, etc. ● Création (2008) puis normalisation (2009) du TC39, un comité technique formé par les principaux fabricants de navigateurs ● ES5 est le résultat de nombreux compromis, la wishlist des idées en cours est crée : “Harmony” Javascript : ES6
    5. 5. Rapide historique ● 2011 : Le TC39 commence à écrire la prochaine version ● 2011-2015 : Ecriture … ● 2015 : Publication de la première Release Candidate ! Javascript : ES6
    6. 6. Alors quoi de neuf dans ES6 ? Javascript : ES6
    7. 7. Les déclarations de variables Javascript : ES6
    8. 8. Jusqu’à ES5, pas de gestion du scope Javascript : ES6 for (var i = 0; i < 10; i++) { // Quelque chose. } console.log(i); // => 10, i est défini dans tout le script/bloc
    9. 9. ES6 → nouvelles déclarations Javascript : ES6 for (let i = 0; i < 10; i++) { // Quelque chose. } console.log(i); // => undefined Les déclarations let définissent des variables dont la portée est limité au bloc courant.
    10. 10. ES6 → nouvelles déclarations Javascript : ES6 let i = 'bonjour'; for (let i = 0; i < 10; i++) { console.log(i); // 1 2 3 ... 9 } console.log(i); // => bonjour Les déclarations let définissent des variables dont la portée est limité au bloc courant.
    11. 11. ES6 → nouvelles déclarations Javascript : ES6 const PI = 3.14; console.log(PI); // => 3.14 PI = 'circonférence d’un cercle'; // Echoue de manière silencieuse. console.log(PI); // => 3.14 Les déclarations const définissent constantes nommées accessible uniquement en lecture. // Avec un objet : const params = { language: "JS" }; // => { language: 'JS' } params.language = "Ruby"; // Effectue la modification (WTF?) console.log(params); // => { language: 'Ruby' } params = 5; // Echoue de manière silencieuse... console.log(params); // => { language: 'Ruby' }
    12. 12. La destructuration Javascript : ES6
    13. 13. La déstructuration Javascript : ES6 La déstructuration permet de définir des variables depuis un tableau ou un objet en utilisant une correspondance de motif (pattern matching).
    14. 14. La déstructuration Javascript : ES6 var mon_array = ['un', 'deux', 'trois', 'quatre']; var [a, b, c, d] = mon_array; console.log(a, b, c, d); // => un, deux, trois, quatre // => Il est possible de “zapper” un élément var [un, , trois, quatre] = ['α', 'β', 'γ', 'δ']; console.log(un, trois, quatre); // => α, γ, δ Exemple avec les tableaux :
    15. 15. La déstructuration Javascript : ES6 var mon_object = { a: 1, b: 2, c: 3}; var { a: un, b: deux, c: trois} = mon_object; console.log(un, deux, trois); // => 1, 2, 3 // Marche aussi dans des objets imbriqués var mon_object = { a: 1, b: { sous_b: 2}, c: 3}; var { a: un, b: { sous_b: deux}, c: trois} = mon_object; console.log(un, deux, trois); // => 1, 2, 3 Exemple avec les objets :
    16. 16. La déstructuration Javascript : ES6 var [a, b, c] = [1, 2]; console.log(a, b, c); // => 1, 2, undefined var [a] = []; console.log(a); // => undefined Gère les erreurs par une assignation à undefined :
    17. 17. La déstructuration Javascript : ES6 var [a, b, c = 'Hoy !'] = [1, 2]; console.log(a, b, c); // => 1, 2, 'Hoy !' var {a = 'Badger !'} = []; console.log(a); // => 'Badger !' … ou par une valeur par défaut spécifiée :
    18. 18. Les prototypes de fonctions Javascript : ES6
    19. 19. Valeurs par défaut Javascript : ES6 function defaulted(x, y = 'foobar') { console.log({ x: x, y: y }); } defaulted(); // => { x: undefined, y: 'foobar' } defaulted(42); // => { x: 42, y: 'foobar' } defaulted(42, 'es6'); // => { x: 42, y: 'es6' } Les paramètres de fonctions peuvent avoir une valeur par défaut en cas de non-assignation
    20. 20. Les paramètres restants Javascript : ES6 function ma_fonction(arg1, ...leReste) { console.log(leReste); } ma_fonction(); // => [] ma_fonction(1); // => [] ma_fonction(1, 2); // => [ 2 ] ma_fonction(1, 2, 3, 4, 5); // => [ 2, 3, 4, 5 ] Les paramètres de fonctions peuvent être de nombre variable grâce à la syntaxe ...rest
    21. 21. Les paramètres restants Javascript : ES6 Cette syntaxe est différente par rapport au fait d’exploiter la variable arguments comme en ES5 : ● On peut exclure les n premiers paramètres (nommés) ● ...rest est un vrai tableau, plus besoin d’utiliser Array.prototype.slice.call(arguments) pour par exemple utiliser les structures de boucle (forEach, etc.)
    22. 22. Les propagation de paramètres Javascript : ES6 function ma_fonction(arg1, arg2, arg3) { console.log(`1: ${arg1}, 2: ${arg2}, 3: ${arg3} `); } ma_fonction(); // => 1: undefined, 2: undefined, 3: undefined ma_fonction('rn', 'Quizzard', 'renater'); // => 1: rn, 2: Quizzard, 3: renater ma_fonction(...['test', 'nouveautés', 'es6']); // => 1: test, 2: nouveautés, 3: es6 // => Equivalent ES5 : // ma_fonction.apply(undefined, ['test', 'nouveautés', 'es6']); Les paramètres peuvent être passés par un tableau en utilisant une propagation (spread) :
    23. 23. Les fonctions “fléchées” (Arrow functions) Javascript : ES6
    24. 24. Les fonctions fléchées Syntaxes : Javascript : ES6 ([parametre] [, parametre]) => { code } ([parametre] [, parametre]) => valeur ou expression parametre => { code } parametre => valeur ou expression
    25. 25. Les fonctions fléchées Exemples avec simple retour de valeur ou expression : Javascript : ES6 // Un argument parenthèses non nécessaires var est_pair = n => !(n % 2); // Plusieurs arguments parenthèses nécessaires var est_superieur = (i, j) => i > j; console.log(est_pair(259)); // false console.log(est_pair(-6)); // true console.log(est_superieur(1000, 1)); // true console.log(est_superieur(5, 5)); //false
    26. 26. Les fonctions fléchées Exemple avec corps de fonction : Javascript : ES6 var reverse_string = str => { for (var i = str.length - 1, reversed = ''; i >= 0; reversed += str[i--]) { } return(reversed); }; console.log(reverse_string('12345')); // => 54321 console.log(reverse_string('Ce mec')); // => cem eC
    27. 27. Les fonctions fléchées Exemple avec corps de fonction et x paramètres : Javascript : ES6 var reverse_strings = (...strings) => { var result = ''; for (var i = strings.length - 1; i >= 0; i--) { for (var j = strings[i].length - 1, reversed = ''; j >= 0; reversed += strings[i][j--]) { } result += reversed; } return(result); }; console.log(reverse_strings()); // => '' console.log(reverse_strings('123', '4', '56')); // => 654321
    28. 28. Les fonctions fléchées Avantage #1 : Simplification du code Javascript : ES6 var nums = [0, 5, 6, 7, 125, 9654]; // ES5 : console.log(nums.filter(function(n) { return !(n%2); })); // [ 0, 6, 9654 ] // ES6 : console.log(nums.filter(n => !(n%2))); // [ 0, 6, 9654 ]
    29. 29. Les fonctions fléchées Avantage #2 : Un this lexical et non local En ES5, on rencontre souvent le “problème” de la valeur de this non/mal assignée : Javascript : ES6 //Methode 2 : Utiliser Function.prototype.bind(thisArg) function Voiture() { this.kilometres = 100; console.log(this.kilometres); setTimeout((function() { this.kilometres += 10; console.log(this.kilometres); }).bind(this), 2000); } new Voiture(); // => 100 ... 110 //Methode 1 : Utiliser une variable "self" ou "that" function Voiture() { var self = this; self.kilometres = 100; console.log(self.kilometres); setTimeout(function() { self.kilometres += 10; console.log(self.kilometres); }, 2000); } new Voiture(); // => 100 ... 110
    30. 30. Les fonctions fléchées Avantage #2 : Un this lexical et non local Les fonctions fléchées en es6 utilise un this lexical (celui du contexte ou elles sont définies) : Javascript : ES6 function Voiture() { this.kilometres = 100; console.log(this.kilometres); setTimeout(() => { this.kilometres += 10; console.log(this.kilometres); }, 2000); } new Voiture(); // => 100 ... 110
    31. 31. Les classes Javascript : ES6
    32. 32. Les classes Syntaxe : Javascript : ES6 class NomClasse extends ClasseParent { constructor(arguments) { //... } methode(arguments) { //... } get propriete() { return ...; } set propriete(valeur) { this._propriete = valeur; } static methodeStatique() { //... } let instance = new NomClasse('foobar'); instance.methode([1, 2, 3]); instance.propriete = 5; NomClasse.methodeStatique();
    33. 33. Les classes Javascript : ES6 ● Gestion de l’héritage avec extends et super() class NomClasse extends ClasseParent ● Gestion des getters et setters avec les mot-clés get et set get propriete() {} ● Gestion des méthodes statiques avec le mot-clé static static method() {} En plus d’une syntaxe plus proche de la programmation OO, plusieurs avantages :
    34. 34. Nouveaux littéraux d’objets (Object literals) Javascript : ES6
    35. 35. Nouveaux littéraux d’objets Javascript : ES6 var es6Object = { // Raccourci pour 'propriete': propriete propriete, // Raccourci pour 'toString': function() {} toString() { // Supporte la gestion de l'héritage return "En string ça donne : " + super.toString(); // => “En string ça donne : [Object object] }, // Equivalent de ecole42 : 42 [ 'ecole' + (() => 21 * 2)() ]: 42 };
    36. 36. Nouvelles structures de données (Sets & Maps) Javascript : ES6
    37. 37. Sets Javascript : ES6 let set = new Set(); set.add(1) set.has(1) // => true set.delete(1) set.has(1) // => false set.add(2) set.add(3) set.size // => 2 set.clear(); set.size // => 0
    38. 38. Sets Javascript : ES6 ● Valeurs uniques nativement Améliorations notables par rapport à la gestion en array : let set = new Set(); set.add(1) set.size // => 1 set.add(1) set.size // => 1
    39. 39. Sets Javascript : ES6 ● Recherche plus rapide / simple que .indexOf() Améliorations notables par rapport à la gestion en array : let set = new Set(); set.add(1) set.has(1); // => true let array = [1]; array.indexOf(1) !== -1 // => true
    40. 40. Sets Javascript : ES6 ● Suppression plus rapide / simple que .filter(), etc. Améliorations notables par rapport à la gestion en array : let set = new Set(); set.add(1) set.delete(1); let array = [1]; array.filter(function(n) { return (n !== 1); });
    41. 41. Sets Javascript : ES6 ● Assurance d’itérer dans l’ordre d’ajout Améliorations notables par rapport à la gestion en array : let set = new Set(); set.add('a'); set.add('b'); set.add('c'); for (let x of set) { console.log(x); } // => 'a', 'b', 'c', ce n’était pas forcément le cas avec ['a', 'b', 'c']
    42. 42. Maps Javascript : ES6 let map = new Map(); map.set('foo', 'bar'); map.set('réponse', 42); map.has('foo') // => true map.delete('foo') map.has('foo') // => false map.set(42, 42); map.size // => 2 map.clear(); map.size // => 0
    43. 43. Maps Javascript : ES6 ● Les clés ne sont plus forcément des chaînes Améliorations notables par rapport à la gestion en objet : let map = new Map(), key = {}; map.set(key, 1); map.set(NaN, 42); map.has(key); // => true map.has({}); // => false : {} n’est pas === a key ! (deux objets différents)
    44. 44. Maps Javascript : ES6 ● Plus de risques de télescopage avec des propriété natives : Améliorations notables par rapport à la gestion en objet : let map = new Map(); map.get('toString'); // => undefined map.set('toString', 42); map.get('toString'); // => true var objet = {}; objet.toString; // => [function()] // On peut contourner en testant // objet.hasOwnProperty() objet.toString = 42; objet.toString; // => 42
    45. 45. WeakSet & WeakMap Javascript : ES6 ● Structure de données qui ne protège pas ses éléments contre le ramasse-miettes (Garbage Collector) ● Le Garbage Collector supprimera des éléments quand ils ne seront plus utilisés ● Protège contre les fuites de mémoires
    46. 46. WeakSet Javascript : ES6 let set = new Set(); let myKey = {}; set.add(myKey); (function() { let myScopedKey = {}; set.add(myScopedKey); // => set contient 2 éléments })(); // => set contient toujours 2 éléments let set = new WeakSet(); let myKey = {}; set.add(myKey, 'Kawai !'); (function() { let myScopedKey = {}; set.add(myScopedKey); // => set contient 2 éléments })(); // => set contient 1 élément // => Le GC a néttoyé myScopedKey
    47. 47. WeakMap Javascript : ES6 let map = new Map(); let myKey = {}; map.set(myKey, 'Kawai !'); (function() { let myScopedKey = {}; map.set(myScopedKey, 42); // => map contient 2 éléments })(); // => map contient toujours 2 éléments let map = new WeakMap(); let myKey = {}; map.set(myKey, 'Kawai !'); (function() { let myScopedKey = {}; map.set(myScopedKey, 42); // => map contient 2 éléments })(); // => map contient 1 élément // => Le GC a néttoyé myScopedKey
    48. 48. Limitations de WeakSet & WeakMap Javascript : ES6 ● La volatilité des structures rend impossible l’itération sur ces objets ● .size() n’est pas disponible, dû également à la volatilité ● .clear() n’est pas disponible, c’est au GC de vider l’objet
    49. 49. Exemple : Des propriétés “privées” Javascript : ES6 let privates = new WeakMap(); class MaClasseBidon { constructor(foo, bar) { privates.set(this, { foo, bar }); } methodeBidon() { console.log(privates.get(this).foo); console.log(privates.get(this).bar); } } let instance = new MaClasseBidon(42, {}); instance.methodeBidon(); // => 42, [Object] console.log(Object.keys(instance)); // => []
    50. 50. Les symboles Javascript : ES6
    51. 51. Les symboles Javascript : ES6 ● Immuables ● Uniques Symbol('bonjours') === Symbol('bonjours'); // => false ● Utilisés comme identifiant des propriétés d’objet obj[Symbol('bonjours')] = 'blah blah'; let mySymbol = Symbol('bonjours'); let mySymbol2 = Symbol({}); let mySymbol3 = Symbol();
    52. 52. Les symboles Javascript : ES6 ● Permet d’éviter les conflits de noms let toString = Symbol('toString'); let obj = { [toString]() { // The native toString method is not overwritten return('Ok !'); } }; obj.toString(); // => [object Object] console.log(obj[toString]()); // => “Ok !”
    53. 53. Les symboles Javascript : ES6 ● Assure une “confidentialité” des propriétés var obj = (function() { let prop = Symbol('notYourStuff'); let returned; returned = { [prop] : 42 }; console.log(returned[prop]); // Dans le scope, on peut accéder à la propriété return(returned); })(); obj[prop]; // => Erreur prop n'est pas définie // Hors du scope, on ne peut PAS accéder à la propriété JSON.stringify(obj); // => {} // La propriété est ignorée par JSON.stringify()
    54. 54. Itérateurs & nouvelle structure de boucle Javascript : ES6
    55. 55. Les itérateurs Javascript : ES6 ● Objet pouvant être parcourus (itérés) ● Implémentent les interfaces Iterable, Iterator et IteratorResult : interface Iterable { [Symbol.iterator](): Iterator } interface Iterator { next(): IteratorResult; } interface IteratorResult { done: boolean; value: any; }
    56. 56. Les itérateurs Javascript : ES6 Lancement de l’itération Iterable.[Symbol.iterator]() => Iterator Iterator.next() => IteratorResult IteratorResult.done ? valeur = IteratorResult.value Fin de l’itération Récupération d’un valeur de l’itération false true
    57. 57. Les itérateurs Javascript : ES6 let fibonacciDe10 = { [Symbol.iterator]() { let precedent = 0, actuel = 1, tour = 0; return { next() { [precedent, actuel] = [actuel, precedent + actuel]; tour++; return { done: tour > 10, // false, puis true au 10ème tour value: actuel // 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 } } } } }
    58. 58. Itérateurs pour les types natifs Javascript : ES6 let monTableau = [1, 2, 3]; console.log(monTableau[Symbol.iterator]); // => [function] let iterator =monTableau[Symbol.iterator](); console.log(iterator); // => [object] console.log(iterator.next); // => [function] console.log(iterator.next().value); // => 1 console.log(iterator.next().value); // => 2 console.log(iterator.next().value); // => 3 console.log(iterator.next().value); // => undefined // => Mais .done = true !
    59. 59. Boucle pour itérateurs Javascript : ES6 ● Syntaxe “for…of” : for (variable of iterator) { /*...*/ } ● Permet de “consommer” les objets itérateurs ● Itère sur les les valeurs et non les clé (for...in)
    60. 60. Boucle pour itérateurs Javascript : ES6 for (let i of fibonacciDe10) { console.log(i); // 1, puis 2, 3, 5, 8, 13, 21, // 34, 55, et enfin 89 }
    61. 61. Boucle pour itérateurs Javascript : ES6 let monTableau = [1, 2, 3]; for (let i of monTableau) { console.log(i); // => 1, puis 2, puis 3 } let monObjet = { a: 1, b: 2, c: 3 }; for (let i of monObjet) { console.log(i); }
    62. 62. Les générateurs Javascript : ES6
    63. 63. Les générateurs Javascript : ES6 ● Les itérateurs sont très utiles mais syntaxe complexe ● Les générateurs rendent la syntaxe plus simple ● Nouveaux mots-clés : function* generator(); yield value; yield* secondGenerator();
    64. 64. Les générateurs Javascript : ES6 ● Un générateur est une fonction qui retourne automatiquement un objet Iterable ● Définis en utilisant la syntaxe function* gen() {} ● Les valeurs à retourner sont envoyées via yield value;
    65. 65. Les générateurs Javascript : ES6 function* fibonacciDe10(){ let precedent = 0, actuel = 1, tour = 0; while(tour < 10) { [precedent, actuel] = [actuel, precedent + actuel]; yield actuel; tour++; } } let iterator = fibonacciDe10(); console.log(iterator[Symbol.iterator]); // [object] console.log(iterator[Symbol.iterator].next); // [function] for(let i of fibonacciDe10()) { console.log(i); } // 1, 2, 3, 5, 8, 13, 21, 34, 55, 89
    66. 66. Délégation de générateurs Javascript : ES6 function* subGen(){ yield 'c'; yield 'd'; } function* gen(){ yield 'a'; yield 'b'; yield* subGen(); yield 'e'; } for(let i of gen()) { console.log(i); } // 'a', 'b', 'c', 'd', 'e'
    67. 67. Les promesses Javascript : ES6
    68. 68. Les promesses Javascript : ES6 ● Une promesse représente un objet dont on ne connaît pas encore la valeur ● Nouvelle façon de gérer les opérations asynchrone ● Une promesse a 3 états possibles : en cours, puis accomplie _ou_ rejetée ● Les états accomplie ou rejetée sont alors immuables
    69. 69. Les promesses Javascript : ES6 ● Syntaxe simple : let maPromesse = new Promise(function(resolve, reject) { // Code resolve(valeur); // _OU_ reject(erreur); } maPromesse() .then(function(valeur) { // ... }) .catch(function(erreur) { // ... });
    70. 70. Les promesses Javascript : ES6 ● Chaînables et mixables : maPromesse1() .then(maPromesse2) .then(maPromesse3) .then(maPromesse4) .then(maPromesse5) .catch(function(erreur) { // Une erreur est survenue // dans une des promesses // (rejetée) }) maPromesse1() .then(maPromesse2) .then(maPromesse3) .then(function() { // Du code pas asynchrone }) .then(maPromesse4) .then(maPromesse5) .catch(function(erreur) { // ... })
    71. 71. Les promesses Javascript : ES6 ● Asynchrone : let maPromesse = new Promise(function(resolve, reject) { setTimeout(function() { console.log('Après 5 secondes'); resolve(); }, 5000); console.log('Dans la promesse'); }); console.log('Avant la promesse'); maPromesse().then(function() { console.log('Dans le then()'); }); console.log('Après la promesse'); // 'Avant la promesse' // 'Après la promesse' // 'Dans la promesse' // … 5 secondes passent ... // 'Après 5 secondes' // 'Dans le then()'
    72. 72. Les promesses Javascript : ES6 get('/monUrl', function(data, err) { if (err) { } get('/monUrl2', function(data, err) { if (err) { } get('/monUrl3', function(data, err) { if (err) { } get('/monUrl4', function(data, err) { if (err) { } //... etc }); }); }); }); get('/monUrl') .then(get('/monUrl2')) .then(get('/monUrl3')) .then(get('/monUrl4')) .catch(function(err) { console.log(err); }); ● Supprime le “callback hell” ou code pyramidal :
    73. 73. Les modules Javascript : ES6
    74. 74. Les modules Javascript : ES6 ● Programmation modulaire permettant d’isoler des composants dans des fichiers ● Hérite des syntaxes déjà utilisées (AMD, CommonJS) ● Modèle asynchrone, aucun code n’est exécuté tant que le module n’est pas chargé et exécuté
    75. 75. Les modules Javascript : ES6 // lib/malib.js export const PI = 3.14; export function* fibonacciDe10(){ let precedent = 0, actuel = 1, tour = 0; while(tour < 10) { [precedent, actuel] = [actuel, precedent + actuel]; yield actuel; tour++; } } // index.js import * as malib from "lib/malib"; console.log(malib.PI); // 3.14 for(let i of malib.fibonacciDe10()) { // 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 } // index2.js import PI from "lib/malib"; console.log(PI); // 3.14 // index3.js import {fibonacciDe10, PI} from "lib/malib"; // ... ● Syntaxe :
    76. 76. Les modules Javascript : ES6 // lib/otherLib.js export * from 'lib/malib'; export var maVar = 42; // index.js import * from 'lib/otherLib'; console.log(PI); // 3.14 console.log(maVar); // 42 // lib/otherLib2.js export default function() { console.log('Coucou'); } var uglyLocalName = 42; export { uglyLocalName as foo}; // index.js import * as otherLib from 'lib/otherLib2'; otherLib.unexistantName(); // 'Coucou' console.log(otherLib.foo); // 42 ● Délégation d’import / Default / Aliases :
    77. 77. La gestion des chaînes de caractères Javascript : ES6
    78. 78. La gestion des chaînes de caractères String.prototype.includes(substring, startingAt) String.prototype.startsWith(substring, startingAt) String.prototype.endsWith(substring, endingAt) Javascript : ES6
    79. 79. La gestion des chaînes de caractères Javascript : ES6 // String.prototype.includes(substring, startingAt) 'Hello world'.includes('wor') // true 'Hello world'.includes('hell') // false, sensible à la casse 'Hello world'.includes('Hello', 1) // false, on commence à 1 // String.prototype.startsWith(substring, startingAt) '42, born to code'.startsWith('42') // true '42, born to code'.startsWith('foo') // false '42, born to code'.startsWith(42, 1) // false, on commence à 1 // String.prototype.endsWith(substring, endingAt) '42, born to code'.endsWith('code') // true '42, born to code'.endsWith('born') // false '42, born to code'.endsWith('code', 5) // false, on arrete à 5 // Exemple equivalent es5 String.prototype.startsWith = function(substring, startingAt) { startingAt = (startingAt) ? startingAt : 0; return (this.indexOf(substring) === startingAt); };
    80. 80. La gestion des chaînes de caractères Gestion des gabarits de chaînes de caractères : Javascript : ES6 `Simple chaîne` `chaîne avec saut de ligne au milieu` `chaîne avec ${expression Javascript} évaluée` fonction_tag `chaîne ou ${expression Javascript}`
    81. 81. La gestion des chaînes de caractères Gère les sauts de lignes nativement et protège des erreurs de guillemets : Javascript : ES6 // Avant on devait faire : var old_school = "Ligne 1nLigne 2n'""; // Swag ! let new_school = `Ligne 1 Ligne 2'"`;
    82. 82. La gestion des chaînes de caractères Gère les interpolation d’expressions Javascript : Javascript : ES6 let ma_variable = "bonjours"; let ma_string = `Il y a toujours un "s" dans '${ma_variable}'`; // => Il y a toujours un "s" dans 'bonjours' `La variable est de type "${typeof ma_variable}"`; // => La variable est de type "string" `Le type de véhicule est '${vehicule.getType()}'`; // => Le type de véhicule est 'car'
    83. 83. La gestion des chaînes de caractères Gère les interpolation d’expressions Javascript … mais ! Javascript : ES6 let ma_variable = 10; console.log(`Ma variable = ${ma_variable++}`); // => Ma variable = 10 console.log(ma_variable); // => 11 Attention donc aux appels de méthodes, etc.
    84. 84. La gestion des chaînes de caractères Gestion des étiquettes (tags) pour le taint checking, par ex : Javascript : ES6 let a = 2; let b = 5; console.log(`Normalement ${ a } plus ${ b } = ${a + b}`); // "Normalement 2 plus 5 = 7" function tag(strings, ...values) { console.log(strings); console.log(values); return "J'ai plus envie de calculer"; } console.log(tag`Normalement ${ a } plus ${ b } = ${a + b}`); // ['Normalement ', ' plus ', ' = '] // [2, 3, 5] // "J'ai plus envie de calculer"
    85. 85. Merci ! Des question ? Pour me contacter : linkedin.com/in/jucrouzet github.com/jucrouzet twitter.com/c2c

    ×