A Little-known Fact About JavaScript Hoisting

At some point when reading about scope in JavaScript, you may have come across the term hoisting. It’s often used in the context of variable or function definitions.

For example, consider the following code:

doSomething();

for (i = 0; i <= 10; i++) {
  console.log(i);
}

function doSomething() {
  console.log('function executed');
}

View on JS Bin

Although the doSomething() function is called before it’s defined, the code still works. In fact, the for loop isn’t started until the JavaScript engine figures out that doSomething() is defined and can execute the call.

In many blog posts and books over the years, this is what is referred to as “hoisting”. For example, Doug Crockford’s popular book JavaScript: The Good Parts, says:

“function statements are subject to hoisting. This means that regardless of where a function is placed, it is moved to the top of the scope in which it is defined.”

Similarly, David Flanagan’s JavaScript: The Definitive Guide says:

“This feature … is informally known as hoisting: JavaScript code behaves as if all variable declarations in a function … are ‘hoisted’ to the top of the function.”

Flanagan gets it more right than Crockford because he correctly points out that “hoisting” is an informal term and uses the phrase “as if” to indicate that this isn’t what’s actually happening.

For all practical purposes, most explanations about hoisting are fine and serve their purpose in helping understand how things work. But here’s what the authors of Secrets of the JavaScript Ninja say about hoisting:

“Variables and function declarations are technically not ‘moved’ anywhere. They’re visited and registered in lexical environments before any code is executed.”

This is what Flanagan was more or less alluding to but which the above quote makes more explicit. That latter book has a fairly extensive section within one of the chapters that discusses lexical environments, so be sure to grab a copy if you want to expand your understanding of that subject.

This quick tip appears in this week’s issue of Web Tools Weekly.