What is JavaScript hoisting?

Hoisting is a concept specific to JavaScript. JavaScript moves all declarations to the top as a default behavior.

Let’s see some examples to understand the context and possible issues that hoisting might cause.

Variable Hoisting:

console.log(“x =”+x); // logs x =1
var x; // declaration at the bottom moves to the top

The declaration of variable x at the bottom moves to the top, giving us the value 1 in alert instead of undefined.

Can you guess the output of below example?

console.log(“x = ”,x); // logs x = 1
var x = 5; //initialization vs declaration
console.log(“x = ”,x); // logs x = 5

1 and 5 that’s right!

Hoisting only happens with declarations but not with initializations

That means, if you execute below code, you will get Uncaught ReferenceError: x is not defined

console.log(“x = “,x); // Throws Uncaught ReferenceError
x = 6; // initialization

How do we make sure we don’t write code with unusual behaviors?

strict, const and let to the rescue!

You can add “use strict;” in the first line of JS code to make sure a variable is always declared before using it.

//With strict keyword

Function hoisting:

Hoisting also applies to functions in JavaScript. You can invoke a function even before declaring it.

printX(1); // logs x = 1

How can we stop hoisting of functions? by using function expressions!

printMe(1); // printMe is not a function

Variable and Function hoisting:

There is an order of precedence that applies to hoisting if you are using a variable and function with same name.

  • Variable initialization takes precedence over function declaration.
var printX = 0; // initialization

function printX(val) {
console.log("x =" , val);
console.log("printX",printX) // logs 0
  • Function declarations take precedence over variable declarations.
var printX; // declaration

function printX(val) {
console.log("x =" , val);
console.log("printX",printX) // logs [Function: printX]
printX(3) // logs x = 3

I hope the last example was convincing enough for you to start declaring variables and functions before using them or leverage let and const. 😃