What Is Function Hoisting? Definition & Examples

Function hoisting is JavaScript behavior that allows a function declaration to be called before its definition appears in the code. This makes traditional declarations easier to organize in some cases. Arrow functions do not hoist in the same way, so they must be defined before use.

What Function Hoisting Does in JavaScript

Function hoisting is a JavaScript parsing behavior, not a runtime trick. Function declarations are created before code execution reaches them, which is why they can often be called earlier in a file than their visual position suggests.

This behavior is specific to declarations, not every function-like syntax. It helps explain why older JavaScript code often places utility functions below the code that uses them, while still working as expected.

How Hoisting Differs Across Function Forms

The most important distinction is between function declarations and function expressions. A function declaration is hoisted with its body, while a function expression assigned to a variable is subject to that variable’s declaration rules and is not callable before assignment in the same way.

Arrow functions follow the same general pattern as other function expressions: they do not behave like hoisted declarations. That means a call placed before the assignment can fail, even though the syntax still looks like a normal function definition.

Why Hoisting Changes Code Order and Readability

Hoisting can make code easier to organize when helpers are defined after the main flow of logic. Many teams use that style intentionally so the top of a file reads like a story, with supporting functions grouped below.

The trade-off is that hoisting can also hide ordering assumptions. A reader may assume a function must be declared first when the JavaScript engine actually makes the declaration available earlier, so understanding the rule is important for debugging and for reading legacy code.

Common Mistakes and Practical Implications

One common mistake is treating every function syntax as if it hoists the same way. Another is assuming that because one example works, every call-before-definition pattern will work too.

That distinction matters because the failure mode is usually a reference or initialization error, not a syntax error. When a function is needed before assignment and the code uses an expression or arrow function, the issue is often ordering, not the function logic itself.

Standards & Framework Alignment

This section maps relevant standards and security frameworks to the operational risks and controls described in this guidance.

OWASP ASVS, NIST CSF 2.0 and OWASP SAMM set the governance and control requirements practitioners need to meet.

Framework	Control / Reference	Relevance
OWASP ASVS	V15 — Secure Coding and Architecture	Function hoisting affects code structure and maintainability in JavaScript.
Recommendation — Use V15 to keep function declaration order clear and avoid confusing call-before-definition patterns.
NIST CSF 2.0	PR.PS-01 — Configuration Management	Hoisting is a language-level coding pattern that affects how software is structured and read.
Recommendation — Apply PR.PS-01 practices to standardize code style and reduce ordering ambiguity.
OWASP SAMM	Design — Design	Hoisting is a design-time JavaScript pattern that influences readability and implementation consistency.
Recommendation — Review function placement conventions during design to keep execution order obvious.

Practitioner Guidance

Common misunderstanding: Treat hoisting as a feature of declarations, not a blanket rule for all functions. In practice, the safest reading pattern is to check whether the code uses a declaration or an assigned function value before assuming it can be called early.

Practitioner takeaway: Hoisting is useful when you understand the syntax boundary, but it is easy to misread in mixed codebases, so consistency matters more than relying on the trick.

Function Hoisting