Hoisting With Arrow Functions and Regular Functions

Hoisting With Arrow Functions and Regular Functions

Arrow functions are not hoisted the same way as regular function declarations. Mixing the two can cause surprises.

Regular Function Declarations: Fully Hoisted

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

The whole function body is stored during the memory phase. You can call it before the declaration line.

Arrow Functions: Variable Hoisting Only

bar(); // TypeError: bar is not a function (with var)
// or ReferenceError (with let/const)
const bar = () => {
  console.log("hi");
};

An arrow function is always a function expression. It is assigned to a variable. The variable is hoisted:

• With var: hoisted as undefined. Calling it throws TypeError.
• With let or const: hoisted but in the TDZ. Calling it throws ReferenceError.

Named Regular Function Expression

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

Same as arrow: baz is a var, hoisted as undefined. The internal name namedFn is only visible inside the function.

Which to Use?

For top-level helper functions that you want to call from anywhere in the file, regular function declarations are fine. For everything else, prefer arrow functions or function expressions with const, declared before use:

const greet = (name) => `Hello, ${name}`;
console.log(greet("Kunal"));

Arrow Functions and this

Arrow functions do not have their own this. They inherit this from the enclosing lexical scope. This is not a hoisting issue, but it interacts with timing: if the enclosing scope's this is set at call time (not definition time), an arrow inside a regular function captures whatever this was at the outer call.

Common Bug

init();
const init = () => {
  console.log("starting");
};

Throws ReferenceError because init is in the TDZ. Always declare const arrow functions before calling them.

The Takeaway

Regular function declarations are hoisted with their full body. Arrow functions (and all function expressions) follow variable hoisting rules: var gets undefined (TypeError on early call), let/const sit in the TDZ (ReferenceError). Declare arrow functions with const before use.