Access variables and functions even before initialization 😱: JavaScript Hoisting

Access variables and functions even before initialization 😱: JavaScript Hoisting

Tuhin Das

Tuhin Das

10Β Sparkling heart


Before diving deep into this blog, I may assume that you had already read my blog on Javascript in action: Under the hood 🧐 and understood it for a better understanding of this blog.

Making impossible possible 😎

How would you feel if you get to access a variable or function even before your code has initialized it? That would feel something weird, right? That's not supposed to happen gif But yes, that's also possible with JavaScript. JavaScript's peculiar behavior has amazed developers from time to time. Even I was amazed when I got introduced to JavaScript for the first time πŸ˜…. Let's get back to the topic.

Taking an example say,

var a = 10; function greet () { console.log("Hi there! Nice to meet you"); } console.log(a); greet();

The output would look something like this. Hoisting1.jpg Are you kidding me gif No, I'm not kidding. Now, let us see another variant of the same code.

console.log(a); greet(); var a = 10; function greet () { console.log("Hi there! Nice to meet you"); }

Being any other programming language, it would either throw an error or output some garbage values. But JavaScript gives output like - Hoisting2.jpg Okay, so JavaScript cannot access the value of a and gives undefined and somehow it got access to the greet function and logs the output. Now let me modify the code a bit and view its output.

console.log(a); greet(); function greet () { console.log("Hi there! Nice to meet you"); }

image.png This is strange. Previously, it gave undefined and now it gives ReferenceError. The word is a very strange gif The reason is that we know, that in the memory allocation phase all variables and functions are allocated space. Hence, when we tried to access the value of a before JavaScript has come across its initialization in the code, it accessed the value from the variable environment which has a special placeholder named undefined, and outputs it. On the other hand, when the initialization of a was removed from the code, JavaScript does not have access to a variable as it was not even present in the variable environment and throws ReferenceError.

In the case of functions, we know, that the whole function code is allocated as a value in the variable environment. So invoking it from anywhere in the program will give the output. Now, let me again modify the code a bit and see its behavior.

greet(); greetShort(); function greet () { //function declaration console.log("Hi there! Nice to meet you"); } var greetShort = () => { //function expression console.log("Hi there!"); } var greetShortest = function () { //function expression console.log("Hi!"); }

image.png It is to note that hoisting only works for function declaration (only possible with the function keyword), and not for function expression (can be both with the function keyword or arrow) and is considered as variables and hence, allocated with undefined in the memory allocation phase. So invoking that function would throw ReferenceError. This is what Global Execution Context (GCE) looks like at this point. image.png

Wrapping up

This is all about hoisting in JavaScript. It is quite important to have a clear concept of under the hood work of JavaScript for any web developer out there. Hope this article was helpful 😊. If so, then do give a reaction and share with others. Want to add something? Write it down in the comments πŸ‘‡

Get In Touch!Β handshake

Whether you have an idea for a project or just want to say hi, feel free to shoot me an email!Β Dart hit

Say Hello