Hoisting In JavaScript?

Hoisting In JavaScript?

Lifting Variables to the Top: Understanding Hoisting in JavaScript

ยท

3 min read

Hosting is a concept in JavaScript in which you can use variables and functions before they are declared. Before moving ahead with this article I would suggest you read this article. In this article, I talked about how javascript code is executed.

In Short:

When a script is loaded a Global Execution Context is created and every time a function is invoked a Function Execution Context is created and it's deleted after the function is executed. When we run the any program, javascript will create a new execution context. In the memory-creation phase, it will start allocating memory to variables and functions. In the case of variables a special value undefined will be stored and for the function, the whole function code will be stored.

Hoisting of Variables.

Take a look at the example below.

var name = "Ankit";
console.log(name);

We all know how the above program is going to execute, in line 1 value Ankit will be assigned to a variable name and in line 2 the value stored in the variable name will be displayed in the console. But what if we change the order of the line, take a look at the example below.

console.log(name);
var name = "Ankit";

// output in the console
undefined

This time it logs undefined to the console, but why?

As I have talked about in this article or above, javascript allocates memory to variables and functions before executing them, when it allocates memory to variables it stores the special keyword undefined to it. That's why it showing undefined.

Take a look at the below example

console.log(name);
// var name = "Ankit";

In the above example, we are trying to console.log the name without declaring it, this will give an error. Notice the name is not defined error, name is not defined error and undefined error is two different things. We get this error because the name variable has not been declared, and no memory has been allocated to the name variable.

Please note that the variable declared with only var keyword is hoisted, a variable declared with let and const are not hoisted.

Hoisting of Functions

Take a look at the below code example.

function sayHello(name) {
  console.log(`Hello ${name}`);
}
sayHello("Rahul"); // Hello Rahul

This is how we declare a function in any programming language when we call the sayHello function with a name argument it's going to display the Hello message, what if we call the function before declaring it? Let's see

sayHello("Rahul");

function sayHello(name) {
  console.log(`Hello ${name}`);
}

When we execute the above code it also displays the Hello Rahul message in the console, but why and How? Let's understand this.

As we have talked javascript allocates memory to variables and functions before executing them, in the case of variables it stores the special keyword undefined , and in the case of functions, it stores a copy of the function. so the function is already in the memory that's why we can invoke the function before declaring it. This doesn't mean that you can invoke a function without declaring it.

Please note that only the function declaration is hoisted, not the function expression.

In Javascript we can also define functions as values and store them in a variable, this is known as a function expression.

Arrow functions are also not hoisted.

Conclusion ๐Ÿ™‹โ€โ™€๏ธ๐Ÿ™‹โ€โ™‚๏ธ

Thanks for taking the time to read this tutorial. I hope you found it helpful and informative. Please share it with your friends and followers on social media if you enjoyed reading it.

Always keep this two line in mind.

  • function declaration are scanned and made available

  • variable declaration are scanned and made undefined.

Read this before reading this article.

Did you find this article valuable?

Support Ankit Kumar by becoming a sponsor. Any amount is appreciated!