Have you heard about hoisting in Javascript? This is what it is.

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.

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.

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.

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.

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.

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.