JavaScript hejsning

Indholdsfortegnelse

Hoisting er JavaScripts standardadfærd ved at flytte erklæringer til top.

JavaScript-erklæringer er hejst

I JavaScript kan en variabel erklæres, efter at den er blevet brugt.

Med andre ord; en variabel kan bruges, før den er blevet erklæret.

Eksempel 1 giver det samme resultat som Eksempel 2:

Eksempel 1

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element
var x; // Declare x

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element

var x; // Declare x
</script>

</body>
</html>

Eksempel 2

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element
</script>

</body>
</html>

For at forstå dette, skal du forstå udtrykket "hejsning".

Hoisting er JavaScripts standardadfærd med at flytte alle erklæringer til toppen af det aktuelle omfang (til toppen af det aktuelle script eller den aktuelle funktion).

De lad og const Søgeord

Variabler defineret med let og const er hejst til toppen af blokken, men ikke initialiseret.<p>Betydning: Kodeblokken er opmærksom på variabel, men den kan ikke bruges før den er deklareret. <p>Brug af en let-variabel, før den erklæres, vil resultere i en ReferenceError.

Variablen er i en "tidsbestemt død zone" fra starten af blokken, indtil den erklæres:

Eksempel

carName = "Volvo";
let carName;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Brug af en const-variabel, før den er erklæret, er en syntaksfejl, så koden vil simpelthen ikke køre.

Eksempel

Denne kode vil ikke køre.

carName = "Volvo";
const carName;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>const</b>, you cannot use a variable before it is declared.</p>
<p>Try to remove the //.</p>

<p id="demo"></p>

<script>
carName = "Volvo";
//const carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Læs mere om let og const i JS Let/Const.

JavaScript-initialiseringer løftes ikke

JavaScript løfter kun erklæringer, ikke initialiseringer.

Eksempel 1 giver ikke det samme resultat som Eksempel 2:

Eksempel 1

var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y = 7; // Initialize y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

</script>

</body>
</html>

Eksempel 2

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5;  // Initialize x

elem = document.getElementById("demo");      // Find an element 
elem.innerHTML = "x is " + x + " and y is " + y;  // Display x and y

var y = 7;  // Initialize y
</script>

</body>
</html>

Giver det mening, at y er udefineret i det sidste eksempel?

Dette skyldes, at kun erklæringen (var y), ikke initialiseringen (=7) er hejst til toppen.

På grund af hejsning er y blevet deklareret før den tages i brug, men pga initialiseringer ikke hejses, værdien af y er udefineret.

Eksempel 2 er det samme som at skrive:

Eksempel

var x = 5; // Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

y = 7;    // Assign 7 to y

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y;   // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

y = 7;   // Assign 7 to y

</script>

</body>
</html>

Erklær dine variabler øverst!

Hoisting er (for mange udviklere) en ukendt eller overset adfærd af JavaScript.

Hvis en udvikler ikke forstår hejsning, kan programmer indeholde fejl (fejl).<p> For at undgå fejl skal du altid deklarere alle variabler i begyndelsen af hvert omfang.<p> Da det er sådan JavaScript fortolker kode, er det altid en god regel.

JavaScript i streng tilstand tillader ikke, at variabler bruges, hvis de er ikke erklæret.
Undersøg "brug streng" i næste kapitel.