Why does JavaScript hoist variables?

Question

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.

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."

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.

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.