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

At some point while learning JavaScript, we all write our first function and feel pretty good about it. But then we start seeing functions written in a completely different way in tutorials, open source code, or someone else's project. Same concept, different syntax, and suddenly we are confused about which one to use and why.

That is exactly what this post is about. Let's clear it up once and for all.

---

What is a Function and Why Do We Need It?

Before we get into the two types, let's make sure we are on the same page about what a function actually is.

A function is a reusable block of code that does a specific job. Instead of writing the same logic five times in different places, we write it once inside a function and call it whenever we need it.

Think of it like a recipe. We write the recipe once. Every time we want to make that dish, we just follow the same recipe. We do not rewrite it from scratch each time.

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

greet("Gurjeet"); // Hello, Gurjeet
greet("Priya");   // Hello, Priya

Same function, called twice, different results each time. That is the whole point.

---

Function Declaration

A function declaration is the most straightforward way to define a function. We use the function keyword, give it a name, and write the body.

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

console.log(multiply(3, 4)); // 12

That is it. This is called a function declaration because we are declaring a function with a name right from the start.

---

Function Expression

A function expression is when we create a function and assign it to a variable. The function itself has no name of its own. It lives inside the variable.

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

console.log(multiply(3, 4)); // 12

The result is exactly the same. The difference is just in how we wrote it. Here the function is treated as a value, just like a number or a string, and stored inside a variable called multiply.

Let's put both side by side:

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

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

Both do the same job. The syntax is just different.

---

The Key Difference: Hoisting

This is where things get interesting, and also where the real practical difference between the two lies.

JavaScript does something called hoisting before it runs our code. In simple terms, it reads through the entire file first and moves certain things to the top in memory before executing anything.

Function declarations get hoisted. This means we can actually call a function declaration before we have even written it in our code, and it will work fine.

console.log(greet("Gurjeet")); // Hello, Gurjeet

function greet(name) {
  return "Hello, " + name;
}

JavaScript already knew about greet before reaching that line because the declaration got hoisted to the top.

Function expressions do not get hoisted the same way. If we try to call a function expression before we define it, we get an error.

console.log(greet("Gurjeet")); // Error: Cannot access 'greet' before initialization

const greet = function(name) {
  return "Hello, " + name;
};

The variable greet exists in memory, but the function has not been assigned to it yet at that point. So JavaScript does not know what we are trying to call.

For now, the simple takeaway is this: with function declarations, the order does not matter as much. With function expressions, we must define them before we use them.

---

When to Use Which One

Both are valid and both have their place. Here is a practical way to think about it.

Function declarations work well for the main, named functions in our program. Things like calculateTotal, getUserData, or sendEmail. Functions that are central to what our code does and might be called from multiple places.

function calculateTotal(price, tax) {
  return price + (price * tax);
}

Function expressions are great when we want to assign a function to a variable, pass it to another function, or define it as part of an object. They treat the function as a value, which makes them very flexible.

const calculateTotal = function(price, tax) {
  return price + (price * tax);
};

In modern JavaScript, function expressions are often written as arrow functions, which we covered in the last post:

const calculateTotal = (price, tax) => price + (price * tax);

Same idea, shorter syntax.

---