Hoisting is a concept in javascript which makes the things available before the line of declaration. I know it sounds bit stupid but it’s what it is.

We will see this and understand how it works and how it is useful. There are some drawbacks also and it’s important that we know that too.

Because of the drawbacks of hoisting there is let keyword came into existence. let keyword only solve the hoisting related problems only.

Hoisting #

Let’s understand the hosting by example because code speaks louder. Seeing the code you will get much more understanding than whatever I write or speak.

I will talk about two error and it’s reason. When we get this error or how we can get into this problem. You don’t need to remember the error, just remember these cases.

• 1 - Do you know what will happen if you call a variable and never declare that?

basic-1.js

console.log(yourAge);

I know most of you it will give us error but what kind of error or what error ? This error is important in order to understand hoisting.

• 2 - Do you know what will happen if you call a variable, which don’t have any value. ?

basic-2.js

var yourName;
console.log(yourName);

I know most you will say null or undefined and you are right here. As there is no value in the variable but variable is defined. So, we will not get error like previous example instead we will get undefined as result.

• 3 - Do you know what will happen if you call a variable before defining it ?

basic-3.js

console.log(yourSalary);
var yourSalary = 123;

If you are expecting some error this time then you are wrong! We will get output as undefined. Don’t think that undefined is error, this undefined is similar to previous undefined. yourSalary is variable defined but it’s value is not 123.

This was hoisting(basic-3.js), making variable available before it’s declaration. This is a problem variable should not be available before declaration.

If you understood the above examples then probably you know the hoisting now but there are some more things which you should know.

Why let? #

let is a new keyword in js world which works similar to var but it definitely have some different behavior. let came in the js to replace the var totally. This could be bit confusing for beginner why two different way of defining variable.

re-declaration #

Let’s see how var is flaw for javascript programming and why let came into the existence. var allow re-declaration of variable with same name, this can’t be found anywhere.

let-1.js

var yourAge = 10;
console.log(yourAge);
var yourAge = 20;
console.log(yourAge);

Let’s see how let will behave here and why var is flaw here. This is anti-pattern and bad for programming.

let-2.js

let yourAge = 10;
console.log(yourAge);
let yourAge = 20; // Uncaught SyntaxError: Identifier 'yourAge' has already been declared
console.log(yourAge);

variable hoisting #

Let’s see the hoisting behavior of variable and how let solved that.

variable-1.js

console.log(yourAge); // undefined
var yourAge = 20;

Let’s see how let will behave here and why var is flaw here. This is again another anti-pattern and bad for programming.

variable-2.js

console.log(yourAge); // Uncaught ReferenceError: yourAge is not defined
let yourAge = 20;

Here you again got an un expected behavior of javascript and it’s because of hoisting. Similar program is giving different error. If you understand the error then you got the hoisting.

ReferenceError vs undefined #

Let’s talk about the error and get clear understanding. I will talk about the error and why this error problem for us. This error bring the let keyword in the javascript world.

You might think what basics I am talking and it’s like useless. But wait for sometime and it will start making sense.

When you execute any javascript file then the complete script is being loaded but not executed. It is being loaded because it look of var and function keyword in the file. Now when the start executing from line #1 then it know about all the variable defined with var keyword and all the function.

• Function is hoisted
• Variable with var keyword is hoisted

Let’s see more example and get more understanding about the hoisting.

Function Hoisting #

This is very common example and most of your are familiar with this. I also think it don’t require any explanation.

I will show you three different example to make function hoisting more clear. Focus on each of the code because all are similar and there is only little difference.

function-hoisting-1.js

var result = sum(2, 3);
console.log(result); //  5

function sum(num1, num2) {
  return num1 + num2;
}

The above example is correct and if you will run this, it should work. We are calling the sum function before declaring/defining and that’s fine.

The above code works because function is hoisted in javascript

Let see when the function is not going to be hoisted. Yes function is not always hoisted.

function-hoisting-2.js

var result = add(2, 3);
console.log(result); // add is not a function

var add = function (num1, num2) {
  return num1 + num2;
};

When you will run the above code you will get error similar to this one

When we assign the function to any variable that doesn’t work like regular function. Regular function is hoisted but when we assign any function to the variable, it isn’t hoisted.

Fun Fact - add is not a function but it’s defined. As var keyword hoist the variable which means add is defined but it doesn’t contain anything, it’s undefined.

function-hoisting-3.js

var result = add(2, 3);
console.log(result); // ReferenceError: add is not defined

let add = function (num1, num2) {
  return num1 + num2;
};

Conclusion #

I hope you got clear understating about the hoisting. This might be a mess for you too because I wrote lots of code snippet instead of explanation.