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

You've written the same block of code three times in a row. Then you need to change it — and you change it three times. There's a better way. It's called a function, and it's one of the most important tools in JavaScript.

What is a Function?

A function is a reusable block of code with a name. You write it once, call it anywhere.

Think of it like a recipe. You write the recipe once. Whenever you want to cook that dish, you just follow the recipe — you don't rewrite it every time.

// without a function — repetitive
console.log(5 + 3);
console.log(10 + 3);
console.log(20 + 3);

// with a function — reusable
function addThree(num) {
  console.log(num + 3);
}

addThree(5);  // 8
addThree(10); // 13
addThree(20); // 23

Same logic. Written once. Used three times. That's the power of functions.

1. Function Declaration

This is the most straightforward way to create a function. You use the function keyword followed by a name.

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Priya");  // Hello, Priya!
greet("Rahul");  // Hello, Rahul!

Syntax breakdown:

function   greet      (name)     { ... }
   ↑          ↑          ↑          ↑
keyword    name     parameter    body

A more practical example — adding two numbers:

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

let result = add(10, 25);
console.log(result); // 35

return sends the value back so you can use it elsewhere — store it in a variable, pass it to another function, print it.

2. Function Expression

In JavaScript, functions can also be stored in variables. This is called a function expression.

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("Priya");  // Hello, Priya!
greet("Rahul");  // Hello, Rahul!

Same result. Different syntax. The function has no name of its own — it lives inside the variable greet. This kind of function is called an anonymous function.

Same add example as a function expression:

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

let result = add(10, 25);
console.log(result); // 35

The call looks identical — add(10, 25). The difference is in how they're defined, not how they're called.

3. Side by Side Comparison

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

// Function Expression
const multiply = function(a, b) {
  return a * b;
};

4. Hoisting — The Key Difference

Hoisting is JavaScript's behavior of moving declarations to the top of the file before running the code.

Think of it like this: before your code runs, JavaScript quickly scans the file and takes note of all function declarations. So by the time your code actually executes, JavaScript already knows about them — even if they appear later in the file.

Function Declaration — hoisted ✅

You can call a function declaration before you define it:

// Called BEFORE it's defined
console.log(add(3, 4)); // 7 ✅ works fine!

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

JavaScript saw add during its scan, so it's available from line 1.

Function Expression — NOT hoisted ❌

You cannot call a function expression before you define it:

// Called BEFORE it's defined
console.log(multiply(3, 4)); // ❌ TypeError: multiply is not a function

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

const multiply is hoisted as a variable — but its value (the function) is not. So at that point, multiply exists but is undefined, not a function yet.

Simple rule: Function declarations are ready from the start. Function expressions are only ready after that line runs.

5. When to Use Each

Use function declaration when:

• You're writing a general utility or helper function

• You want it available anywhere in the file

• Readability and clarity matter most

function calculateTax(price) {
  return price * 0.18;
}

Use function expression when:

• Assigning a function to a variable

• Passing a function as an argument (callback)

• You want to control exactly when the function is available

const handleClick = function() {
  console.log("Button clicked!");
};

// common in callbacks
setTimeout(function() {
  console.log("Runs after 2 seconds");
}, 2000);

Quick Summary

// ── Declaration ──────────────────────────────
function square(n) {
  return n * n;
}
console.log(square(5));  // 25

// ── Expression ───────────────────────────────
const cube = function(n) {
  return n * n * n;
};
console.log(cube(3));  // 27

// ── Hoisting test ────────────────────────────
console.log(square(4)); // ✅ 16 — works before definition
// console.log(cube(4)); // ❌ Error — not ready yet

🧪 Your Turn — Assignment Challenge

1. Function declaration that multiplies two numbers

function multiply(a, b) {
  return a * b;
}
console.log(multiply(6, 7)); // 42

2. Same logic as a function expression

const multiply = function(a, b) {
  return a * b;
};
console.log(multiply(6, 7)); // 42

3. Call both and print results — Both print 42. The call syntax is identical.

4. Try calling before defining — observe the difference

// Test 1 — declaration called early
console.log(multiplyDecl(4, 5)); // ✅ 20 — works!

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

// Test 2 — expression called early
console.log(multiplyExpr(4, 5)); // ❌ TypeError

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

Run both. Read the error on the second one carefully. That's hoisting showing itself.

Wrapping Up

Both function declarations and expressions do the same job — they create reusable blocks of code. The real difference comes down to hoisting and when they're available.

As a general habit: use const with function expressions for most things in modern JavaScript — it keeps your code predictable. Use declarations when you want something available throughout your file.