Function Hoisting vs Variable Hoisting in JavaScript

Function Hoisting vs Variable Hoisting in JavaScript

Function declarations and variable declarations are both hoisted, but they are hoisted differently. Knowing the difference prevents real bugs.

Function Declarations: Full Hoisting

foo(); // "hello"
function foo() {
  console.log("hello");
}

The entire function body is stored in memory during the memory allocation phase. You can call the function before its declaration line. This is the only kind of hoisting that lets you use the value early.

Variable Declarations (var): Hoisted With undefined

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

The variable is reserved with undefined. The assignment happens at the line. So you can reference x early, but you get undefined, not the value.

Function Expressions: Variable Hoisting

bar(); // TypeError: bar is not a function
var bar = function () {
  console.log("hello");
};

bar is a var variable, hoisted with undefined. Calling undefined() throws a TypeError. The function body is only assigned at the line.

Named Function Expressions

baz(); // TypeError: baz is not a function
var baz = function namedFn() {
  console.log("hello");
};

Same rule: baz is a var, hoisted with undefined. The inner name namedFn is available only inside the function, not outside.

let and const Function Expressions

qux(); // ReferenceError (TDZ)
const qux = () => console.log("hello");

qux is hoisted but in the TDZ. Accessing it before the line throws a ReferenceError, not a TypeError.

Which One Wins?

If you have both a var and a function declaration with the same name, the function wins. Functions are hoisted with their full value, var with undefined. Multiple function declarations with the same name: the last one wins.

Best Practice

Do not rely on hoisting. Declare functions and variables at the top of their scope. Use function expressions with const for predictable behavior:

const foo = () => { ... };

The Takeaway

Function declarations are hoisted with their full body. var variables are hoisted with undefined. Function expressions follow variable rules. let/const function expressions sit in the TDZ. Declare before use for clarity.