Introduction à ECMAScript 6 : Le JavaScript de demain

Difficulté : | 10' Publié il y a 3 ans
Les technologies web ne cessent d'évoluer, aujourd'hui nous allons parler d'ES6, la nouvelle version du langage JavaScript. Elle apporte un lot conséquent de nouveautés, de l'ajout de nouvelles fonctions à la bibliothèque standard, à plusieurs nouvelles syntaxes, dont les classes, les modules et bien plus encore.

Historiquement, le langage JavaScript a longtemps été mis au deuxième plan dans la conception des pages web, servant principalement à réaliser des animations diverses. Aujourd'hui les choses sont totalement différentes, on parle désormais d'application web, entièrement contrôlées via du code JavaScript. Malheureusement, le langage n'a pas été conçu pour créer des applications complexes, il en résulte ainsi des syntaxes très lourdes.Cela va changer très prochainement avec l'arrivée d'une nouvelle version du langage : ECMAScript 6, alias JavaScript 2015 !

ES6 a été pensé pour créer des applications web facilement maintenables, tout en restant compatibles avec le code existant. L'idée a été d'ajouter de nouvelles fonctionnalités au langage. Ainsi, la bibliothèque standard s’enrichit de nouvelles méthodes, mais surtout, le langage adopte de nouvelles syntaxes, comme les classes ou les modules (pour ne citer qu'eux) permettant d'avoir du code beaucoup plus structuré et lisible. Un article de blog serait beaucoup trop court pour faire le point de toutes les nouveautés qui vont s'offrir à nous, je vous propose cependant de faire un tour d'horizon de certaines fonctionnalités très intéressantes.

Parlons bien, parlons code

Je vous invite à créer une page web html vide et à y coller le contenu du code ci-dessous. Votre navigateur n'est pas compatible ES6 ? Ce n'est pas un problème pour aujourd'hui ! Effectivement nous allons utiliser deux scripts qui vont nous transformer à la volée le code ES6 en code compatible avec votre navigateur.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <title>ECMAScript 6 - Demos</title>
</head>
<body>
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">
        // Notre code ES6 ici
    </script>
</body>
</html>

Cette opération "magique" est réalisée par le compilateur Traceur, un outil mis au point par Google dont le but est de convertir le JavaScript de demain en JavaScript d'aujourd'hui. Il est disponible sous plusieurs formes (node, web). Ici nous utilisons la version web. Ainsi, tout le code JavaScript placé dans la balise script type="module" sera automatiquement converti à la volée.

Maintenant que nous sommes fin prêts, nous pouvons commencer :)

Le mot clé let

Le mot clé let permet de déclarer une variable limitée à la portée d'un bloc, c'est-à-dire qu'elle ne peut être utilisée que dans le bloc où elle a été déclarée, ce qui n'est pas le cas avec var.

function swap(x, y) {
    if (x != y) {
        var old = x;
        let tmp = x;
        x = y;
        y = tmp;
    }

    console.log(typeof(old));   // number
    console.log(typeof(tmp));   // undefined
}

Comme prévu, la variable tmp n'existe que dans le bloc conditionnel, à l'inverse de old qui existe partout dans la fonction.

Templates et chaînes de caractères

Vous avez sans doute déjà créé des chaînes de caractères en utilisant des concaténations, bien que cela fonctionne, ce n'est pas forcément pratique et lisible. Le Template String va nous permettre de déclarer des chaînes avec des variables à évaluer à l'intérieur. À la différence d'une chaîne de caractères classique, on utilise des anti quotes (`) à la place des double quotes.

let me = "Yannick";
let mAge = 29;
let result = `Je suis ${me} et j'ai ${mAge} ans`;

La variable result aura comme valeur "Je suis Yannick et j'ai 29 ans". Sachez que vous n'êtes pas limité à une variable, vous pouvez évidemment faire des opérations et même utiliser des fonctions. (si vous vous appelez Bertrand, Michel ou Louise, que vous n'avez pas 29 ans, ça marche aussi, évidemment !).

Les paramètres par défaut

Prenons un cas classique avec l'écriture d'une fonction qui doit additionner deux nombres. Si les paramètres ne sont pas définis alors votre programme plante, pour éviter cela il faut soit être sûr que les paramètres sont bien utilisés ou alors les tester dans le code, ce qui revient à faire quelque chose comme ça :

var add = function (x, y) {
    var x = typeof(x) === "number" ? x : 0;
    var y = typeof(y) === "number" ? y : 0;
    return x + y;
};

