Have you heard about hoisting in Javascript? This is what it is.
Tags: javascript, hoisting, webdev, programming
Published: 2019-03-25 02:49:25

---
title: Have you heard about hoisting in Javascript? This is what it is.
published: true
description: Discovering what hoisting is in Javascript.
tags: javascript, hoisting, webdev, programming
---

![Coding](https://res.cloudinary.com/dcko79fnp/image/upload/v1553482107/pankaj-patel-1366018-unsplash.jpg)

Javascript is a language to which every time I discover something new.

A very important topic and I would like to share it with you to understand it even better.

Well, let's move on to the typical question when we do not know something.

## **What is hoisting?**


Let us know that the term hoisting, means to raise something. Knowing that, Javascript at the moment of executing your code, will previously make hoisting of all your declarations of variables and functions to the top of your code within the scope in which you are working. 

That is basically `hoisting`.

Let's see an example of code.

```javascript
console.log(name)
var name = 'Fernando'
```

When viewing this code, applying hoisting, do you think it will print the value of the variable 'name'? Come to a conclusion before continuing reading.

Let's see the result.

```javascript
console.log(name)
var name = 'Fernando'
// undefined => Output
```

Perhaps, you will ask why, if we know that hoisting raises our variables and functions above the rest of our code. Well, if you read well, Javascript will only raise the declaration of our variables and not the initialization.

Internally, this is how the concept of hoisting is reflected.

```javascript
var name

console.log(name)

name = 'Fernando'
```

In this way, we clearly see the reason why it prints 'undefined', because we are assigning the value to the variable after the `console.log(name).`

> Note: When declaring variables without being initialized, they are assigned by default the value of `undefined.` Therefore, the output of these code examples.

As we mentioned earlier, this same thing happens with functions. 


```javascript
sayHi(myName)

var myName = 'Fernando'

function sayHi(myName) {
    console.log('Hello', myName)
}
```

We see this code snippet, do you think it will run as we really expect?

Let's convert that code by applying hoisting.


```javascript
var myName

function sayHi(myName) {
    console.log('Hello', myName)
}

sayHi(myName)

myName = 'Fernando'
```

As you can see, both the declaration of the variable and the function move to the top of the code. First the declaration of the variable and then the function. But the initialization of the variable remains in the same line of code. Knowing this, we can realize that the output will be `undefined`.




## **And what about let and const?**

It is applied in the same way as with `var`, but there is a difference. Using `let` and `const`, instead of printing the value `undefined`, will throw us an error.

* Let: It will throw us a reference error indicating that the variable is not defined.

* Const: It will throw us a syntax error indicating that the variable must be initialized at the moment of being declared.



## **How to avoid problems or errors with hoisting?**


The solution is to declare your variables at the beginning of your code. Also, keep in mind that you have to assign values ​​before they are executed in your code. Remember that this depends on your scope. That is, if you are inside a function and declare variables or functions within it, they will go to the beginning of their function because it is the scope in which you are working.


This not only helps avoid mistakes but also has a cleaner code, easier to maintain and read by other programmers.


Hope you like it and most important you now got a clear idea of what hoisting is.