Programmer en ECMASCRIPT 6 alias ES2015

Si vous faites du Web, vous avez sans doute entendu abondamment parler de Ecmascript 6. C’est une norme qui décrit la syntaxe du langage Javascript (pour simplifier)

Voyons les innovations syntaxiques que vous devez absolument connaitre car tous les navigateurs les utilisent aujourd’hui.

Déclaration de variable avec var (méthode historique)

Jusqu’à présent vous ne déclariez les variables qu’avec var.

Or il cause beaucoup de poblèmes : son scope est global à l’objet window.

var prenom = "Yvon"

On dit que son scope (sa portée) est globale. Si vous venez du monde du php, vous avez dû voir qu’on peut déclarer une variable comme globale avec le mot clé global.

Pour des raisons de bonne pratique de sécurité, il faut éviter de déclarer des variables globales.

Revenons au Javascript, var déclare une variable de porté globale, c’est à dire qu’elle peut être utilisée partout.

Jusqu’à récemment avant ES6, nous ne pouvions déclarer de variable de porté de type bloc. Un bloc est tout ce qui est compris dans une parie d’accolade.

Une variable de type bloc, de portée bloc, n’existe que dans la paire d’accolade, en dehors on ne la connait pas.

Historiquement var a été introduit pou faciliter la programmation, afin que les programmeurs novices puissent utiliser rapidement Javascript. Mais au fil du temps cela s’est avéré être un mauvais choix. Aujourd’hui (seulement) les concepteur du langage on décidé d’introduire deux nouvelles façons de déclarer une variable. Ces deux nouvelles façons const et let déclarent des variables de porté de bloc.

Déclaration de variable avec const

A la différence de PHP par exemple, const ne déclare pas une constante ! La signification de const est que le binding est constant, invariable, vous ne pouvez pas réassigner la variable à un pointeur différent, mais vous pouvez modifier sa valeur. En Javascript, la notion de constante existe dans le cadre de la programmation fonctionnelle via des librairie comme immutable.js .

cont prenom = "Yvon"

Pour vous montrer que const a sa valeur qui peut changer :

const prenom = 'Yvon' prenom = 'Julien' console.log(prenom) // Erreur Uncaught TypeError: Assignment to constant variable. 

Le code ci-dessus montre que la valeur de la primitive n’est pas modifiable. Par contre, si on déclare un objet litéral :

const eleve = { prenom :'Yvon', nom : 'Huynh'} eleve.prenom = 'Julien' console.log(eleve.prenom) // Julien

 

On peut modifier une propriété d’un objet litéral. eleve est bindée par référence à cet objet. Mais si on essai de réaffecter par référence :

const eleve = { prenom : 'yvon', nom : 'huynh' } eleve = { prenom : 'toto' } console.log(eleve.prenom) // Uncaught TypeError: Assignment to constant variable.

Une autre particularité de const est que vous devez initialiser dè sla déclaration de la variable, sinon vous avez une erreur.

const pays; //Uncaught SyntaxError: Missing initializer in const declaration

Block scope avec const

Enfin regardons l’aspect le plus important concernant const, il est block scoped, c’est à dire qu’en dehors (à l’extérieur) des accolades où la variable a été définie, elle n’existe pas.

function saluer(ami){ const pays = 'France' if(pays === 'France'){ const greet = ' Monsieur' console.log('Bienvenue en ' + pays + greet) } console.log('A une autre fois en ' + pays) console.log('Au revoir ' + greet) } saluer('Yvon') // imprime Bienvenue en France Monsieur,A une autre fois en France, mais affiche Uncaught ReferenceError: greet is not defined

Alors que pays reste en valable, greet n’est plus connue en dehors des accolades où greet a été définie.

Un exemple encore plus flagrant on va créer deux variables portant le même nom,mais avec des valeurs différentes :

const ville = 'Paris' function saluer(nom){ const ville = 'Nantes' console.log('bienvenue à ' + ville) } saluer('Yvon') //bienvenue à Nantes console.log('Euh non on est à ' + ville) //Euh non on est à Paris

Nantes ne peut exister en dehors des accolades de la fonction.

 

Peut on rendre une variable const vraiment immuable?

Même si dans votre vie vous aurez probablement peu l’opportunitéde rendre un objet immuable, il existe une façon de rendre immuable une variable déclarée avec const.

const eleve = Object.freeze( {prenom : 'yvon', adresse : { rue : ' De gaulle', ville : 'Nantes', codepostal : 44000} }) eleve.prenom ='Julien' console.log(eleve.prenom) // yvon

Vous remarquez que la propriété prenom est inchangée. Si vous utilisez « use strict »; vous aurez une erreur Uncaught TypeError: Cannot assign to read only property ‘prenom’ of object ‘#

Object.freeze est ‘shallow’ comme on dit en anglais, cela veut dire que vous pouvez quand même altérer les propriétés des objets imbriquée.

"use strict"; const eleve = Object.freeze( {prenom : 'yvon', adresse : { rue : ' De gaulle', ville : 'Nantes', codepostal : 44000} }) eleve.adresse.codepostal = 44100 console.log(eleve.adresse.codepostal) // 44100

Le code ci-dessus est tout à fait valide.

A quoi ça sert const en Javascript?

On dit que les variables déclarées avec const sont « block scoped ». Un bloc c’est ce qui est entre accolade dans la définition d’une fonction. C’est pour pallier au défaut de var (qui est défini dans les accolades d’une fonction, on dit que var est function scoped), qu’on a introduit const afin de mieux structurer son code et d’éviter des collisions.

 

Qu’est ce que la Temporal Dead Zone?

Lorsqu’un code javascrip est exécuté, une variable ne peut être settée ou gettée tant que l’exécution n’a pas atteint la ligne de code où la variable a été définie.

function saluer(name){ // début de la fonction if(name === 'yvon'){ //début du block var ville = 'Paris' console.log('Pays = ' + pays + ' Ville destination = ' + ville) var pays = 'France' } } saluer('yvon') // Pays = undefined Ville destination = Paris

On voit que la variable pays étant définie après le console.log, il est à undefined. Par contre que se passe-t-il si on a const à la place de var ?

function saluer(name){ // début de la fonction if(name === 'yvon'){ //début du block var ville = 'Paris' console.log('Pays = ' + pays + ' Ville destination = ' + ville) const pays = 'France' } } saluer('yvon') //Uncaught ReferenceError: pays is not defined

Vous avez une erreur (un avertissement) comme quoi votre variable n’est pas définie. Au moment ou le console.log s’exécute, pays n’est pas encore définie, elle n’a pas de valeur attribuée. L’utilité de la Temporal Dead Zone (TDZ) est de vous permettre de coder plus proprement, en lançant des avertissements.