Why does JavaScript hoist variables?


Javascript Problem Overview

Why does JavaScript hoist variables?

What was the rationale of the designers when they decided to implement hoisting? Are there any other popular languages that do this?

Please provide relevant links to documentation and/or records.

Javascript Solutions

Solution 1 - Javascript

As Stoyan Stefanov explains in "JavaScript Patterns" book, the hoisting is result of JavaScript interpreter implementation.

The JS code interpretation performed in two passes. During the first pass, the interpreter processes variable and function declarations.

The second pass is the actual code execution step. The interpreter processes function expressions and undeclared variables.

Thus, we can use the "hoisting" concept to describe such behavior.

Solution 2 - Javascript

JS creator Brendan Eich once said (on Twitter):

> "var hoisting was thus [an] unintended consequence of function hoisting, no block scope, [and] JS as a 1995 rush job."

He also explained that…

> "function hoisting allows top-down program decomposition, 'let rec' for free, call before declare; var hoisting tagged along."

Brendan Eich

I don't know of any other popular languages that hoist variables in the same manner. I think even ActionScript — another implementation of ECMAScript used in Flash development — did not implement hoisting. This has been a source of confusion and frustration for developers familiar with other languages who are learning JavaScript.

Solution 3 - Javascript

This is because javascript interpreter interprets code in two cycles.

  1. Code completion/compilation:
  2. Code execution:

In 1st cycle all the variable and function declarations are taken to top of the function scope it is executing in. This helps in creating variableObjects for execution context of function even before it's execution.

In 2nd phase, value assignments, code statements and function calls takes place line by line in expected manner.

You have a little more detailed read over here.

It will give you a better picture around behavior around let, const and class declarations, also the precedence it follows between variable and functions.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionXlaudiusView Question on Stackoverflow
Solution 1 - JavascriptlxgreenView Answer on Stackoverflow
Solution 2 - JavascriptgfullamView Answer on Stackoverflow
Solution 3 - JavascriptJaspreet SinghView Answer on Stackoverflow