140

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.

17
  • 9
    I suspect at this point it's historical, and I seriously doubt it was anything other than "ease of implementation" originally. Feb 21, 2013 at 14:49
  • 4
    Honestly, ask Brendan Eich, he seems to be quite responsive. Feb 21, 2013 at 15:01
  • 26
    How is this question not constructive?
    – Francisc
    Apr 23, 2014 at 23:30
  • 23
    @Francisc welcome to Stack Overflow, where all you can ask about is moving a div in jQuery
    – Xlaudius
    Jun 7, 2014 at 13:53
  • 32
    This is a really important question. It should have been allowed. It was not flame-bait. Hoisting is one of the core elements of understanding how JavaScript works, and the "why" is a legitimate question that is addressed in most textbook treatments of the language. It is NOT OK that Stack Overflow people CONSTANTLY stomp on people's questions like this.
    – bearvarine
    Sep 22, 2015 at 14:03

3 Answers 3

66

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.

7
  • 19
    I personally really do not like the word "hoisting". It gives the false representation that variable and function declarations are magically hoisted to the top of the current scope, when in reality, the JS interpreter, as you mentioned, scans the source code for the bindings and then executes the code. Feb 24, 2013 at 22:32
  • 29
    Uh, this doesn't really explain the rationale. A single-pass interpreter (that would not have led to hoisting) would have been much simpler - so why did the designers opt for two passes?
    – Bergi
    Feb 7, 2018 at 17:46
  • 1
    This does not explain why variables, specifically are hoisted. Functions make sense, variables do not (in most cases) -- I believe it's a bug.
    – Josh M.
    Sep 7, 2018 at 17:07
  • 1
    Josh M. This is so extensively specified, I don't think that this is a "bug" ... (I agree that this answer doesnt really answer the reasoning though) Apr 11, 2019 at 13:37
  • 2
    This answer doesn't really explain why the designer decides to implement hoisting, just explain what causes hoisting. so I would also give a -1. And as the other answer mentioned by @gfullam, the result of "hoisting" could be unintended.
    – Jswq
    Apr 7, 2021 at 14:26
50

JS creator Brendan Eich once said on X (the social media platform formerly known as Twitter)

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

He preceded with the explanation that…

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

Brendan Eich

Are there any other popular languages that do this?

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.

5
3

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.

1
  • 1
    Are you implying that it's a consequence of a design choice? If so, you should state it clearly in your answer. But reading Brendan Eich's answer, it might have been a wanted feature, it depend of how you interpret the last sentence. Bottom line, i still don't know why for sure
    – Bombinosh
    May 7, 2019 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.