Javascript ES6

Le langage Javascript

Le langage Javascript a été créé par Brendan Eich en 1995 et a été standardisé sous le nom d’ECMAScript en 1997. En 2015, la version 6 d’ECMAScript est apparu. Et actuellement, la version 11 d’ECMAScript est sorti en 2020.

Nous tenons à souligné ici que NodeJS est la version Javascript qui peut être exécutée dans un environnement autre que du navigateur web. Avec NodeJS, le Javascript peut être exécutée dans un environnement serveur par exemple. De plus, NodeJS est aussi utilisé par les framework Angular ou VueJS.

Les classes dans Javascript ES6

Dans ce qui suit, nous allons voir les éléments importantes d’ES6 qui sont utilisées dans les frameworks Javascript récents. En premier lieu, nous allons voir les classes.

La notion de classe ici fait référence au classe dans la Programmation Orienté Objet. Les classes cherchent à modéliser des sujets dans un programme sous forme d’objet. L’objet ici c’est l’entité qui contient des informations sur un sujet. Un excellent tutoriel sur le Javascript Orienté Objet est accessible à l’adresse : https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects.

Ainsi, pour créer une classe avec Javascript ES6, nous allons le faire comme suit :

class MyClass{
     prop1;
     constructor(param1){
        this.prop1 = param1;
     }
     meth1() {
         this.prop1 = "Hello World!!!";
     }
}

Et si nous voulons instancier cette classe MyClass, nous allons faire comme indiqué ci-dessous :

const objet1 = new MyClass("Salut le monde !!!!");

Il est à noter que les classes en ES6 simulent la création des objets par instanciation de classes. Mais les modèles de données sont des héritages prototypal qui est propre à Javascript.

Les fonctions fléchées

Tout d’abord faisons un petit rappel sur les fonctions standards en Javascript. Les fonctions standards sont de la forme :

function hello(name){
    return "Hello " + name;
}

Pour une fonction fléchée, cette fonction sera attachée à une variable, et cette fonction sera signalée par une parenthèse, une flèche et l’élément retourné. Ainsi pour représenter la fonction hello ci-dessus par une fonction fléchée, nous aurons :

let hello = (name) => "Hello " + name;

Ou encore de la forme suivante (si on a une fonction sur plusieurs ligne) :

let hello = (name) => {
    return "Hello " + name;
}

Quand on aura besoin des fonctions de callback à laquelle on n’a pas besoin d’associer un nom/ de définir mais que nous avons besoin d’utiliser à un moment donné, nous allons utiliser les fonctions fléchées.

Nous allons donner un exemple d’illustration. Pour ce faire, nous allons utiliser la fonction map introduit par ES6. Ici, la fonction map est associée au tableau (array).

const user = ["Rakoto", "Rabe", "Rasoa", "Andria"];
let userGreetings = user.map((name) => "Hello " + name);

Ce qui donnera dans notre variable userGreetings:

["Hello Rakoto","Hello Rabe","Hello Rasoa","Hello Randia"]