Hosting the Hoisting in JavaScript

hoisting in javascript

Hosting the Hoisting in JavaScript


Hoisting in JavaScript is something that is there from always but has come into the limelight after the ES6 changes. In ES6 we saw two new keywords let and const which avoid the hoisting.

Before starting, predict the output of the below sample codes:

var name;
console.log(name);

//Outputs undefined on the console as it has been declared but not initialized.

So we saw that when we declare a variable but not initialize it, that variable holds the value undefined.

var fname="sourabh";
console.log(fname);

//You predicted the output as sourabh. Good Job!

console.log("first - "+lname);
var lname="gupta";
console.log("second - "+lname);

//The ouput will be first - undefined and second - gupta.

//Amazed? Bear with me, you'll get your answer!!

Let’s see what happens when we try to call a function before its declaration.

printName();

function printName(){
    console.log("sourabh");
}

//The output will be sourabh.

So you saw that unlike all the programming languages we can use the functions and variables in JavaScript before the declaration because even before we run our JavaScript code what happens is the whole JavaScript file is scanned and a global execution context is created and even before our code is run we get access to all the variable and functions as all the variables and functions get some memory allocated in that global execution context but there’s a slight difference when variables get some memory into the global execution context they don’t get initialized whereas when the functions do they are made ready to use as well.

One more example,

console.log(middleName);

//It gives the error on the console as the variable we are trying to access is not declared.

But I said that we can access the variable even before declaring them, Yes, We can but there’s a condition, we can access the variables and function before declaring them but they have to be declared somewhere in the code.

I repeat functions get memory in the global execution context and are made ready to use whereas variables are just declared but not initialized. Remember this statement we’ll come back to it again.

Photo by bruce mars on Unsplash

That was just a spoiler, Let’s dive deep into the Hoisting with some example codes.

//Suppose we have a function to double a number

function doubleNumber(num){
    console.log(num*2);
}

doubleNumber(5);

//Outputs 10 on console. WELL AND GOOD!!

Let’s try to move the function call above the function declaration.

doubleNumber(5);

function doubleNumber(num){
    console.log(num*2);
}

//Outputs 10 on console. STILL AS EXPECTED!!

Stay there with me, you might have seen in JavaScript we can store a function in a variable as shown below. This is also a valid code. Right?

//Function to double a number stored in variable doubleNumber

var doubleNumber = function (num){
    console.log(num*2);
}
doubleNumber(5);

//Outputs 10 on console. THINGS STILL THE SAME!!

If we rewind two steps back we made a function call before the declaration of the function. Let’s do it again with the above method.

//Function to double a number stored in variable doubleNumber
doubleNumber(5);
var doubleNumber = function (num){
    console.log(num*2);
}
//ERROR : doubleNumber is not a function.

doubleNumber is not a function, So what it is? Let’s check that out.

console.log(doubleNumber);

var doubleNumber = function (num){
    console.log(num*2);
}

//Outputs undefined on the console.

Ohh…It was a valid JavaScript function declaration but not giving an error what happened now? Now let me again remind you of the statement.

The functions get memory in the global execution context and made ready to use but variables are just declared not initialized. So the doubleNumber which we are trying to call is an undefined variable, not a function.

Got my point?

So what happens when we declare a variable in JavaScript using the var keyword, JavaScript itself hoists them i.e. even before the code is run the whole JavaScript code is scanned and memory gets allocated to all the variables in the global execution context and we can access them anywhere in the code.

One last thing as I mentioned in the starting that let and const avoid hoisting so when you declare a variable or a constant using let or const respectively it won’t be hoisted i.e. we can only access them after the declaration.

console.log(a);
console.log(b);

let a = "hello";
const b = "world";

// This will give error on the console as let and const avoid hoisting.

That’s all for Hoisting. Hope I was able to make you understand and you won’t have to look somewhere else for Hoisting now.


Reading is good but reading with implementation is great !

Suggestions and critics are always welcome.

Developer and Author, QuaRANT9 Full-stack Developer | UX/UI | Turns tea into code. To read articles on JavaScript Follow me on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top