ReviseAlgo Logo

Functions

Function Declarations vs Expressions

Master JavaScript function fundamentals. Compare function declarations with function expressions in terms of syntax, hoisting, and runtime creation.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

Functions are modular blocks of reusable code designed to perform specific operations. In JavaScript, functions are first-class citizens, meaning they behave like any other variable. There are two primary ways to define a standard function: Function Declarations and Function Expressions.

2. Why It Matters

Understanding the differences between declarations and expressions prevents bugs caused by hoisting (calling functions before they are declared) and allows you to structure modular code.

3. Real-World Analogy

Think of building a Factory Workstation:

  • Function Declaration (Built-in Assembly Line): Built directly into the factory floor structure when the factory is constructed. It is ready for work the moment the lights turn on, regardless of when workers arrive.
  • Function Expression (Portable Desktop Tool): Set up dynamically on a workbench during a shift, stored in a specific locker (variable). You cannot turn the tool on until you retrieve it and plug it in on the line.

4. How It Works

The two syntaxes evaluate differently during execution:

1. Function Declarations:

Declared standalone using the function keyword. They are hoisted to the top of their enclosing scope.

2. Function Expressions:

Created by defining a function and assigning it to a variable. They are not hoisted, meaning you cannot call them before the assignment statement.

5. Internal Architecture

During the memory creation phase of the Execution Context:
• The engine reads all Function Declarations and stores the actual function object in memory immediately, binding the name pointer.
• For Function Expressions, the variable storing the expression is hoisted according to its variable type (initialized to undefined for var, or uninitialized for let/const), but the function body is not evaluated until execution reaches that line.

6. Comparison Summary

Feature Function Declaration Function Expression
Syntax Structure Standalone statement Part of an assignment statement
Hoisting Behavior Fully hoisted (name & body) Not hoisted (variable is hoisted, value is not)
Evaluation Phase Before code execution starts When execution reaches the assignment line
Use Cases General modular utility functions Callbacks, closures, inline functions

7. Practical Example

This example demonstrates using function expressions as callback parameters inside list handlers:

8. Common Mistakes

  • Calling expressions before declaration: Attempting to call a let/const function expression early crashes execution with a ReferenceError.
  • Relying too heavily on hoisting: Writing code where helper functions are called pages before their declarations makes the file structure hard to follow.

9. Quick Quiz

Q1: Can an anonymous function expression be called recursively?

A) Yes, if we assign it to a Named Function Expression

B) No, anonymous expressions cannot reference themselves

Answer: A — A Named Function Expression (e.g. const fn = function recurse() {}) lets you use the internal name 'recurse' to call the function recursively.

10. Scenario-Based Challenge

The Dynamic Handler Load:

You are designing a routing server. Different route handlers are loaded dynamically based on customer authentication. Explain why using function expressions assigned to variables is cleaner than using global function declarations for hot-swapping route handlers.

11. Debugging Exercise

Explain why this code crashes, and how to fix it:

console.log(add(5, 5));

var add = function(x, y) {
  return x + y;
};
View Solution

Diagnosis: Since var add is used, the variable add is hoisted and initialized to undefined. Attempting to execute add(5, 5) triggers a TypeError: add is not a function because the function expression value has not yet been assigned to the variable.

Fix: Either change the code to a function declaration, or assign the expression before invoking it:

const add = function(x, y) {
  return x + y;
};
console.log(add(5, 5));

12. Interview Questions

🟢 Q1: Why does JavaScript support function hoisting for declarations but not expressions?

Answer: During the compiler pass phase, the engine registers function declarations and binds their references directly in the variable environment. Variable statements (such as const x = ...) are only registered as variables. Their initialization and assignment value evaluation only happen step-by-step during runtime execution.

13. Production Considerations

  • • Immutable Handlers: Always declare your function expressions using the const keyword to prevent other scripts from accidentally overwriting or modifying the function bindings at runtime.