Hoisting JavaScript

Le hoisting est le comportement par défaut de JavaScript qui déplace les déclarations vers le haut.

Les déclarations JavaScript sont montées

En JavaScript, on peut déclarer une variable après son utilisation.

Autrement dit, on peut l'utiliser avant sa déclaration.

Exemple 1 AvecExemple 2 Les résultats sont les mêmes :

Exemple 1

x = 5; // Affecter 5 à x
elem = document.getElementById("demo"); // Trouver l'élément
elem.innerHTML = x;                     // Afficher x dans l'élément
var x; // Déclarer x

Essayez-le vous-même

Exemple 2

var x; // Déclarer x
x = 5; // Affecter 5 à x
elem = document.getElementById("demo"); // Trouver l'élément
elem.innerHTML = x;                     // Afficher x dans l'élément

Essayez-le vous-même

Pour comprendre cela, vous devez comprendre le terme "hoisting".

Le hoisting est le comportement par défaut de JavaScript qui monte toutes les déclarations au sommet de l'aire d'application actuelle (monte au sommet du script actuel ou de la fonction actuelle).

les mots-clés let et const

avec let ou const Les variables et les constantes déclarées ne sont pas montées !

Veuillez utiliser JS Let / Const Pour en savoir plus sur let et const, lisez ici.

Les initialisations JavaScript ne sont pas montées

JavaScript ne monte que les déclarations, pas les initialisations.

Exemple 1 AvecExemple 2 Les résultats ne sont pas les mêmes :

Exemple 1

var x = 5; // Initialiser x
var y = 7; // Initialiser y
elem = document.getElementById("demo"); // Trouver l'élément
elem.innerHTML = x + " " + y;           // Afficher x et y

Essayez-le vous-même

Exemple 2

var x = 5; // Initialiser x
elem = document.getElementById("demo"); // Trouver l'élément
elem.innerHTML = x + " " + y;           // Afficher x et y
var y = 7; // Initialiser y

Essayez-le vous-même

Peut-on dire que dans le dernier exemple, y est toujours non défini ?

C'est parce que seule la déclaration (var y) et non l'initialisation (=7) est portée vers le haut.

En raison du hoisting, y a été déclarée avant son utilisation, mais comme l'initialisation n'a pas été élevée, la valeur de y reste indéfinie.

L'exemple 2 est aussi le même :

Exemple

var x = 5; // Initialiser x
var y;     // Déclarer y
elem = document.getElementById("demo"); // Trouver l'élément
elem.innerHTML = x + " " + y;           // Afficher x et y
y = 7;    // Affecter 7 à y

Essayez-le vous-même

Déclarez vos variables en haut !

Le hoisting (pour beaucoup de développeurs) est un comportement inconnu ou négligé du JavaScript.

Si les développeurs ne comprennent pas le hoisting, le programme peut contenir des bugs (erreurs).

Pour éviter les bugs, déclarez toujours toutes les variables à la début de chaque portée.

Comme c'est la manière dont JavaScript interprète le code, gardez cette bonne habitude.

Le mode strict de JavaScript ne permet pas d'utiliser des variables non déclarées.

Veuillez étudier le prochain chapitre “use strict。”