Découverte de l’ES6

À mes débuts et malheureusement comme beaucoup de développeurs, j’ai découvert le Javascript à l’envers, c’est-à-dire en commençant par jQuery et un jour, j’en ai eu marre et je suis passé à du Javascript Standard ( Vanilla pour les trolls : p), ce fut difficile mais une fois ce cap passé, je me suis donc attaqué à l’ES6 qui propose de nouvelles façons d’écrire du Javascript, plus moderne, plus simple et plus expressif. C’est ce qu’on appelle également le Javascript de demain. Dans cet article, je vous présente une brief introduction à ECMAScript 6 (ES2015) à travers des nouvelles fonctionnalités utiles et intéressantes, telles que les classes.

Const et let

Après avoir longtemps utilisé le mot-clé var pour créer des variables et instancier des objets, l’ES6 a ajouté deux nouveaux mots-clés utiles à manipuler avec des variables: const et let. Les deux sont des fonctionnalités importantes et il est fortement recommandé de les utiliser à la place de l’ancien var pour éviter les problèmes de levage developer.mozilla.org/en-US/docs/Glossary/Hoisting. Les principales différences entre const et let sont que const vous permet de créer des constantes, et de faire comme var, mais cela évite les problèmes de levage. Comme meilleure pratique, utilisez toujours const pour gérer les données immuables, car il utilise moins de mémoire que si vous utilisez let. Jetez un oeil à cet exemple:

// creating a constant
const MAX = 10;  
// creating a variable
let value = 5;  
// you can't change the value of a constant
MAX = 5;  
// this change is allowed for `let` variables
value = 10;  
// creating a constant object
const obj = {};  
// You can only change object's attribute
obj.a = 10;  
// but you can't reassign new data here
obj = 100;  

Modèles de chaînes de caractères

Les modèles de chaînes de caractères vous permet d’introduire des données à l’intérieur d’une chaîne. Pour créer un modèle de chaînes de caractères, vous devez créer une chaîne en utilisant la syntaxe suivante ${nomDeVariable}, comme dans cet exemple: Ceci est un modèle de chaînes de caractères. Voici un exemple :

var name = "John Doe";  
console.log(`Bonjour ${name}!`);  

Un autre avantage de l’utilisation d’un modèle de chaînes de caractères est d’écrire des chaînes multilignes sans l’utilisation de la concaténation en utilisant l’opérateur +, maintenant vous pouvez juste faire un retour à la ligne pour le faire :

let template = `  
<div>  
    <p>Lorem Ipsum</p>
</div>  
`;

Les Fonctions Arrow

En JavaScript, il est très courant d’appeler des fonctions, des fonctions anonymes et des fonctions de rappel en utilisant le mot-clé function. La fonction Arrow est une nouvelle fonctionnalité qui change la façon de créer des fonctions et la façon dont elles se comportent. En utilisant la syntaxe => nous créons une fonction qui ne modifie pas le mot-clé this et qui ne crée pas d’arguments. Voir quelques exemples de Arrow :

// Fonction Arrow vide
const foo() => {};  
// Fonction Arrow inline
const add = (a, b) => {  
    a + b
};
// avec un comparateur
const compare = (a, b) => {  
    if (a > b) {
        return a;
    } else {
        return b;
    }
};
// Un exemple d'utilisation
const doSomeThing = (a, b) => {  
    this.a = a;
    // il n'y a pas besoin d'utiliser des parenthèses quand il y a qu'un argument
    const doNewThing = b => {
        this.b = b;
        return this.a + this.b;
    }
}

Opérateurs de propagation

L’opérateurs de propagation convertit un tableau en arguments, il est utile lorsque vous avez besoin d’utililiser les valeurs d’un tableau pour les envoyer en tant que paramètres pour un constructeur d’une fonction ou d’un objet. Pour comprendre son fonctionnement, commençons par créer une fonction simple :

function add(a, b) => {  
    return a + b
};

Maintenant, pour appeler cette fonction en utilisant un tableau comme argument, il suffit d’utiliser la syntaxe suivante: ...array :

const valeurs = [1, 2];  
add(...valeurs); // retourne 3

Créer une méthode

Si vous avez besoin de définir des méthodes dans un objet, sans l’ES6 nous écrivrions quelque chose comme :

let MonObjet = {  
    a: 1,
    add: function(b) {
        this.a += b;
    }
}

Vous pouvez créer des méthodes à la place des fonctions objet, en éliminant l’utilisation du mot-clé de function :

let MonObjet = {  
    a: 1,
    add(b) {  
        this.a += b;
    }
}

Arguments par défaut

Toujours dans la création de fonctions ou de méthodes, vous pouvez définir des arguments par défaut qui est une fonctionnalité beaucoup utilisé dans les languages comme Java, PHP ou Ruby. Concrètement, vous pouvez définir une valeur par défaut pour les arguments d’une fonction ou des méthodes lorsque ces arguments n’ont pas de valeur lors d’un appel de fonction :

function Person(nom = "Jonh Doe", age = 25) {  
    this.nom = nom;
    this.age = age;
}

Déstructuer un objet

Encore un raccourci qui vous permet d’écrire moins de code lorsqu’une clé d’un objet et une variable ont le même nom, par exemple:

const Person = { name: "Jonh Doe", age: 25 };

const Tableau = {  
    name,
    age
} = Person;

Vous pouvez également appliquer la déstructuration lorsque vous créez un nouvel objet :

const nom = "John Doe";
const age = 25
const Person = {  
    nom
    age
}

Le meilleur pour la fin : Classe et Héritage

Classe

La classe est l’une des fonctionnalités les plus attendues de l’ES6. Vous êtes maintenant en mesure de créer une classe sans l’utilisation directe des objets prototypes en JavaScript. Lors de l’utilisation de la classe, vous pouvez inclure des constructeurs, des destructeurs, des méthodes et des héritages. Pour voir les différences entre les classes et les objets prototypes, nous allons écrire le même sur l’objet Person en utilisant la classe et le prototype. D’abord, regardez comment nous pouvons créer un objet prototype de Person:

var Person = function(name) {  
    this.name = name;
}

Person.prototype.walk = function() {  
    console.log(this.name+ "  marche!");
};

Et oui… pas facile de comprendre car pas assez expressif mais heureusement maintenant, nous pouvons écrire un objet Person sous forme d’une classe ES6 :

class Person  {  
    constructor(name) {
        this.name = name;
    }
    walk() {
        console.log(this.name + "walk!");
    }
}

En utilisant des classes, votre code sera plus expressif et plus propre.

Héritage

Et si nous devons utiliser l’héritage? En utilisant les concepts OOP (Object-Oriented Programming), créons une classe Elf ( un peu de fantasy 🙂 ) qui étend tout le comportement de la classe Person. Pour ce faire, il suffit d’utiliser le mot-clé extends pour définir qui sera la classe parente de cette classe actuelle. Et dans le constructeur de classe enfant, vous pouvez utiliser la méthode super() pour appeler le constructeur de classe parent lorsque la classe actuelle est instanciée.

class Elf extends Person {  
    constructor(name, power) {
        super(name);
        this.power = power;
    }
}

Il n’y a pas de nouvelle façon d’instancier une classe car elle suit la même méthode que pour les objets, donc rien n’est changé à ce niveau :

let elf = new Elf("Degolas", "Fireball");  // ...Legolas ? :p
elf.walk();  

···