Hoisting Javascript

Tram Ho

Written by Luu Hoang Thong

Today I will introduce hoisting in Javascript, a problem is no longer new but for those who are just starting with JS, it will be difficult to not understand the nature of the problem.

What is Hoisting

Basically when Javascript Engine compiles our code, all variables defined by the var operator will be hoisted / bar above the current scope that is defined, namely the function if it is defined. in function, and global scope if defined outside the function without caring about the location we declare.

Simple wallet as follows

What do you think console.log will print?

  1. Uncaught ReferenceError: myName is not defined
  2. Sunil
  3. undefined

As mentioned above, the console will print the “myString” screen.

Defining someString variables is put on top, we can access and assign values ​​to it.

someString will have undefined value when only being hoisted .

And you should distinguish between null and undefined. Undefined is a variable that was declared but has not been assigned a value, while null is a nonexist value.

Maybe you are interested

Little known feature in JavaScript

JavaScript Tip: Set function names to debugging more easily

Javascript only hoisting variable declaration.

The console will print undefined but not “myString” because JS only hoisting the declaration of the variable

Hoisting function

Another simple example of hoisted function is the following

The screen output will be Money by: The declaration portion of the doSomething is hoisted on top, the assign value for doSomething (print out diamond) is not hoisted.

Arrow function and funciton expression

Arrow functions and function expressions are not hoisted javascript

If you run the above code, there will be runtime error somefunc, doSomething is not defined. The reason because the function expression is not Javascript hoisted

Multiple declartion in samescope

We already know what hoisting is, so guess what the result of the following code is

At first glance it would probably be a good idea to print out “String in function”. But when run, it will print Error test is not function. Because with multiple declarations in the same scope (both varaible and function) the hoisting of the variable is ignored and the above code will be executed by JS engine as follows

Preventing scope problems

To limit the problem of scope problems using the scope of variables, we have several ways:

  • Declare all variables at the beginning of each function
  • Avoid using var to declare variables
  • Use only a let or const statement to declare the variable in a function. Ex:

  • Always declare variables before using them


  • Hoisting is the JS engine that declares the declaration of the variable and the function on top of the scope they are declared
  • Arrow functions and function expressions are not hoisted
  • If there are multiple declarations identical to the identifier, then the hoisting of the variable will be ignored


Share the news now

Source : Viblo