revision:
Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).
Conceptually, hoisting is often presented as the compiler "splitting variable declaration and initialization, and moving (just) the declarations to the top of the code".
This allows variables to appear in code before they are defined.
However, any variable initialization in the original code will not happen until the line of code is executed.
In JavaScript, a variable can be declared after it has been used, or a variable can be used before it has been declared.
<div>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting01"></p>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting01A"></p>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting01B"></p>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting01C"></p>
</div>
<script>
function catName(name) {
document.getElementById("hoisting01").innerText = "My cat's name is " + name;
console.log("My cat's name is " + name);
}
catName("Tiger");
catNameA("Chloe");
function catNameA(name) {
document.getElementById("hoisting01A").innerText = "My cat's name is " + name;
console.log("My cat's name is " + name);
}
function codeHoist(){
a = 10;
let b = 50;
}
codeHoist();
document.getElementById("hoisting01B").innerText = a;
console.log(a); // 10
document.getElementById("hoisting01C").innerHTML = "ReferenceError: b is not defined";
console.log(b); // ReferenceError : b is not defined
</script>
Variables defined with "let" and "const" are hoisted to the top of the block, but not initialized.
The block of code is aware of the variable, but it cannot be used until it has been declared.
Using a let variable before it is declared will result in a "ReferenceError". The variable is in a "temporal dead zone" from the start of the block until it is declared.
see also console
code:
<div>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting02">see also console</p>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting02A"></p>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting02B"></p>
</div>
<script>
console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization
let name = "John";
console.log(name); // Prints "John"
console.log(naam); // Uncaught SyntaxError: Missing initializer in const declaration
const naam;
console.log(namen); // Uncaught ReferenceError: Cannot access 'name' before initialization
const namen = "John";
console.log(namen);
</script>
JavaScript only hoists declarations, not initializations. It is a good coding practice to initialize variables when you declare them.
Hoisting is an unknown or overlooked behavior of JavaScript.
To avoid bugs, always declare all variables at the beginning of every scope.
Since this is how JavaScript interprets the code, it is always a good rule.
see also console
<div>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting03">see also console</p>
<p class="spec" style="margin-left: 1vw;margin-top: 1vw;" id="hoisting03A"></p>
</div>
<script>
a = 5;
console.log(a);
let a; // error
</script>;
example 1
code:
<div>
<p class="example">example 1</p>
<p class="spec" id="demo"></p>
</div>
<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>
example 2
code:
<div>
<p class="example">example 2</p>
<p class="spec" id="demo2"></p>
</div>
<script>
var x1 // declare x1
x1 = 5; // Assign 5 to x1
elem = document.getElementById("demo2"); // Find an element
elem.innerHTML = x1; // Display x in the element
</script>
example 3
code:
<div>
<p class="example">example 3</p>
<p class="spec" id="demo3"></p>
</div>
<script>
var x2 = 5; // Initialize x2
var y2 = 7; // Initialize y2
elem = document.getElementById("demo3"); // Find an element
elem.innerHTML = x2 + " " + y2; // Display x2 and y2
</script>
example 4
code:
<div>
<p class="example">example 4</p>
<p class="spec" id="demo4"></p>
</div>
<script>
var x3 = 5; // Initialize x3
elem = document.getElementById("demo4"); // Find an element
elem.innerHTML = "x3 is " + x + " and y3 is " + y; // Display x3 and y3
var y3 = 7; // Initialize y3
</script>