What Gets Hoisted in JavaScript?

The earlier questions in this topic covered the basic types and the way JavaScript converts values. This answer looks at hoisting, which explains why you can use a name before the line where you declared it, and it is one of the questions that comes up in almost every interview.

Hoisting is not a separate step that you can watch happen. It is the natural result of how the engine prepares a scope before your code runs. When a scope is entered, the engine creates a binding for every declaration that it can find in that scope, and it does this before a single statement runs. What differs between the kinds of declaration is what happens to that binding at the moment it is created.

console.log(typeof hoistedVar);   // 'undefined' - the binding exists but has no value yet
console.log(hoistedFn());          // works - the whole declaration was lifted

var hoistedVar = 'assigned later';
function hoistedFn() {
  return 'I am ready';
}

For a var declaration, the binding is created and it is immediately given the empty value, so reading it before the assignment line gives you that empty value instead of an error. For a function declaration, the whole function, body and all, is created up front, so you can call it from a line that is above its definition. For let and const, the binding is created but it is deliberately left empty, and touching it before the declaration runs throws a ReferenceError. That window is called the temporal dead zone.

Class declarations are hoisted in name only. The binding exists, so the engine knows the name, but the class itself is not created until the declaration is reached, and reading the name earlier throws the same ReferenceError that a let throws in its dead zone.

One point that people often get wrong is that hoisting belongs to a function or a module scope, and not to the whole file. A declaration inside a block is lifted to the top of that block, not to the top of the function, and the engine only knows about it by scanning the block before it runs.

The previous answer listed the kinds of declaration and explained that a function declaration is lifted completely. This answer focuses on that one case, because it is the case that surprises people the least and helps them the most.

You can call a function before the line where it is defined because a function declaration is hoisted in full, unlike a variable declaration. Before any code runs, the engine creates the binding for the function name and gives it the actual function object, complete with its body. By the time the execution reaches your call, the function already exists.

That is why this pattern works, and it is common in scripts that need a helper before it is defined. A call such as printSummary([3, 1, 2]); placed above the declaration of the printSummary function still runs, because the whole function was created before the first statement executed.

The important contrast is with a function expression. A function that is written as a value and assigned to a variable is not hoisted as a function. It is hoisted as a variable with no value, and the assignment happens where you wrote it. Calling it earlier throws a ReferenceError. This is the biggest difference between the two forms, and it is why the two styles are not interchangeable even though they look almost the same.

There is also a rule about function declarations that sit inside a block. In strict mode, a function declaration inside a block belongs to that block. In sloppy mode the rules were historically different from one engine to another, which caused real bugs, and the modern specification settled on block scoping for both modes.

A practical note for interviews is that many teams use function expressions with const for everything, precisely because the behaviour is always the same. You get one rule, there are no hoisting surprises, and there are no accidental globals.

The two earlier answers covered what hoisting is and why a function can be called early. This answer compares the three kinds of declaration side by side, because that comparison is usually the last part of the question.

Each kind of declaration gets a different treatment when the scope is prepared, and the differences show up in what you observe if you touch a name too early.

// Function declarations are fully hoisted.
console.log(typeof fnDecl);      // 'function'

// var is hoisted and starts with no value.
console.log(typeof varDecl);      // 'undefined'

// let sits in the temporal dead zone until its declaration runs.
try {
  console.log(letDecl);
} catch (err) {
  console.log('let:', err.name);   // 'ReferenceError'
}

function fnDecl() {}
class ClassDecl {}
let letDecl = 1;
var varDecl;

A function declaration is hoisted with its value attached, so the name is usable straight away. A var declaration is hoisted with an empty value, so the name is usable but carries no value. A let or const declaration is hoisted with the binding present but empty, so the name is reserved and touching it throws until the declaration line executes. A class declaration behaves like a let in that respect. The name is reserved, but the class is not created until the declaration is reached.

There is one subtlety worth raising because it looks like a contradiction. The typeof operator is famously safe on a name that was never declared at all, and that is how feature detection works. But typeof on a let, const, or class in its dead zone still throws, because the binding exists and the engine refuses to read one that is not ready. So typeof is only safe for names that do not exist in the scope, and not for names that exist but are not ready yet.

The general advice that comes out of all of this is simple. Use const by default, declare a thing before you use it, and let the linter catch the rest.