Function Declaration vs Function Expression: What's the difference?

In JavaScript, functions are your "workers." They are reusable blocks of code designed to perform a particular task. Instead of writing the same logic ten times, you wrap it in a function and call it whenever needed.

Function Declaration

A Function Declaration (also called a Function Statement) is the most traditional way to define a function. It starts with the function keyword, followed by a name.

Syntax

function add(a, b) {
    return a + b;
}

console.log(add(5, 10)); // Output: 15

Why use it? It is clear, readable, and behaves exactly like a standard "declaration" in other languages.

Function Expression

A Function Expression involves defining a function and assigning it to a variable. In this case, the function itself is often "anonymous" (it has no name of its own), and you access it through the variable name.

const add = function(a, b) {
    return a + b;
};

console.log(add(5, 10)); // Output: 15

Why use it? Expressions are useful when you want to pass functions as arguments to other functions or keep your global scope clean.

Key Differences: The "Hoisting" Factor

The biggest technical difference between the two is Hoisting.

What is Hoisting? (The Simple Version)

JavaScript has a behavior where it "hoists" (lifts) declarations to the top of their scope before the code actually runs.

• Function Declarations ARE hoisted: You can call the function before you even write it in your code. JavaScript looks ahead, finds the declaration, and makes it available.

• Function Expressions ARE NOT hoisted: Because the function is assigned to a variable (like const or let), JavaScript treats it like a normal variable. If you try to call it before the line where it's defined, you will get a ReferenceError.

Feature	Function Declaration	Function Expression
Syntax	const name = function() { ... }	const name = function() { ... }
Hoisting	Hoisted (Can call before definition)	Not Hoisted (Must define before calling)
Naming	Must have a name	Usually anonymous (assigned to variable)
Usage	General-purpose logic	Passing to other functions/callbacks

When to use each?

• Use Declarations for your main logic and top-level functions. They make the code easy to read because you can organize your file by calling high-level logic at the top and defining the details at the bottom.

• Use Expressions when you are working with modern patterns like Arrow Functions, or when you only need a function inside a specific block or as a "callback" for things like .map() or .filter().

Assignment: Put it into Practice

To truly understand the difference, try this exercise:

1. Step 1: Write a Function Declaration named multiply that takes two numbers and returns their product. Call it before the declaration line.

2. Step 2: Write a Function Expression named multiplyExpr with the same logic. Call it before the expression line.

3. Step 3: Run your code and observe which one works and which one throws an error.

// Test 1: Declaration
console.log(multiply(4, 5)); // Should work!

function multiply(a, b) {
    return a * b;
}

// Test 2: Expression
console.log(multiplyExpr(4, 5)); // Should throw a ReferenceError!

const multiplyExpr = function(a, b) {
    return a * b;
};

Happy Coding, Cohort 2026! Mastering these fundamentals today will make your web dev journey much easier tomorrow!