JavaScript Hoisting Explained With Examples

JavaScript hoisting refers to how variables declared in an outer scope are automatically available within inner scopes. This means that when you declare a variable inside a function, it becomes available for use outside of that function.

In this article, we will explain what it is and how it works. We will also show you some examples of how it can be used effectively.

What Is Hoisting?

Hoisting is JavaScript’s default behavior of moving declarations to the top. function declarations are “moved” from where they appear in the flow of the code to the top of the code. This is what hoisting means.

Hoisting explanation with example

In the below example, the function a() is hoisted inside the b(). find the explanation below the code

var a = 1;   //global a = 1

function b() {
    a = 10;     //local a = 20
    return;

    function a() {} //local 
}

b();
alert(a);    //global a = 1 

1. The global a is set to 1
2. b() is called
3. function a() {} is hoisted and creates a local variable a that masks the global a
4. The local a is set to 10 (overwriting the function a)
5. The global a (Still 1) is alerted

Live Demo

See the Pen JavaScript Hoisting by w3tweaks (@w3tweaks) on CodePen.

How Hoisting will work?

In the below example, I’ll show you how javascript will work in the background for the below code.

var temp got assigned with “setTimeout” and “setTimeout” is not declared anywhere. Let’s see how JavaScript works for the below code

var temp = setTimeout,
setTimeout = function() {};

JavaScript will run the code background like below.

setTimeOut which is hoisted and the value will be undefined. now the temp value will be ‘undefined‘

var temp; // = undefined
var setTimeout; // = undefined
temp = setTimeout;
setTimeout = function() {};

What does it mean?

If we take a look at some simple code below, we can see how the order of execution changes based on whether or not we use function hoisting.

function foo() {
  console.log("foo");
}
function bar() {
  console.log("bar");
}
// Without function hoisting
foo(); // logs 'foo'
bar(); // logs 'bar'

// With function hoisting
(function () {
   console. log ("foo");
})();
(function () {
   console.log ("bar");
}) ();

How to avoid hoisting in javascript?

In short, In JavaScript, the strict mode does not allow variables to be used if the variables are not declared. Nothing here relates that it disables the Hoisting. It just throws an error if the variable being initialized is not declared.

Code Snippet

JavaScript hoisting can be avoided using strict mode. Find the example code below. Once we use the strict mode it, JavaScript will throw the error when the variable not declared.

"use strict";
x = 3.14;  // This will cause an error (x is not defined).