139

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.

gfullam
  • 11,531
  • 5
  • 50
  • 64
Xlaudius
  • 1,757
  • 2
  • 13
  • 16
  • 1
    [“because javascript doesnt really have a true sense of lexical scoping”](http://stackoverflow.com/a/3725763/344643), whatever that means – Waleed Khan Feb 21 '13 at 14:47
  • Nice! do you know why ? – Xlaudius Feb 21 '13 at 14:49
  • 9
    I suspect at *this* point it's historical, and I seriously doubt it was anything other than "ease of implementation" originally. – Dave Newton Feb 21 '13 at 14:49
  • 1
    It makes it easier for beginners to pick up the language. Many people write javascript and have no idea about the scope of a variable until they move to another language. – Ozzy Feb 21 '13 at 14:50
  • perhaps you know of any other language that has a similar characteristic? – Xlaudius Feb 21 '13 at 14:50
  • 1
    Because without it you can get odd behaviors that are difficult to troubleshoot – Sten Petrov Feb 21 '13 at 14:50
  • 1
    @StenPetrov other languages, that are also easy (Python ...) dont hoist! – Xlaudius Feb 21 '13 at 14:51
  • Another language that also does this is VBScript. – Guffa Feb 21 '13 at 14:52
  • 4
    Honestly, ask Brendan Eich, he seems to be quite responsive. – Felix Kling Feb 21 '13 at 15:01
  • Imagine this ` var a = 0; function a(){ setTimeout(function(){alert(a)},1000) var a = 10; }` when the timeout fires it has access to 'a' because it is in its closure scope, and it makes sense, what should have happened if there would not be hoisting? should it alert 0, because the local was not yet defined, but in the time the timeout fires it is defined – yoelp Feb 21 '13 at 22:42
  • 26
    How is this question *not* constructive? – Francisc Apr 23 '14 at 23:30
  • 23
    @Francisc welcome to Stack Overflow, where all you can ask about is moving a `div` in jQuery – Xlaudius Jun 07 '14 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 '15 at 14:03
  • I also think that this is an important question. I specifically did a search on why JS hoists variables so that I could leverage its supposed benefits and advantages which so many tutorials claim. I wanted to code JS as it was intended. Indeed, this might be one of the most important questions in JS. Maybe it should have been reworded as, what are benefits of JS variable hoisting. – Beebok Apr 28 '17 at 16:43
  • 1
    @FelixKling Re: Brendan Eich. Asked & awaiting response https://twitter.com/geraldfullam/status/961621904330248193 – gfullam Feb 08 '18 at 15:29
  • Another popular language which has variable hoisting is Python: https://stackoverflow.com/q/63337235/2326961 – Géry Ogam Aug 11 '20 at 08:58
  • See also [Is there a purpose to hoisting variables?](https://stackoverflow.com/q/52879220/1048572) – Bergi Oct 28 '20 at 10:13

3 Answers3

64

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.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
lxgreen
  • 1,511
  • 15
  • 14
  • 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. – contactmatt Feb 24 '13 at 22:32
  • Now I got why JS most misunderstood language, I didn't see this in any tutorial. And got confused with hoisting (and interepreter flow). – Swapnil Patwa Aug 23 '17 at 08:22
  • 28
    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 07 '18 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 07 '18 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) – Jonas Wilms Apr 11 '19 at 13:37
  • 1
    I've given this a -1 as it doesn't answer the question. – codingbryan May 15 '20 at 20:20
  • 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 07 '21 at 14:26
45

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

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.

gfullam
  • 11,531
  • 5
  • 50
  • 64
  • 4
    Giving a +1 as this is the only answer that attempts to directly address the question. – Damon Jan 28 '20 at 15:07
  • 2
    Thank you for this answer. I fully agree with @Damon! – codingbryan May 15 '20 at 20:22
  • 1
    Another popular language which has variable hoisting is Python: https://stackoverflow.com/q/63337235/2326961 – Géry Ogam Aug 11 '20 at 08:59
  • 3
    Incorrect. Python does NOT have variable hoisting. See: https://discuss.python.org/t/why-does-python-have-variable-hoisting-like-javascript/4944/3 – Victor Yan Dec 21 '20 at 07:37
  • 1
    Interesting also the followup of that tweet, which explains what "let rec" is https://twitter.com/BrendanEich/status/1290676504502788096, pointing to https://stackoverflow.com/questions/16530534/scheme-when-to-use-let-let-and-letrec – Gruber Jan 23 '22 at 04:01
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.

Jaspreet Singh
  • 1,672
  • 1
  • 14
  • 21
  • 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 07 '19 at 14:35