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

When we start writing programs something interesting happens very quickly. We begin repeating the same code again and again.

Maybe you're adding numbers in multiple places.
Maybe you're validating a user again and again.
Maybe you're printing the same logic in different parts of the program.

And at some point you realize:

Wait… why am I writing the same thing again?

And that's the exactly problem functions solve.

---

What Are Functions?

A function ia a reusable block of code. Instead of writing the same logic multiple times, you put it inside a function and simply call it whenever you need it. It's like giving a name to a task.

For example imagine you want to add two numbers. Instead of doing this everywhere like:

console.log(5 + 3);
console.log(10 + 2);
console.log(7 + 4);

You could create a function for it.

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

console.log(add(5, 3));
console.log(add(10, 2));
console.log(add(7, 4));

Now instead of rewriting the logic, you jus say:

Hey JS, run the add function .

This is cleaner, reusable and much easier to manage.

---

Function Declaration

Let’s start with the most common way of creating functions.

A function declaration looks like this:

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

function --> keyword
greet --> function name
() --> parameters
{} --> function body

Now whenever we call it:

greet(); // Hello!

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

console.log(multiply(4, 5)); // 30

So the idea is simple we declare a function first, then call it whenever we want.

---

Function Expression

Now here's where things get interesting. In JavaScript, functions are values. That means they can be stored inside variables. This is called a function expression.

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

Notice something different?
Instead of using the function directly with a name, we store ti inside a variable.
Now we call it using the variable:

greet(); // Hello!

Here's the same multiply example using a function expression:

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

console.log(multiply(4, 5)); // 20

So both approaches work, both create function, but internally they behave a little differently and that difference becomes important in real code.

---

Declaration vs Expression (Side by Side)

Let's compare them clearly.

Function Declaration

function sayHello() {
  console.log("Hello!");
}

Function Expression

const sayHello = function() {
  console.log("Hello!");
};

Function Declaration	Function Expression
Has its own name	Stored inside a variable
Defined using function name()	Assigned to a variable
Hoisted	Not hoisted the same way

The last point is the most important one.
Hoisting.

---

The Basic Idea of Hoisting

This is where many beginners get confused, so let's keep it simple. When JavaScript runs your code, it doesn't eecute it strictly line by line immediately.

Before execution starts, JavaScript scans the code and prepares certain things in memory first. This process is called hoisting.

Function declaration get fully hoisted. Which means you can call them even before they appear in the code.

sayHello(); // Hello!

function sayHello() {
  console.log("Hello!");
}

Even though the function is written later, JavaScript already knows about it.

Now try the same with a function expression.

sayHello(); // Uncaught ReferenceError: sayHello is not defined

const sayHello = function() {
  console.log("Hello!");
};

This will throw an error.

Why?
Because the variable sayHello exists, but the function hasn't been assigned to it yet.

So JavaScript basically says:

Wait... I know this variable exists but there's no function stored in it yet.

And the program breaks that's the key difference.

---

When Should You Use Each One?

Now the natural question is which one should I use?
The answer depends on the situation.

Function Declarations are great when:

You want simple reusable functions.

Examples:

• utility functions

• math operations

• helper functions

They are straightforward and readable.

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

---

Function Expression are useful when:

You want functions to behave like values.

Ths becomes very powerful when:

• passing functions to other functions

• writing callbacks

• creating dynamic logic

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

You'll see this pattern a lot in modern JavaScript.

Especially in:

• event handlers

• array methods

• callbacks

• React code

---

Quick Mental Model

A simple way to think about it:

Function declaration => defining a function
Function expression => storing a function in a variable

Both create functions. But their behavior during execution is slightly different.

---

Assignment Practice

Let’s try a small exercise to make this clear.

Function Declaration

Write a function that multiplies two numbers.

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

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

Output:

12

---

Function Expression

Now write the same logic using a function expression.

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

console.log(multiplyNumbers(3, 4));

Output:

12

Same result. Different way of defining the function.

---

Try This Experiment

Try calling both functions before defining them.

You’ll notice:
Function declaration => works.
Function expression => throws an error.

And that’s hoisting in action.

---

Final Understanding

Functions are one of the most powerful concepts in JavaScript.

They allow us to:

• reuse logic

• organize code

• avoid repetition

• build complex behavior from simple pieces

Function declarations and function expressions both create functions. But they behave differently in how JavaScript prepares them before execution.

Function declarations are fully hoisted, so they can be called earlier in the code.

Function expressions behave like variables that store functions, so they only work after they are defined.

Understanding this small difference may seem simple right now… But later, when you start working with callbacks, async code, and frameworks, it becomes incredibly important.

And that’s when you realize:
JavaScript functions are not just blocks of code. They’re first-class citizens of the language.