Demain vous pourrez utiliser des paramètres par défaut dans vos fonctions et méthodes, ça se passe de commentaires non ?

let add = function (x = 0, y = 0) {
    return x + y;
};

Boucle for - of

Il n'existe toujours pas de mot clé foreach en JavaScript 2015, cependant il y a désormais une nouvelle façon d'itérer sur un tableau en utilisant le couple for-of.

let languages = [ "C", "C++", "C#", "JavaScript" ];

for (let language of languages) {
    console.log(language);
}

Il est aussi possible d'utiliser un système clé/valeur en spécifiant un tableau en paramètre et en exploitant la fonction Array::entries() qui va renvoyer un objet de type Iterator contenant le couple clé/valeur pour chaque élément du tableau.

for (let [index, language] of languages.entries()) {
    console.log(`Index: ${index} => Valeur: ${language}`);
}

Évolution des objets littéraux

Les objets littéraux peuvent être vus comme une structure, ils permettent de stocker des variables et des méthodes. Il est désormais possible d'avoir une écriture beaucoup plus légère pour les déclarer, en se passant du mot clé function.

let Engine = {
    initialize() {
        this.display("Init") ;
    },
    display(message) {
        console.log(message);
    }
};

Fonctions lambda alias Arrow function

Cette nouveauté est géniale, vous allez voir pourquoi dans quelques instants ! Voici un premier exemple avec la fonction Array.sort().

let values = [65, 7, 78, 1, 32, 66];
values.sort((a, b) => { return b - a });

Évidemment, l'intérêt des Arrow Function ne s'arrête pas à une écriture plus light ! En réalité le contexte this du scope courant est conservé à l'intérieur de la déclaration. Voyons plutôt l'exemple ci-dessous.

let Engine = {
    initialize (element) {
        element.addEventListener("keydown", (event) => {
            this.display(event.type);
        }, false);
    },
    display (message) {
        console.log(message);
    }
};

Les classes et l'héritage

On termine avec une chose très attendue par une majorité de développeurs : les classes et l'héritage "facile". Comme pour un objet littéral, vous n'avez pas besoin d'utiliser le mot clé function pour déclarer une méthode.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    toString() {
        return `Hi I'm ${this.name} and I'm ${this.age} years old!`;
    }
}

let p = new Person("John", 18);
console.log(p.toString());
// Hi I'm John and I'm 18 years old

La création d'une classe est relativement facile, vous noterez que nous ne mettons pas de point virgule après sa déclaration. Une chose à noter est l’absence d'encapsulation des données, ainsi tous vos champs et méthodes seront accessibles depuis l'extérieur de la classe. Rassurez-vous, il existe une possibilité pour créer des membres privés, avec des Symbols, mais cela va au-delà de notre article de présentation.

Passons maintenant à l'héritage Simple (il n'existe pas d'héritage multiple avec ES6).

class Developer extends Person {
    constructor(name, age, language) {
        super(name, age);
        this.language = language;
    }

    toString() {
        return super.toString() + ` :: I'm a Developer who likes ${this.language}`;
    }
}

let d = new Developer("Yannick", 29, "JavaScript");
console.log(d.toString());
//  Hi I'm Yannick and I'm 29 years old :: I'm a Developer who likes JavaScript

Sans surprise l'héritage de classe se fait avec le mot clé extends, les méthodes parentes s'appellent quant à elles avec le mot clé super.

Conclusion

Toutes ces nouveautés vont permettre de créer des applications web beaucoup plus rapidement et facilement. L'ajout des classes avec un système d'héritage facile est un vrai plus et permettra de structurer plus facilement le code. Les fonctions lambda sont aussi un vrai plus, car elles offrent une écriture très légère et permettent de conserver la référence du pointeur this du bloc courant.

La question est désormais : quand ?

Certaines fonctionnalités d'ES6 sont déjà présentes dans les navigateurs actuels, comme la boucle for-of et certaines nouvelles méthodes de la bibliothèque standard. Le support de la nouvelle syntaxe arrive très prochainement dans Google Chrome (à partir de la version 42) et est déjà présent dans Internet Explorer 11-dev (la version dans Windows 10).

Il est possible de suivre le statut d'implémentation de tout ça au travers du dashboard chromium et du site status.modern.ie pour Internet Explorer. Malheureusement il n'y a pas à ma connaissance de dashboard pour suivre le développement de Firefox, il faudra vous frayer un chemin sur le Wiki ou sur Bugzilla.

