Var Wars - L'ascension d'ES2015

Dans cet article, nous allons explorer les différentes manières de déclarer une variable en JavaScript.

Nous verrons également pourquoi var est si problématique et pourquoi il faut l'éviter.

var en quelques mots (aka Star Var, la menace du hoisting)

Jusqu'à ES5, c'était la seule manière de déclarer une variable.

// Déclaration de variable
var sith;
// Initialisation
sith = 'Darth Vader';

ou directement

// Déclaration de variable & initialisation
var sith = 'Darth Vader';

Comme dans d'autres langages, il est simple de déclarer une variable. Mais en JavaScript, la portée des variables fonctionne différemment.

var est lié à la fonction, il se réfère à la fonction parente. Si il n'y a pas de fonction parente, votre var est globale.

var hanShotFirst = true;

if (true) {
  var hanShotFirst = false;
}

console.log(hanShotFirst); // false

Comme vous pouvez le voir, vous pouvez réécrire et redéclarer notre variable hanShotFirst (alors que c'est vraiment Han qui tire en premier, de toutes façons 😉)

Autre chose étrange :

var obiWan = '🧔🏼';

console.log(obiWan); // '🧔🏼'
console.log(anakin); // 'undefined' sans erreur

var anakin = '💇‍♂️';
console.log(anakin); // '💇‍♂️'

Ce comportement atypique s'appelle le hoisting.

En fait, le moteur JavaScript lit le script avant son exécution :

var obiWan = '🧔🏼';
var anakin;

console.log(obiWan); // '🧔🏼'
console.log(anakin); // 'undefined' sans erreur

anakin = '💇‍♂️';
console.log(anakin); // '💇‍♂️'

Le moteur remonte les déclarations de variables et de fonctions aussi haut que possible au début de la fonction parente.

Il est donc possible d'utiliser les fonctions et variables du script avant qu'elles ne soient réellement déclarées ! 🧐

Je sens une perturbation dans la force...

ES2015 arrive avec let et const (aka Star Var, un nouveau scope)

La nouvelle version de la norme ES2015 apporte quelques fonctionnalités intéressantes comme les nouvelles déclarations de variables let et const.

let deathStar = 'détruite';

if (deathStar === 'détruite') {
  let deathStar = 'en attente';
}

console.log(deathStar); // 'détruite', portée parente !

Comme vous pouvez le voir, let résout nos problèmes précédents.

Il empêche :

• l'utilisation avant l'initialisation (erreur)
• la redéclaration dans le même bloc (erreur)
• lié au bloc (empêche l'occultation)

Et const ?

Oui, vous pouvez déclarer une constante, mais pas comme dans d'autres langages.

const deathStarV2 = {
  moteur: 'éteint'
};

deathstarV2 = new DeathStar('V3'); // Uncaught TypeError: Affectation à une variable const.

deathstarV2.moteur = 'allumé'; // ça fonctionne ! 🚀🚀🚀

Nous pouvons conserver la référence de l'objet, pas son contenu.

Conclusion

J'espère que cet article vous a donné une bonne vision des trois manières de déclarer des variables en JavaScript.

Nous comprenons pourquoi var est dangereux et pourquoi nous devrions utiliser let et const à la place.

C'est basique mais essentiel.

C'est tout pour aujourd'hui, merci de lire ! Que le code soit avec vous !