JavaScript Demystified: Hoisting

Hello Devs! In this blog, I'll walk you through the concept of hoisting in JavaScript. Before we begin, go through the first blog of this blog series, if you haven't already.

What is hoisting

Hoisting is a phenomenon in JavaScript by which you can access the functions and variables even before declaring them in your program, without getting an error.

Let's see it with an example:

var x = 10;

function greet(){
  console.log("Hello world!");
}

console.log(x);

greet();

Output:

10
Hello world!

The above program is pretty simple and straightforward. Let's see what happens when we try to access the variable and the function before declaring them.

console.log(x);

greet();

var x = 10;

function greet(){
  console.log("Hello world!");
}

Output:

undefined
Hello world!

If you have read the first blog, you already know why this is happening. whenever we run a program, an execution context is created, and it is executed in two phases, the memory allocation phase and the code execution phase.

During the memory allocation phase, memory will be allocated for variable X and it will be assigned with the value "undefined", similar memory will be allocated for the function greet and it will be assigned with the original function definition.

The value of X will be undefined, until and unless we reach the variable assignment of X , during the code execution phase.

In the second example, we are trying to access the variable even before assigning it with a value, that's why it's value is printed as undefined.

Undefined Vs not defined:

Undefined and not defined, are they the same? No. As we seen in the last blog, undefined is kind of a special placeholder keyword.

Not defined is an error, which is thrown when you try to access a variable which is nowhere declared in your program.

Arrow functions and function expression:

If you try to access Arrow functions and function expression before declaring them in your program, it will throw an error saying "Typeerror".

greet();

var greet = function(){
  console.log("Hello world!");
}

greet();

var greet = () => {
  console.log("Hello world!");
}

If you try to run either of the above code snippets, it will result in the following error:

TypeError: greet is not a function

Why? Because in this case, the function is assigned to a variable, so it's value is stored as "undefined". Hence the error.

Note: let and const variables will behave differently from var, it will be covered in the upcoming blogs.

What's next:

I hope you liked this blog, In the next blog, we will dive deep into functions and variable environment. Follow me to receive the notification.

Want to connect with me? You can DM on Dev.to and twitter.