CodeinWP CodeinWP

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.

11 Responses

  1. amin says:

    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 says:

    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. Janet says:

    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

  5. Tony says:

    A good explanation of ‘hoisting’. Thank you Louis.

  6. Anjan says:

    I like the way you describe complex JS topics so simply. Thanks for this great article, Louis.

  7. Anoop Gupta says:

    Thanks Louis, I was also wandering to know about JavaScript Hoisting. This article was really helpful for me.

  8. I have just finished my CSS And HTML. Now I have started learning Javascript. it’s a very useful information for me

  9. Athar Azami says:

    I like the way you explain the topic
    Thanks

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

  11. Lisa Gomes says:

    I like the way you explain the topic
    keep sharing

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).