Les nouveautés d’EcmaScript 6

Présentation générale

EcmaScript 6, encore appelé ES6 ou JavaScript 2015, est une nouvelle évolution de JavaScript apparue en 2015. À cette occasion, JavaScript a subi de nombreuses retouches, notamment avec l’apparition de nouvelles syntaxes liées au modèle « programmation orientée objet » (POO).

En matière de POO, le langage ressemble syntaxiquement à ce que l’on peut retrouver dans les langages majeurs comme Java, C++ ou encore PHP 5, même s’il ne s’agit que d’un habillage.

De nombreuses autres nouveautés (ou améliorations) sont implémentées dans cette nouvelle version, notamment :

l’importation/exportation de modules (à l’instar de ce que l’on trouve dans Node JS, que nous étudierons dans le chapitre suivant),
les fonctions fléchées (arrow founctions),
la gestion des traitements asynchrones via les « promesses » (instruction promise),
les tableaux associatifs de clés/valeurs (instruction Map),
des structures de données nouvelles ou améliorées (instructions Map, Set, WeakMap, WeakSet),
...

Dans le cadre de ce chapitre, nous allons mettre en œuvre dans des exemples concrets les évolutions majeures. Bien entendu, l’exposé ne pourra pas être exhaustif.

Apports au niveau de la Programmation Orientée Objet

1. Notion de prototype

Débutons notre série d’exemples illustrant les nouveautés apportées par EcmaScript 6 en matière de POO par un premier script montrant ce qui était proposé jusqu’à la version EcmaScript 5 (datant de décembre 2009).

Script complet HTML/JavaScript

<!DOCTYPE html> 
 
<!-- 
Nom du script : poo_01.htm 
Auteur : Christian VIGOUROUX 
Date de création : 15/10/2018 
Date de dernière modification : 15/10/2018 
Objet : "POO" en EcmaScript 5 (notion de prototype) 
--> 
 
