ECMAscript : évolutions des 8 dernières années

Les standards de l’ECMAscript, qui constitue en quelque sort les fondations de ce qu’on apelle communément le javascript, sont en perpétuelles évolutions.

Le mot-clé Let

let permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur. Voici les différences avec var :

  • Les données déclarées avec let ont une portée qui s’étend sur le bloc courant. Cela sous-entends qu’un « let var1 » déclaré dans un if n’existera pas en dehors du if par exemple.
  • Les données déclarées avec let dans la portée globale ne sont pas des propriétés de l’objet global window. Autrement dit, on ne peut pas y accéder avec window.maVariable.
  • Les boucles de la forme for (let x ...) créent une nouvelle liaison pour x à chaque itération. Ainsi, les fonctions adjacentes utilisant x lors d’une itération embarqueront une valeur unique au lieu d’une référence à x (ce qui peut poser souci si le temps de traitement est trop long, récupérant la valeur de x après le traitement de la boucle)
  • Des erreurs apparaissent en lieu et place de NaN : si une variable x déclaré via let est utilisé avant sa déclaration par exemple ou qu’on cherche à la redefinir par la suite, une erreur est levée.

 

Le mot-clé Const

Il s’agit tout simplement d’une donnée de type « constante » en javascript : sa valeur n’est pas modifiable. On parle d’immutabilité.

 

La popularisation de FlexBox

 

for…of : 

for(let o of arr)permet de parcours chaque objets iterables (Array, Map, Set, String, TypedArray, l’objet arguments…)

 

params => instruction

les fonctions passés dans paramètres ont à présent une écriture raccourcis ()=>instruction ou (param,param2)=>instruction ou param=>instruction; ou encore param=>{instruction;instruction2;}. Cela permet de raccourcir des écritures des fois un peu longue ET de ne pas créer une nouvelle portée (function(param) créant une nouvelle portée empêchant l’emploi du mot-clé this au sein d’une classe par exemple).
De plus, l’instruction par défaut étant « return », param=> 1+param retournera la concaténation (ou l’addition de 1 + le paramètre).

 

les classes :

Étant d’abord cantonné au système de prototypage, le javascript se dote maintenant d’un vrai système de classe avec un mot clé dédié

class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}

Attention toutefois, pour la déclaration de classe n’est pas remonté dans le code, il est donc nécessaire de déclarer la classe avant de l’instancier.
Le mot clé extends permet comme en C# l’héritage et le mot clé super()permet appeler le constructeur de la classe parent.

L’instruction import NomClass from 'folder/subfolder' permet quant à lui d’utiliser une classe au sein d’un autre document.

 

yield et fonction génératrice

Le mot-clé yield est utilisé pour suspendre et reprendre une fonction génératrice (identifié par function* ou une fonction génératrice historique). Il renvoit à la variable conteneur un IteratorResult ayant deux attribut « value »(la donnée qui suit le mot clé) et « done » (à true si l’exécution est terminée).

 

Les promesses

L’objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. A la fin du déroulement, l’une des deux fonction callback resolve ou reject est apellé, permettant de poursuivre un traitement.

 

Les namespaces

Les espaces de nom ou namespace n’existe à priori pas en javascript : il n’y a donc pas de possibilité d’importé un espace de nom pour profiter des classes dont il dispose et ceux afin de déclarer les objets initialisables.
Toutefois,
en javascript à proprement parler, on peut les « simuler » avec des objets littéraux :

var leNamespace ={
ObjetSpecifique:{
prop:value,
methode:function(){}
}
CreateObjetSpecifique(){return Object.create(this.ObjetSpecifique)}
}

On ne profite dont pas d’une nouvelle classe ObjetSpecifique, on ne pourrat initialiser une variable avec, mais on pourra cloner cet attribut « modèle » pour l’utiliser :
var monObjet = leNamespace.CreateObjetSpecifique();
Cela permet de rattraper le fonctionnement d’un langage classique de haut niveau pour le javascript.

Et de nombreux autres : 

  • Nouvelles fonctions pour l’objet Math, Symbols, Reflect, Proxy
  • Des fonctionnements différents tel que l’affectation par décomposition ([a,b] = arr)
  • les paramètres du reste (function(...params) pour un nombre de paramètres indéfinis sous la forme d’un Array
  • la possibilité, ENFIN, de définir des valeurs par défaut pour les paramètres !
  • la backquote ` pour faire des chaines multi ligne et l’utilisation au sein d’une chaine de ${variable} pour afficher des variable…

 

Sources :

  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Language_Resources
  • https://tech.mozfr.org/post/2015/08/06/ES6-en-details-%3A-let-et-const
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_2015_par_Mozilla
  • https://www.grafikart.fr/formations/debuter-javascript/ecmascript-2015

Un commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *