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

A beginner friendly guide to two ways of writing functions in JavaScript, with side by side comparisons, a simple explanation of hoisting, and hands on practice.

---

What Is a Function and Why Do We Need One?

Imagine you work at a café. Every time a customer orders a coffee, you:

1. Take a cup

2. Add coffee powder

3. Add hot water

4. Stir it

5. Hand it over

You do these exact same five steps dozens of times a day. It would be exhausting to write out all five steps every single time in a recipe book. Instead, you'd just write them once and label it "Make Coffee". Then whenever you need to make a coffee, you just say: "Do the Make Coffee steps."

That's exactly what a function is in JavaScript.

A function is a reusable block of code that you write once and can run (call) as many times as you need. Instead of repeating the same lines of code over and over, you put them inside a function, give the function a name, and call that name whenever you need the job done.

// Without a function — repeated code
console.log(5 + 3);
console.log(10 + 3);
console.log(7 + 3);

// With a function — written once, used many times
function addThree(number) {
  console.log(number + 3);
}

addThree(5);    // 8
addThree(10);   // 13
addThree(7);    // 10

Now, JavaScript gives you two main ways to write a function. Let's look at both.

---

Function Declaration

A function declaration is the most straightforward way to write a function. You use the function keyword, give it a name, and write the code inside curly braces.

Syntax

function functionName(parameters) {
  // code to run
}

Example: Adding Two Numbers

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

let result = addNumbers(4, 6);
console.log(result);   // 10

Breaking it down:

• function: the keyword that starts the declaration

• addNumbers: the name of the function (you choose this)

• (a, b): the inputs the function accepts, called parameters

• return a + b: the function calculates the sum and sends it back

• addNumbers(4, 6): calling the function with the values 4 and 6

This is clean, readable, and very common. You'll see function declarations everywhere in JavaScript code.

---

Function Expression

A function expression is another way to create a function, by storing it inside a variable.

Instead of giving the function its own standalone name, you create a function and assign it to a variable, just like you'd assign a number or string.

Syntax

const functionName = function(parameters) {
  // code to run
};

Notice the semicolon ; at the end, because this is a variable assignment, it ends like any other statement.

Example: The Same Addition Logic

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

let result = addNumbers(4, 6);
console.log(result);   // 10

The result is identical, 10. The function does the same job. The only difference is in how it was written and stored.

The function on the right side of = has no name of its own. It is called an anonymous function, it lives inside the variable addNumbers and gets called through that variable name.

---

Side by Side Comparison

Let's look at both versions next to each other so the differences are crystal clear.

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

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


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

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

Both print exactly the same output. You call them the same way, greet("Rahul"). The difference is entirely in how they are created.

---

Hoisting — A Simple Explanation

This is where the most important practical difference between declaration and expression shows up.

Hoisting sounds like a complex word, but here's the simple idea:

JavaScript reads through your entire file before running any code. During this reading phase, it picks up all function declarations and moves them to the top in its memory. This means you can call a function declaration even before the line where you wrote it.

Function Declaration — Can Be Called Before It Is Defined

// Calling the function BEFORE it is written
let answer = addNumbers(3, 7);
console.log(answer);   // 10 — this works!

// The function is defined down here
function addNumbers(a, b) {
  return a + b;
}

JavaScript saw the declaration during its reading phase and remembered it. So calling it before the definition is perfectly fine.

---

Function Expression — Cannot Be Called Before It Is Defined

// Trying to call the expression BEFORE it is written
let answer = addNumbers(3, 7);   // ERROR — addNumbers is not a function

// The expression is defined down here
const addNumbers = function(a, b) {
  return a + b;
};

This crashes. Why?

Because addNumbers is just a variable. JavaScript knows the variable exists (it was read during the early phase), but its value — the function — hasn't been assigned yet at the point you try to call it. The function only exists after that line is reached during actual execution.

Simple rule to remember:

• Function declaration: can be called anywhere in the file, even above where it's written

• Function expression: must be defined first, then called

---

When to Use Each

Both are valid and both are used in real JavaScript projects. Here's a practical guide for when to pick one over the other.

Use a Function Declaration when:

• You want to write clean, readable, named functions

• You want the flexibility to call the function anywhere in your file

• You're defining general-purpose utility functions

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

Use a Function Expression when:

• You want to store a function in a variable and pass it around

• You want to assign different functions to the same variable under different conditions

• You're writing a function that you only need in one specific place

const calculateDiscount = function(price) {
  return price * 0.10;
};

For beginners, the advice is simple: use function declarations by default. They are easier to read and their hoisting behaviour means you don't have to worry about the order you write things. Use function expressions when you specifically need to store a function in a variable.

---

Assignment

Work through all four steps yourself, this is the best way to see the differences in action.

---

Step 1: Function Declaration: Multiply Two Numbers

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

let result1 = multiply(4, 5);
console.log("Declaration result:", result1);   // Declaration result: 20

---

Step 2: Function Expression: Same Logic

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

let result2 = multiply(4, 5);
console.log("Expression result:", result2);   // Expression result: 20

Both give 20. The logic is identical, only the syntax differs.

---

Step 3: Call Both and Print Results

// Using function declaration
function multiplyDeclaration(a, b) {
  return a * b;
}

// Using function expression
const multiplyExpression = function(a, b) {
  return a * b;
};

console.log("Declaration:", multiplyDeclaration(6, 7));   // Declaration: 42
console.log("Expression:", multiplyExpression(6, 7));     // Expression: 42

---

Step 4: Try Calling Them BEFORE Defining and Observe the Difference

// Try calling declaration before it is defined
console.log(multiplyDeclaration(3, 4));   // 12 — works fine!

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


// Try calling expression before it is defined
console.log(multiplyExpression(3, 4));   // ReferenceError: Cannot access before initialization

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

Run this in your browser console or a JavaScript playground. Read the error message carefully, it tells you exactly what went wrong. Learning to read error messages is one of the most valuable skills you can build as a developer.

---

Quick Recap

	Function Declaration	Function Expression
Syntax starts with	function name() {}	const name = function() {}
Has its own name	Yes	Usually anonymous
Ends with semicolon	No	Yes (it's an assignment)
Can call before defining?	Yes (hoisted)	No (not hoisted)
Stored in a variable	Not required	Yes, always
Best used for	General-purpose functions	Functions stored or passed around

Key Takeaways

• A function is a reusable block of code, write once, run many times

• A function declaration uses the function keyword and stands on its own

• A function expression stores a function inside a variable

• Both work the same way when called, the difference is in how and when they are created

• Hoisting means function declarations are available throughout your file, even above where they are written, function expressions are not

• When in doubt, start with a function declaration, it's simpler and more forgiving for beginners

These two patterns appear constantly in JavaScript code. Once you can read both fluently and understand when each one is appropriate, you'll find navigating real-world JavaScript projects much easier. Keep building!