<!-- Balise html --> 
<html> 
 
  <!-- Section head --> 
  <head> 
    <!-- Balise meta de gestion de l'accentuation UTF-8 --> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
  </head> 
 
 <!-- Section body --> 
 <body> 
 
    <!-- Utilisation de la police de caractères Arial --> 
    <font face="Arial"> 
 
      <!-- Affichage du titre du script --> 
      <h3>Ecmacript 5 & 6 : Notion de prototype - Script poo_01.htm</h3> 
 
        <!-- Script JavaScript --> 
        <script> 
 
        /* Définition d'une fonction constructeur de nom Voiture */ 
        /* NB : Le constructeur est ici vide */ 
        var Voiture = function() {}; 
 
        /* Test de l'existence par défaut d'un prototype */ 
        /* pour tout constructeur */ 
        document.write("Prototype du constructeur : " + Voiture.prototype); 
 
        /* Ajout d'une méthode zigzaguer au prototype du constructeur Voiture */ 
        Voiture.prototype.zigzaguer = function() 
        { 
          document.write("zigzague dangereusement<br />"); 
        }; 
 
        /* Instanciation d'un objet simca1100 via le constructeur Voiture */  
        var simca1100 = new Voiture(); 
 
        /* Appel de la méthode zigzaguer de l'objet simca1100 accessible */ 
        /* via le prototype du constructeur Voiture */ 
        document.write("<br />Que fait la simca1100 ? Elle "); 
        simca1100.zigzaguer(); 
 
        /* Instanciation d'un objet renault12 via le constructeur Voiture */  
        var renault12 = new Voiture(); 
 
        /* Test méthode zigzaguer partagée ou pas */ 
        /* entre les objets simca1100 et renault12 */ 
        if (simca1100.zigzaguer...

Fonctions fléchées (arrow functions)

1. Avantages des fonctions fléchées

Vous trouverez deux avantages aux fonctions fléchées (ou arrow functions) introduites dans EcmaScript 6 :

une syntaxe allégée par rapport aux fonctions EcmaScript 5,
la non-création d’un nouveau « scope » associé.

Ces avantages supposés semblent abstraits. Voyons au travers d’un exemple complet à quoi cela correspond.

2. Exemple

Script complet HTML/JavaScript

<!DOCTYPE html> 
 
<!-- 
Nom du script : arrow.htm 
Auteur : Christian VIGOUROUX 
Date de création : 15/10/2018 
Date de dernière modification : 15/10/2018 
Objet : Utilisation de la syntaxe arrow (=>) 
--> 
 
<!-- Balise html --> 
<html> 
 
  <!-- Section head --> 
  <head> 
    <!-- Balise meta de gestion de l'accentuation UTF-8 --> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
    <!-- Scripts de compatibilité ES6 (transpiling) pour Microsoft Edge --> 
    <script 
      src="https://google.github.io/traceur-compiler/bin/traceur.js"> 
    </script> 
    <script 
      src="https://google.github.io/traceur-compiler/src/bootstrap.js"> 
    </script> 
  </head> 
 
  <!-- Section body --> 
  <body> 
 
    <!-- Utilisation de la police de caractères Arial --> 
    <font face="Arial"> 
 
      <!-- Affichage du titre du script --> 
      <h3>EcmaScript 6 : Utilisation de la syntaxe arrow (=>)</h3> 
 
      <!-- Script JavaScript --> 
      <script> 
 
        // Définition d'un tableau JavaScript voiture de sport 
        // (marque uniquement) 
        let tabVoituresSport = ["Porsche", "Ferrari", "BMW"];  
 
        // Boucle d'affichage de 3 marques préférées 
        // NB : Utilisation de forEach 
        document.write("<br />Boucle d'affichage de 3 marques préférées"); 
        document.write("(utilisation de ForEach sans notation =>) :<br />"); 
        tabVoituresSport.forEach(function(marque) { 
          document.write("Marque : " + marque + "<br />"); 
        }) 
 
        // Boucle d'affichage de 3 marques préférées 
        // NB : Utilisation de forEach avec notation => 
    ...

Structures Map, Set et boucle for of

1. Présentation générale

Sans vouloir être exhaustif sur le sujet, étudions en séquence la gestion des structures de données suivantes disponibles en EcmaScript 6 :

Les tableaux JavaScript (déjà disponibles dans les versions antérieures).
Les structures Map.
Les structures Set.

2. Exemple

Script complet HTML/JavaScript

<!DOCTYPE html> 
 
<!-- 
Nom du script : map_set.htm 
Auteur : Christian VIGOUROUX 
Date de création : 15/10/2018 
Date de dernière modification : 15/10/2018 
Objet : Map et Set 
--> 
 
<!-- Balise html --> 
<html> 
 
  <!-- Section head --> 
  <head> 
    <!-- Balise meta de gestion de l'accentuation UTF-8 --> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
  </head> 
 
  <!-- Section body --> 
  <body> 
 
    <!-- Utilisation de la police de caractères Arial --> 
    <font face="Arial"> 
 
      <!-- Affichage du titre du script --> 
      <h3>EcmaScript 6 : Map, Set et boucle for ... of</h3> 
 
      <!-- Script JavaScript --> 
      <script> 
 
        // 
        // Définition d'un tableau JavaScript et affichage de son contenu 
        // 
        document.write("<h4>Tableau JavaScript</h4>"); 
        // Définition d'un tableau JavaScript de voitures 
        // (marque uniquement) 
        // let tabVoitures = ["Porsche", "Ferrari", "BMW"]; 
        let tabVoitures = new Array("Porsche", "Ferrari", "BMW"); 
        // Ajout d'une 4e voiture 
        tabVoitures.push("Simca");  
        // Affichage des marques du tableau tabVoitures (via for) 
        document.write("Marques du tableau tabVoitures (via for) :<br />"); 
        for (i = 0; i < tabVoitures.length; i++) { 
          document.write(tabVoitures[i] + "<br />"); 
        } 
        // Affichage des marques du tableau tabVoitures (via for of) 
        document.write("<br />Marques du tableau tabVoitures"); 
        document.write(" (via for of) :<br />"); 
        for (let marque of tabVoitures) { 
          document.write(marque + "<br />"); 
        } 
      ...

Portée des variables (var ou let)

1. Présentation générale

La gestion de la portée des variables était problématique dans les versions antérieures de JavaScript.

Il est désormais facile de préciser la portée exacte des variables via deux mots-clés différents placés au début des déclarations : var et let.

Nous allons, au travers d’un exemple, voir l’impact de ces deux solutions.

2. Exemple

Script complet HTML/JavaScript

<!DOCTYPE html> 
 
<!-- 
Nom du script : var_let.htm 
Auteur : Christian VIGOUROUX 
Date de création : 15/10/2018 
Date de dernière modification : 15/10/2018 
Objet : Déclaration de variables via var ou let 
--> 
 
<!-- Balise html --> 
<html> 
 
  --> Section head -->--> 
  <head--> 
    <!-- Balise meta de gestion de l'accentuation UTF-8 -->--> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
  </head> 
 
  <!-- Section body --> 
  <body> 
 
    <!-- Utilisation de la police de caractères Arial --> 
    <font face="Arial"> 
 
      <!-- Affichage du titre du script --> 
      <h3>EcmaScript 6 : Déclarations de variables via var et let</h3> 
 
      <!-- Script JavaScript --> 
      <script> 
 
        // Définition d'une variable porsche911 via var 
        // (portée dans l'ensemble du script) 
        var porsche911 = "Porsche 911"; 
        // NB : un let au lieu d'un var à ce niveau du script n'aurait 
        //     aucune incidence sur la portée (scope) 
 
        // Boucle d'affichage de 3 marques préférées 
        // NB : Utilisation de var varMarque -> varMarque sera reconnue 
        //      dans tout le script 
        document.write("<br />Boucle...

Promesses (promise)

1. Présentation générale

L’objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une opération qui n’a pas encore été complétée, mais qui est attendue dans le futur (source : Mozilla Developer Network).

Prenons l’exemple d’un traitement web extrêmement long (par exemple un téléchargement de fichier volumineux) qui bloque temporairement ou complètement le navigateur. Les promesses, désormais implémentées dans JavaScript depuis EcmaScript 6, solutionnent le problème de manière élégante.

Étudions la création d’une promesse au travers d’un exemple, facile à interpréter, bien que pas vraiment réaliste.

Pour obtenir des explications détaillées sur le fonctionnement des promesses, consultez les nombreux blogs disponibles sur Internet, en particulier : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise

2. Exemple

Script complet HTML/JavaScript

<!DOCTYPE html> 
 
<!-- 
Nom du script : promise.htm 
Auteur : Christian VIGOUROUX 
Date de création : 15/10/2018 
Date de dernière modification : 15/10/2018 
Objet : Utilisation des promesses 
--> 
 
<!-- Balise html --> 
<html> 
 
  <!-- Section head --> 
  <head> 
    <!-- Balise meta de gestion de l'accentuation UTF-8 --> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
  </head> 
 
  <!-- Section body --> 
  <body> 
 
    <!-- Utilisation de la police de caractères Arial --> 
    <font face="Arial"> 
 
      <!-- Affichage du titre du script --> 
      <h3>EcmaScript 6 : Utilisation des promesses</h3> 
 
      <!-- Script JavaScript --> 
      <script> 
 
        // Définition d'une promesse 
        // NB1 : Le traitement consiste à tester la vitesse atteinte 
        // par deux voitures de sport au bout de 5 secondes 
        // NB2 : La voiture qui sera gagnante est désignée  
de manière aléatoire 
        // par Math.random (qui fournit une réponse entre 0 et 1) 
    ...

Déstructuration

1. Présentation générale

L’affectation par décomposition (destructuring en anglais) est une expression JavaScript qui permet d’extraire des données d’un tableau ou d’un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l’objet (source : Mozilla Developer Network).

2. Exemple

Script complet HTML/JavaScript

<!DOCTYPE html> 
 
<!-- 
Nom du script : destructuring.htm 
Auteur : Christian VIGOUROUX 
Date de création : 15/10/2018 
Date de dernière modification : 15/10/2018 
Objet : Destructring de tableaux et d'objets JavaScript 
--> 
 
<!-- Balise html --> 
<html> 
 
  <!-- Section head --> 
  <head> 
    <!-- Balise meta de gestion de l'accentuation UTF-8 --> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
  </head> 
 
  <!-- Section body --> 
  <body> 
 
    <!-- Utilisation de la police de caractères Arial --> 
    <font face="Arial"> 
 
      <!-- Affichage du titre du script --> 
      <h3>EcmaScript 6 : Desctructuring de tableaux et d'objets JavaScript</h3> 
 
      <!-- Script JavaScript --> 
      <script> 
 
        // Définition d'un tableau JavaScript de marques de voitures de sport ...