Skip to main content Accessibility Feedback

Variable hoisting in JavaScript

Yesterday, we looked at hoisting in JavaScript.

A few folks were quick to point out that variables are hoisted, too. Let’s dig into that a bit.

Variables are hoisted, but their values are not

Yesterday, I wrote:

When a JavaScript file is compiled by the browser, but before it’s actually executed, function declarations are stored in memory but left exactly where they are in your code.

What I didn’t mention is that variables are, too, but not their values.

For example, here, num1 logs undefined, because while the browser knows the num1 variable exists when console.log() runs (because it was hoisted), no value has been assigned to it yet.

Trying to log num2 throws an error, because the variable has not been defined anywhere.

var num1 = 42;

See it for yourself with this demo.

Some nuance around function hoisting

Yesterday, while discussing function declarations versus function expressions, I also wrote:

They more-or-less do the same thing, with one important caveat: function declarations are hoisted, while function expressions are not.

There’s a bit of a nuance here I didn’t mention.

In the function expression below, because of variable hoisting the browser already knowns subtract exists as a variable when you try to run it. But because the value (in this case, a function) has not been assigned to that variable yet, the browser does not yet know it’s a function that can be executed.

// The browser knowns subtract is a variable, but doesn't know it's a function yet
// returns Uncaught TypeError: subtract is not a function
subtract(7, 4);
var subtract = function (num1, num2) {
	return num1 - num2;

With function declarations, the function itself gets hoisted.

// Here, the entire function is hoisted, so this still runs
// returns 6
add(3, 3);
function add(num1, num2) {
	return num1 + num2;

I hope that clears things up a bit! If I didn’t explain anything clearly, though, let me know and I’ll to do a better job.