# Hoisting In JavaScript?

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](https://ankitdevelops.hashnode.dev/how-javascript-works) 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.

```javascript
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.

```javascript
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](https://ankitdevelops.hashnode.dev/how-javascript-works) 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

```javascript
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675942164547/654ce968-eec2-438d-b673-f1d7b6e1acdc.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675942448009/d4c382cd-ca11-4321-9428-1343eecd1b8b.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675942468684/f70d61fd-cc0f-417b-815a-a2a75aad99a1.png align="center")

## Hoisting of Functions

Take a look at the below code example.

```javascript
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

```javascript
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675943332644/c01f7a3f-f372-427e-a9a3-1e1a010f68f9.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675943516933/5061b40e-c522-4d27-a03d-2e5b8a5e5428.png align="center")

Arrow functions are also not hoisted.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675943594788/e22d44e1-6e74-471a-927c-07d8edd8e421.png align="center")

## 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](https://ankitdevelops.hashnode.dev/how-javascript-works) **before reading this article.**