Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Hoisting in JavaScript

DZone's Guide to

Hoisting in JavaScript

A quick discussion of JavaScript scoping and hoisting, with example JavaScript code that walks you through some use cases.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Two weeks ago I gave a lightning talk at Caphyon on hoisting in JavaScript. Putting aside all the common jokes about the JS language, people really seemed to like it. It was kind of a challenge to talk about JS while having an audience of C++ and Java colleagues.

Now getting back to the talk, that was lightning fast and it didn’t covered that much as I would’ve liked to. So I’ll try to write a bit more on JavaScript scoping and hoisting below.

JS the good parts vs the definitive guide

Hosting Hoisting

On the clickbait talk title, that’s actually a true story. Last time I mentioned the hoisting term in an article of mine, I remember that a friend read it and told me I had a typo in the article.

So what’s hoisting in JavaScript? The short answer is that, conceptually, variable and function declarations are moved/hoisted to the top of their scope before code execution.

Variable Declaration

When declaring a variable, only its name gets hoisted.

console.log(name);
var name = "whatever";
// The console logs undefined

Here’s how the above is interpreted, thus undefined.

var name;
console.log(name);
name = "whatever";

Function Declaration

Unlike var, a function declaration hoists its actual definition too.

hello("world");
function hello(p) {
  return "Hello " + p;
}
// The console logs "Hello world"

Here’s how the above is interpreted, which results in “Hello world”:

function hello(p) {
  return “Hello ” + p;
}
hello("world");

Function Expressions

The variable name gets hoisted, but not the function assignment.

hello("world");
var hello = function(p) {
    return “Hello ” + p;
}
// TypeError: hello is not a function

Here’s how the above is interpreted,which results in hello is not a function:

var hello;
hello("world");
hello = function(p) {
    return "Hello"  + p;
}

On ES6 and Later

The hoisting behavior isn’t something that applies to the latest ECMAScript gems:

  • let
  • const
  • class declaration
  • arrow function

let

// let
console.log(name);
let name = "whatever";
// Uncaught ReferenceError: name is not defined

const

// const
console.log(name);
const name = "whatever";
// Uncaught ReferenceError: name is not defined

class declaration

// class declaration
const p = new Rectangle();
class Rectangle {...}
// Uncaught ReferenceError: Rectangle is not defined

arrow function

// arrow function
console.log(doubled);
const doubled = [1, 2, 3].map(n => n * 2);
// Uncaught ReferenceError: doubled is not defined

Last but Not Least

Here’s what Brendan Eich said about JS hoisting:

var hoisting was an implementation artifact. - Source

function hoisting was better motivated: function declaration hoisting is for mutual recursion & generally to avoid painful bottom-up ML-like order - Source

The Slides

Here are the slides, just in case.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,javascript ,tutorial ,hoisting

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}