JavaScript Hoisting Interview Questions

What hoisting actually is

Hoisting is not a physical movement of code. JavaScript doesn't rewrite your file. What actually happens is that the JavaScript engine runs in two phases:

1. Creation phase — the engine scans your code and allocates memory for all declarations before a single line executes.
2. Execution phase — your code runs line by line.

The result behaves as if declarations were moved to the top. That's hoisting.

var — hoisted and initialized to undefined

console.log(name)  // undefined — not a ReferenceError
var name = 'Alice'
console.log(name)  // 'Alice'

During the creation phase, JavaScript registers name and sets it to undefined. During execution, the first console.log runs before the assignment — so it gets undefined. The assignment name = 'Alice' then runs, and the second log gets 'Alice'.

What the engine effectively sees:

var name = undefined  // hoisted — declaration + initialization

console.log(name)     // undefined
name = 'Alice'        // assignment stays here
console.log(name)     // 'Alice'

let and const — hoisted but NOT initialized (the Temporal Dead Zone)

console.log(age)  // ReferenceError: Cannot access 'age' before initialization
let age = 25

let and const ARE hoisted — the engine knows they exist. But unlike var, they are not initialized to undefined. They sit in the Temporal Dead Zone (TDZ) from the start of their scope until the declaration is reached. Accessing them during the TDZ throws a ReferenceError.

// TDZ starts here for 'score'
console.log(score)  // ReferenceError — in TDZ

const score = 100   // TDZ ends here
console.log(score)  // 100

The TDZ exists to catch bugs. var's silent undefined hid real errors for years.

Function declarations — fully hoisted

greet('Alice')  // 'Hello, Alice' — works perfectly before the declaration

function greet(name) {
  console.log(`Hello, ${name}`)
}

Function declarations are hoisted completely — both the declaration AND the body. You can call them before they appear in the source. This is intentional: it lets you put helper functions at the bottom of a file and the main logic at the top.

Function expressions — NOT fully hoisted

greet('Alice')  // TypeError: greet is not a function

var greet = function(name) {
  console.log(`Hello, ${name}`)
}

Here greet is a var — so it's hoisted and initialized to undefined. Calling undefined as a function gives a TypeError. The function body is not hoisted — it stays where you wrote it.

// What the engine sees:
var greet = undefined

greet('Alice')  // TypeError: undefined is not a function

greet = function(name) {
  console.log(`Hello, ${name}`)
}

Arrow functions — same as function expressions

sayHi()  // TypeError: sayHi is not a function

const sayHi = () => console.log('Hi')

Arrow functions are always assigned to variables. const puts it in the TDZ — accessing before declaration is a ReferenceError. var would give TypeError (calling undefined). Either way, it doesn't work before the declaration line.

Hoisting in the same scope — order matters

var x = 1

function example() {
  console.log(x)  // undefined — NOT 1
  var x = 2
  console.log(x)  // 2
}

example()

The var x inside example is hoisted to the top of that function's scope. So inside the function, x is a completely separate variable from the global x. The first log gets the local undefined, not the global 1. This surprises most developers.

Class declarations — hoisted but in TDZ

const p = new Person('Alice')  // ReferenceError — in TDZ
class Person {
  constructor(name) { this.name = name }
}

Like let and const, class declarations are hoisted but stay in the TDZ. You cannot use a class before its declaration. This is correct behaviour — classes should be declared before use.

The complete hoisting cheatsheet

Interview trap — multiple declarations in same scope

function test() {
  console.log(typeof foo)  // 'function' — not 'undefined'

  var foo = 'bar'

  function foo() {
    return 'I am a function'
  }

  console.log(typeof foo)  // 'string'
}

test()

When a function declaration and a var declaration share the same name, the function declaration wins during hoisting. The engine hoists the function fully, then the var declaration is ignored (since the name already exists). The assignment foo = 'bar' still runs during execution, overwriting the function.