Si vous débutez avec JavaScript, vous avez peut-être rencontré des situations déroutantes où les variables semblent indéfinies ou des erreurs telles que ReferenceError apparaissent de manière inattendue. Cela peut souvent être attribué à un concept connu sous le nom de levage. Mais qu'est-ce que le levage et comment affecte-t-il votre code ?

Dans ce guide, nous détaillerons le concept de levage et son fonctionnement en JavaScript. À la fin, vous comprendrez pourquoi le levage se produit et comment éviter les erreurs courantes.

Qu'est-ce que le levage ?
Le levage est le comportement de JavaScript consistant à déplacer les déclarations de variables et de fonctions vers le haut de leur portée avant l'exécution du code. Cela signifie que les déclarations (et non les affectations) sont traitées lors d'une phase de préparation avant l'exécution réelle de votre code.

JavaScript passe d'abord par une phase de création, où il alloue de la mémoire pour les variables et les fonctions. Cependant, la façon dont il gère les fonctions et les variables est légèrement différente.

Levage de fonctions : définitions entièrement levées
Les fonctions déclarées à l'aide du mot-clé function sont hissées avec leur définition complète. Cela vous permet d'appeler ou d'utiliser une fonction avant sa déclaration réelle dans le code.

Par exemple:

sum(5, 3); // Output: 8

function sum(a, b) {
  console.log(a   b);
}

Même si la fonction sum() est appelée avant d'être déclarée dans le code, elle fonctionne parfaitement car la déclaration de fonction est hissée au sommet de sa portée lors de la phase de création.

Levage variable : var, let et const
Le levage de variables se comporte différemment du levage de fonctions, et cela varie selon que vous utilisez var, let ou const.

1. var Déclarations
Lorsque vous déclarez une variable à l'aide de var, elle est hissée au sommet de sa portée avec une valeur par défaut non définie. Cela signifie que vous pouvez accéder à la variable avant sa déclaration, mais jusqu'à ce que vous lui attribuiez une valeur, la variable restera indéfinie.

console.log(city); // Output: undefined
var city = "New York";
console.log(city); // Output: "New York"

Dans cet exemple, la ville est levée avec une valeur initiale indéfinie. Une fois la valeur « New York » attribuée, la deuxième console.log() affiche correctement « New York ».

2. let et const Déclarations
Avec let et const, les variables sont également hissées, mais elles restent non initialisées. Cela signifie que si vous essayez d'y accéder avant leur déclaration, vous obtiendrez une ReferenceError.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "John Doe";

Cette erreur se produit parce que les variables let et const existent dans quelque chose appelé la zone morte temporelle (TDZ) entre le début de leur portée et le point où elles sont réellement déclarées. Pendant ce temps, vous ne pouvez pas référencer la variable.

Différence clé entre let et const
let et const se comportent de la même manière en termes de levage, mais const vous oblige à attribuer une valeur lors de la déclaration, tandis que let vous permet de déclarer une variable sans attribuer immédiatement de valeur.

const name = "John Doe"; // Must be initialized
let age; // Can be declared without assignment

Le levage en pratique
Regardons un exemple qui démontre à la fois la fonction et le levage variable en action :

console.log(city); // Output: undefined
sum(3, 4);    // Output: 7

function sum(x, y) {
  console.log(x   y);
}

var city = "New York";
console.log(city); // Output: "New York"

Ici, la fonction somme est hissée avec sa définition complète, elle peut donc être appelée avant que la fonction ne soit déclarée. Cependant, la ville est hissée avec une valeur indéfinie, ce qui explique pourquoi le premier console.log() renvoie undéfini. Une fois l'affectation effectuée, la deuxième console.log() affiche la valeur correcte.

Conseils pour éviter les pièges du levage
Pour éviter les problèmes causés par le levage, suivez ces bonnes pratiques :

1. - Utilisez let et const au lieu de var pour éviter d'accéder aux variables avant leur déclaration.
2.  - Déclarez les variables et les fonctions en haut de leur portée pour garantir que votre code se comporte de manière prévisible.

Récapitulatif des concepts clés du levage

• Le levage fait référence au comportement de JavaScript consistant à déplacer les déclarations vers le haut de leur portée avant l'exécution du code.
• Les fonctions déclarées avec function sont hissées avec leurs définitions complètes, ce qui permet de les utiliser avant d'être déclarées.
• Les variables déclarées avec var sont hissées avec une valeur par défaut de undefined, tandis que les variables déclarées avec let et const restent non initialisées, provoquant une ReferenceError si elles sont accessibles avant la déclaration.
• La zone morte temporelle (TDZ) s'applique à let et const, empêchant leur accès avant leur initialisation.

En comprenant le levage, vous pouvez éviter les problèmes courants en JavaScript et écrire un code plus prévisible. Avec la pratique, ces concepts deviendront une seconde nature.