Common hoisting pitfalls in Javascript

Introduction

Hoisting is how JavaScript moves some declarations to the top before running code. Knowing common hoisting pitfalls helps avoid bugs where variables or functions seem to act strangely.

When you declare variables with var and wonder why they are undefined before assignment.

When you use functions before they are written in the code and want to understand why some work and some don't.

When debugging errors related to variables or functions being used before they are declared.

When learning how let and const differ from var in terms of hoisting.

When writing clean code to avoid unexpected behavior caused by hoisting.

Syntax

Javascript

// var declarations are hoisted
console.log(x); // undefined
var x = 5;

// function declarations are hoisted
foo(); // works
function foo() { console.log('hello'); }

// let and const are hoisted but not initialized
console.log(y); // ReferenceError
let y = 10;

Only declarations are hoisted, not initializations.

var variables are hoisted and initialized with undefined.

Examples

var a is hoisted and set to undefined before assignment, so logging it shows undefined.

Javascript

console.log(a); // undefined
var a = 3;

Function declarations are fully hoisted, so calling foo() before its code works fine.

Javascript

foo();
function foo() { console.log('Hi'); }

let variables are hoisted but not initialized, so accessing b before declaration causes an error.

Javascript

console.log(b); // ReferenceError
let b = 4;

Function expressions assigned to var are not hoisted as functions, only the var declaration is hoisted as undefined, so calling bar() before assignment causes a TypeError.

Javascript

bar();
var bar = function() { console.log('Hey'); };

Sample Program

This program shows different hoisting behaviors: var x is hoisted and initialized as undefined, so first log prints undefined. Accessing let y before declaration causes ReferenceError. Function foo() is hoisted fully so calling it before declaration works. Calling bar() before assignment causes TypeError because bar is undefined at that time.

Javascript

console.log(x); // undefined
var x = 1;

console.log(y); // ReferenceError
let y = 2;

foo(); // works
function foo() { console.log('foo called'); }

bar(); // TypeError
var bar = function() { console.log('bar called'); };

Important Notes

var declarations are hoisted and initialized with undefined, so you can access them before assignment but get undefined.

let and const are hoisted but not initialized, causing a 'temporal dead zone' error if accessed early.

Function declarations are hoisted completely, but function expressions are not hoisted as functions.

Summary

var declarations are hoisted and initialized with undefined.

let and const are hoisted but accessing them before declaration causes errors.

Function declarations are fully hoisted, function expressions are not.