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.

Comments

[Denys Séguret]

I disagree with "The solution is to declare your variables at the beginning of your code".

Because the "code" which matters for hoisting is the function while in many cases the meaningful scope you'd want is a block, for example.

... // localThing is defined here
if (condition) {
    var localThing = ...
    do something with localThing
}
... // localThing is defined and valued here

Coders not familiar enough with hoisting might fail to see that the scope of localThing starts before this block and ends later: it covers the whole function.

Declaring value at the beginning of the enclosing function while it's used only in a block would be a bad practice.

The real solution in 2019 isn't to declare your variables at the beginning of your function but to use let to declare them where they are needed, especially in inner non functional blocks. let has been defined to fix the problems of var, use it, especially if you're young to JavaScript and don't already know all of its many traps.

[Fernando Hernandez]

Hey Denis Seguret thanks for your feedback. Probably I don't was very specific with that. You are right, by saying that 'the solution is to declare your variables at the beginning of your code' I was meant to declare them in the beginning of the scope you are in. Also, for sure is a good practice to always use let instead of var, because when you defined a variable using var is available in the global scope. I think I will update it. I assumed the scope concept was understand it.