Hoisting in Javascript(var and functions)

Hello friend👋 In this blog I will cover about one of the important problem beginner face while working with variables and functions in JS. Yes, it is about hoisting. This blog will cover hoisting concept only for variables and functions.

Prerequisites: You should know some basics of JS before diving into the blog.

After reading this blog:

1. You will be able to figure out why there is a reference error in your code.
2. You will become more comfortable working with variables and functions.

What is hoisting?

Whenever JS code is executed, before that memory allocation phase is carried out by JS engine, and in that phase variables declaration and functions are moved to the top of code. This movement of the code is said as hoisting. But, rather than thinking of hoisting in this moving of variables and functions to top of code, lets dive into the things which is happening behind the scenes.

I would highly recommend to read about Execution context in JS, this would make it more easy for you to understand hoisting better.

var a = 2;

function action() {
  console.log("code daily");
}

console.log(a);  //guess output
action();  //guess output

Now if you know some basic JS you might have guessed the output for above code.

Let us make some changes in code.

console.log(a);
action();
console.log(action); // note that we haven't invoked the function
// what will be the output for above statements
var a = 2;

function action() {
  console.log("code daily");
}

Most of programming languages will give you an error for such kind of code, it is because you are try to access something even before its declaration. But, JS works different in this case.

For a:

1. So for first line console.log(a) output is undefined, the reason for this is because variables are hoisted and partially initialized i.e. when first phase in Execution context is completed, JS engine does memory allocation and assigns a special placeholder as undefined for var

2. And when first line is executed in code execution phase it prints undefined because at that moment a=undefined. The value of a changes to a=2 after line 5 is executed.

For action:

1. Observe output of second line. It prints code daily on console. But wait, shouldn't it print undefined? So, in case of functions, they are fully hoisted i.e. function action is given whole definition of itself as its value.

2. The above statement can be confirmed with 3rd console.log(action); statement. We can observe its output as whole function definition itself ƒ action() { console.log("code daily");} And that is why when action is invoked on 2nd line instead of printing undefined it prints code daily

Have a look at global section, we can observe that even before 1st line is executed we have a as undefined and action having some of its values and its definition.

Arrow Function:

Apart from these regular functions we also have arrow functions which were introduced in ES6. So, now lets have a look on how these functions work when they are hoisted.

Let us tweak our code a little bit

console.log(a);
console.log(action);
action();
// what will be the output for above statements
var a = 2;

var action = () => {
  console.log("code daily");
};

Try to guess the output of above code, Let me give you a hint action now is not a function name but instead a variable.

Here, we can see that first two lines prints undefined, one for a and other for action. And on third line of console we see an error where it says action is not a function.

Let us see what values are assigned to this variables and why we have an error over here.

1. So even before the code is executed we see that a and action are assigned undefined in first phase if execution. Here action behaves just as variables in case of hoisting.
2. The error here is just because we are trying to invoke a function which is undefined i.e. there is no function definition for action. And hence, for this kind of functions we should not try to access those before initializing.

The same would be the case if action function is wrote as:

var action = function () {
  console.log("code daily");
};

Finally we have come to the end of blog.

Hope that you understood about hoisting concept for var and functions and learned something new today. Again a gentle reminder for you: code daily😃