Dans tous les cas, vous pouvez l'utiliser aujourd'hui et compiler votre code final en ES5, c'est exactement comme faire du TypeScript ou du CoffeScript, vous développez votre application dans votre éditeur et vous la compilez pour les tests. L'avantage est que d'ici le milieu d'année, il ne sera plus nécessaire de compiler le code ES6, car celui-ci sera automatiquement interprété par votre navigateur ! Une compilation sera toujours nécessaire si vous voulez assurer un fonctionnement sur les anciens navigateurs (qui sont nos navigateurs d'aujourd'hui !).  Enfin si vous aimez les gros tableaux avec plein de couleurs, je vous recommande de consulter ce lien, il permet de voir pour chaque navigateur, quelles sont les fonctionnalités d'ES6 prises en charge.

Prêt à passer à la vitesse supérieure ? Venez en discuter avec nous, par commentaire, sur les réseaux sociaux ou autour d'un café !

Tags de l'article :

Cet article n'est pas taggué.

Commentaires

  • Il y a 2 ans michelbenay : Répondre

    Moi qui ai commencé avec les cartes 80 colonnes (oui, il était une fois …) mais qui, encore, suit l’état de l’art avec mon regard d’amateur vos’ tutos’ m’illumine la scène comme je l’aime

    félicitations et remerciements

  • Il y a 2 ans Nicolas : Répondre

    Forcément, lire vos bio (menu "l'équipe") ça fait sourire et on a envie... de venir bosser avec vous! ;-) Alors on répond à l'un ou l'autre: là, c'est en tapant (pas trop fort sinon ça fait mal) "JS6" sur Google que je tombe (pas trop bas sinon ça fait mal) sur cette page. Boum: JS6, ça a l'air top... autant que Python et SmallTalk réunis?

    La question est (presque) pertinente: je suis sur un projet (compliqué) de...disons d'ERP pour familles et associations. De groupe humains, quoi. Et à part un fork d'Odoo, alias OpenERP, en python (merci à nos amis les belges), super agréable à maintenir (lire, évoluer, corriger...), y'avait quoi? Pas grand chose, et surtout pas PHP (là, si, ça fait mal...). Et puis NodeJS, Meteor, CoffeeScript, et... JS6? Allons bon, toute mon étude/benchmark "quel est le meilleur language et framework pour faire mon utopie de site web "qui fait tout" dois je choisir?" est à l'eau. Foutu. Nuit blanches.... Help! Python, tu m'avais tant séduit.... vas tu seulement survivre à "ECMAScript6" (sic)?

    Alors, Python ou ES6? Django ou Meteor? Comment faire un site web multi-services pour familles et assos, emails-tâches-gestion-docs-todo-photos-partages-occasions-social-...? Help!

    • Il y a 2 ans Manuel

      Merci pour le message. Il y a beaucoup de différences entre du Python ou ECMAScript 6. Le mieux, c’est de passer à l’agence pour discuter autour d’un café… Au faite, on est toujours à la recherche de profils motivés pour travailler avec nous. Si on peut jeter un coup d’œil sur ton CV, c’est avec plaisir !

    • Il y a 2 ans Yannick

      Salut,

      Ta question est effectivement pertinente mais je pense qu’il ne faut pas trop se perdre non plus dans toutes ces technos. La première chose à identifier est de savoir si tu veux utiliser du JS côté back (donc du node) ou si tu veux utiliser ES6 uniquement sur la partie client.

      « quel est le meilleur language et framework pour faire mon utopie de site web »

      Je dirais simplement que ça dépend des gens et des équipes, il n’y a pas de meilleur langage (quoi que…) mais plutôt des limites des moteurs/interpreteurs. PHP par exemple si il est bien utilisé permet de faire des sites rapides, fonctionnels et maintenables et ce n’est pas les ressources qui vont manquer pour ça :-) .

      Je ne connais pas vraiment Python pour le web alors je ne pourrais pas faire de comparatif, mais ton problème peut être solutionné avec un bon framework PHP comme Symfony 2/3 (mais apparement ce n’est pas trop ta tasse de thé) ou avec une solution Node. Cependant attention à la mise en place du serveur.

  • Il y a 12 mois Hugo Saint-Yago : Répondre


    Bonjour j'espère que tu vas très bien! 
    Je suis tombé par hasard sur ton article et j'ai vu l'example dans "fonctions lambda 
    values.sort((a, b) => { return b - a });
    cette ligne pourrait être écrite un peu plus légère, n'est-ce pas?
    values.sort((a, b) => b - a);
    sans le mot clé "return" et les {}
    Un bon article pour commencer avec Ecma6