Javascript Hoisting

Nathan Cotrim Lemos — Sun, 02 Jan 2022 16:34:16 +0000

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')
}

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'

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'

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;

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

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: