DEV Community

Cover image for Javascript Hoisting
Nathan Cotrim Lemos
Nathan Cotrim Lemos

Posted on

Javascript Hoisting

What is

Hoisting is basically a behavior from javascript that we can see in execution time, it makes functions and variables go to the top of the scope in which they were declared.


Const, let & var

Before see some examples, we need to understand the difference between these three ways to declare a variable.

  • var: On the start of javascript, we had only var, currently, we don't have reasons to use it, the hoisting concept is applied just to this type of declaration, and, it can be problematic by some reasons I will explain later. Another point we can say here is, its value can be reassigned.

  • let: unlike var, hoisting is not applied to let, it's a reason to prefer it, but, like var, its value can be reassigned.

  • const: like let, hoisting is not applied to it, another point about const is that it can't has its value reassigned.


to stay tuned: in this case, reassigned means that variable can or not has a new value, don't think that it applies to object and arrays manipulation, we can do this normally.


resume: with const and let among us, prefer use they, when you will need to change the value from any variable in execution time, prefer let, unlike it, prefer const.


Operation

Functions

hoistMe() // output: I'm being executed by hoisting

function hoistMe() {
   console.log('I\'m being executed by hoisting')
}
Enter fullscreen mode Exit fullscreen mode

In the example above, the hoisting works effective, repair we call the function before its initialization!

Variables

In the example below, we use a const, referring to it, we repair that hoisting is not applyied!

console.log(assignedToConst) // output: cannot access before initialization

const assignedToConst = 'hoisted'
Enter fullscreen mode Exit fullscreen mode

OBS: with let the result would be the same


Now we can see a interesting behavior from hoisting

console.log(assignedToVar) // output: cannot access before initialization

const assignedToVar = 'hoisted'
Enter fullscreen mode Exit fullscreen mode

executing this piece of code above, we see the specified output, it occurs because hoisting not assign the value, just declares on top, the assignment occurs where it was really implemented! Pay attention with this behavior, it makes your code ready to bugs!


Unusual use case but worth understanding:

handle = '\'hoisted\'';

console.log(handle); // output: 'hoisted'

var handle;
Enter fullscreen mode Exit fullscreen mode

if we assign the value before and declare it later the hoisting is done successfully


Considerations

This explained concept works independent the scope, still the presented examples be all at global scope, for example:

function anotherHoistTest() {
   hoistMe()
   function hoistMe() {
      console.log('hoisted');
   }
}
anotherHoistTest() // output: hoisted
Enter fullscreen mode Exit fullscreen mode

I think is good say to you do not enjoy from this behavior, it makes your code more fragile and less readable and concise.


Author

Follow me:

Top comments (0)