Welcome

Angular-Tuto.com/h6>

Angular-Tuto.com

ECMASCRIPT ES7

Introduction ES7

Introduction à ES7

Tout le monde utilise JavaScript. Par contre Javascript change régulièrement et possède plusieurs versions.

ECMAScript est une spécification des scripts. ECMAScript est un ensemble des normes qui concernent les langages des script. Il y a plusieurs langages de scripting, notamment, javascript. Ainsi Javascript et les autres langages de script (comme TypeScript) doivent obéir à ces normes et spécifications dans chaque version.

A chaque fois que les langages de scripting évoluent, on a une nouvelle version de ECMAScript ou ES. Aujourd’hui, on parlera de ES7 et les versions qui la suivent.

La première version est sortie en juin 1997. Et la version actuelle(ES7) est présente dépuis Juin 2016.

Variables et paramètres dans ES7

Dans cette partie nous allons introduir les nouveautés de ES7:

  • let : est un mot clé permettant de déclarer une variable dans ES6. Alors c’est quoi la nouveauté ? On peut déclarer une variable en utilisant simplement le mot clé “var”.

    En fait, le mot clé let definie le scoop ou bien le périmètre de la variable. dans les deux exemples suivants:


    on a écrit la même fonction mais la première fois on va déclarer la variable en utilisant le mot clé “var”. Dans ce cas le x vaut 5.
    En résumé, on a déclaré le x à l'intérieur du bloc “if” et sa valeur se propage à l'extérieur. en contrepartie si on declare x en utilisant le mot clé “let”, x sera non définie à l'extérieur de ce bloc ( Voir le deuxième exemple ou il y a une erreur de return).
  • Const: Permet de définir la valeur d’une variable ReadOnly. ReadOnly signifie que la valeur de la variable ne change pas .
    Dans l’exemple suivant on va déclarer une const puis on va essayer de changer sa valeur. ça engendrera une erreur de syntaxe
  • Valeurs par défaut:Pour passer une valeur par défaut dans une fonction JavaScript, il suffit d’initialiser sa valeur comme suivant:

    La fonction func prend un paramètre et par défaut on a assigné “Alex” à ce paramètre. Si on invoque cette fonction sans passer un paramètre ou si on passe un paramètre undefined. On trouvera toujours que la valeur vaut “Alex”.
  • Paramètre Rest: ça permet de travailler avec les fonctions qui prennent un nombre inconnu ou variable des arguments. Un exemple très connu est la fonction Sum ou Sommation qui permet d’ajouter les valeurs des paramètres et donner leur sommation comme résultat. Pour ceci, dans les anciennes version de ES et javascript on utilise “arguments” object.
    Maintenant, avec ES6 on peu atteindre le même résultat avec un syntaxe plus adapté et élégant. Un paramètre de Type Rest doit être le dernier paramètre dans une fonction et doit être précédé par 3 points (...)


  • Template: Template est un moyen de créer une template de string. ça permet d’avoir une structure d’une chaîne de caractères réutilisable. attention il faut utiliser la back tick ( ` ) et non pas la simple apostrophe ( ‘ ). dans l’exemple suivant on passe le paramètre de la fonction à la template

Les classes dans ES7

C’est la fonctionnalité la plus importante qui sera utilisée dans Angular. Le concept des classes est très important pour créer et utiliser les instances. on peut déclarer une classe en utilisant le mot clé “class” et on peut l’instancier en utilisant le mot clé “new”



  • Les Getters et Setters des classes: Comme dans les autres langages orientés objets, le getter permet de lire la valeur d’une propriété. Get et set dans javascript et ES6 sont des fonction comme suivant:

  • Heritage:ça permet d’assurer l'héritage d’une classe d’une autre classe. Pour ceci on utilise le mot clé “extends”

  • Fonction Lambda Comme dans c# et Linq on peut utiliser la fonction Arrow qui permet d’initialiser une fonction. Exemple on va re-appeler la même fonction addNumber mais en utilisant le mot clé “Arrow” en utilisant le symbole “=>”

  • Opérateur “for of” cet opérateur permet de faire une boucle dans une collection.

  • Set Elle permet de looper dans un tableau ou collection de données puis retourner le premier élément qui répond à cette condition.

    FindIndex(): retourne l’index du premier élément trouvé
  • Setc’est une nouvelle structure de donnée ajoutée à ES6. Elle permet de représenter une collection des éléments uniques.

    dans cet exemple si on ajoute un élément existant à une set, le nouveau ajout ne sera pas pris en compte. d’autres fonctions peuvent êtres appliquée à une set
    - add()
    - clear()
    - delete(1)
  • Maps : une map est la même chose qu’une set sauf que cette collection contient des paires c’est comme un Dictionnary dans c#. on unisitaise une map en utilisant le mot clé “new” var map = new Map();

Développement Asynchrone dans ES7

  • Promise: est un objet qui reste en écoute aux résultat d’une opération asynchrone et faire une notification si elle a réussie ou non. Autrement, Promise vous informe si une opération asynchrone est terminée et retourne le résultat de cette opération. on peut créer plusieurs promises qui restent à l’écoute de plusieurs opérations asynchrones.
  • Promise existe en trois statuts:
    - Pending: l'opération asynchrone n’et pas encore terminée.
    - Fulfilled: L'opération asynchrone est terminée avec succès
    - Rejected: Echec
  • Exemple à partir d’un colis, on essaye de récupérer puis afficher le nom du pays de l'émetteur. Le mot clé then permet d’assurer l’ asynchronisation . Dans cette exemple on suppose qu’on a déja défini les fonctions getPays, getEmetteur

Modules dans ES7

Les modules dans javascript et ES7 sont très importants à comprendre car elles sont très utilisées dans des frameworks connus comme Angular.

Un module dans javascript permet l’organisation du code dans une unité atomique pour être consommée par d’autres modules.

Un module permet, aussi, de cacher les informations et les implémentations et éviter les variables globales.

Vous pouvez comprendre Javascript Module comme un composant unitaire qui contient du code (fonctions/propriétés) cachées qui peuvent êtres utilisées et appelées dans d’autres parties du code javascript.

Pour créer un module, il est préférable de le créer dans un fichier .js séparé . vous pouvez exporter n’importe quel type de données dans ES6/Javascript, exemple: string, chiffres et mêmes des classes.

il suffit d’ajouter le mot clé “export”. Dans notre exemple : on va créer une classe nommée Étudiant et qui sera exporter comme module. Cette classe contient un constructeur et une fonction nommée travailler() qui permet d’afficher une string.



Comment consommé le module crée ?:
il suffit d’utiliser le mot clé “import” et passer le nom du module à partir du path de es6. Par la suite on peut appeler la classe Etudiant et ses fonctions.



Conclusion

ECMAScript ES6 ou ES7 sont des normes indisponsables dans la compréhension du fonctionnement Angular.

Le lien entre Angular et ES7 est le suivant: Angular Utilise TypeScript pour ecrire des classes et des fonctions. Et TypeScript obeit au normes d'ECMAScript ES7.

Dans l'article suivant on parlera de TypeScript

Finalement, j'attends vos commentaires et questions :)


Commentaires (0)

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)