A Little-known Fact About JavaScript Hoisting

on | 4 Comments

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.

Web Tools Weekly

4 Responses

  1. amin:

    Amazing how David Flanagan’s guide just popped inside my head while reading the title and then I see his name. Damn conincidence

  2. Lily:

    Recently I started learning JavaScript and my friend refer me David Flanagan’s guide. Thanks, Louis for mention this guide. Now I feel more confident to read this guide. And Louis thanks again for your nice actionable tips.

  3. Wow David Flanagan’s guide is like dream come true. I’m a big fan of David Flanagan’s books. Louis Lazaris thank you so much for mention this guide. keep it up.

  4. I have just finished my CSS And HTML. Now I have started learning Javascript. Always love to read your guide posts, tips

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.