Skip to main content

What is hoisting in Javascript

One of the most important and little confusing topic in Javascript is Hoisting.

The literal meaning of the word 'hoisting' is 'raising up' and its meaning w.r.t Javascript also remains the same.
Before the execution of Javascript program/file/function, it is parsed by the Javascript engine(e.g. V8 engine in Chrome). During this parsing phase, all the declaration(variable and function) gets hoisted. This mean the memory is allocatted for these variables and functions during the parsing phase.
Basically its a default behaviour of Javascript engine to move all the declaration to the top of that function scope in which it is defined.

Variable hoisting

Since variable declaration are moved on top of the function scope, we don't get error(but undefined value) when we try to fetch a variable before its declaration. e.g.
1.   console.log(num);    // undefined
2.   var num = 5;
Here, num defined in line 2 but because of hoisting its declaration is moved on top by Javascript engine and that's why we don't get error in line 1.
So basically this is how our program gets parsed/compiled by Javascript engine.
1.   var num;     // JS engine have moved the declaration on top internally
2.   console.log(num);  // undefined
3.   num = 5;

NOTE: variables declared with let/const also gets hoisted but we cannot access them before the actual declaration is evaluated at runtime." We will get "Reference error" unlike "undefined" in variable declared with var.

Remember only the declarations gets moved-up not the value assigned. That's why we don't get value of num as 5 but undefined.

NOTE: Javascript in the strict mode, .i.e. when "use strict" is used in your program, doesn't allow variables to be used before its declaration.

Function Hoisting

Consider following program.
1.   sayHello("Alex");
2.   function sayHello(name){
3.          alert("Hi " + name);
4.   }
Question is, can we call the function before its definition? Lets find answer to this. We write function in two ways : function declaration and function expression. In our program we have used function declaration to define sayHello(). Similar to variable, function declarations also gets hoisted in Javascript. That means sayHello is already available in the memory once Program is parsed by JS engine. So we can actually call sayHello() before its definition in Javascript program. We are able to call the function sayHello before its definition because sayHello gets hoisted and it is available in the memory.
1.   console.log(sayHello);
2.   function sayHello(name){
3.          alert("Hi " + name);
4.   }
output :ƒ sayHello(name){
                   alert("Hi " + name);
We can call the function before its definition in case of "Function declaration" but in function expression we can't, as function expression doesn't gets hoisted or in other words we function definition is not available but only the variable with undefined value.e.g.
1.   console.log(sayHello);
2.   var sayHello = function(name){
3.          alert("Hi " + name);
4.   }
output: undefined
Since sayHello is undefined variable we get error. e.g.
1. sayHello("Alex");   // Error : sayHello is not a function
2. var sayHello = (name) => alert("Hi " + name);
So key take away is
  • Variables and Function declaration gets hoisted. 
  • By default, JS engine assign undefined to hoisted variable.
  • Function is avaiable throughout the scope due to hoisting.
Hope this post was helpful (^.^). Subscribe and leave your comment to support.
Thank you


  1. Hi there is error in this article "let and const both are hoisted"

    1. Thanks for mentioning it. Appreciate.

      Yes may be I have to rephrase that line as "let and const hoist but you cannot access them before the actual declaration is evaluated at runtime."


Post a Comment

Popular Posts

Javascript Hoisting Interview Question and Answers - 5

In this post,I have tried to cover all the types of possible interview questions and answers on hoisting. If you are not familiar with the hoisting, I would highly recommend you to go to my post on hoisting . Once you are comfortable with the topic, you can attempt these questions. Understanding the type of question will help you to answer. I have provided the hint after each question. All the answers are given at the end of the post. //Question 1 console.log('bar:', bar) bar = 15 var foo = 1 console.log(foo, bar) var bar Hint : Basics of hoisting //Question 2 var foo = 5 console.log('foo:', foo) var foo; var bar = 10; var bar; console.log('bar:', bar) var baz = 10 var baz = 12 console.log('baz:', baz) Hint : Basics of hoisting     //Question 3 function foo() { function bar() { return 5 } return bar() function bar() { return 10 } } console.log(foo()); Hi

Javascript Closure Interview Questions and Answers - 6

Here in the post, I have posted all the possible interview questions and answers on closure. If you are not familiar with the closure , I would highly recommend you to go to my post on   closure . Once you are comfortable with the topic, you can attempt these questions. All the answers are given at the end of the post. //Question 1 function foo() { var a = 5 function bar() { console.log(a) } return bar; } var baz = foo() baz()   // Question 2 function outer(a) { var b = 2 function inner() { var c = 5 console.log(a * b * c) } return inner; } var multiply = outer(5) multiply() // Question 3 const arr = [10, 20, 30, 40, 50] for (var i = 0; i < arr.length; i++) { setTimeout(function() { console.log('Index: ' + i + ', element: ' + arr[i]) }, 1000) } // Question 4 for (var i = 0; i < 5; i++) { setTimeout(function(i) { return function() {

Come Closure in Javascript

What is a closure? If we want to derive a definition,we can say, A closure is a feature of Javascript where inner function has access to the outer (enclosing) function’s variables—scope chain. This scope chains means inner function has: access to its own scope (variables defined between its curly brackets and its parameters), access to the outer function’s variables and parameters,  access to the global variables. Now we will look into it in detail. Consider following example var globalVar = "xyz"; function outerFunc(outerArg) { var outerVar = 'Alex'; function innerFunc(innerArg) { var innerVar = 'Chris'; console.log("globalVar = " + globalVar); console.log("outerArg = " + outerArg); console.log("innerArg = " + innerArg); console.log("outerVar = " + outerVar); console.log("innerVar = " + innerVar); } innerFunc(456); } outerFunc(12