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

As your JavaScript programs grow, you’ll often need to repeat the same logic multiple times.

Instead of writing the same code again and again, JavaScript provides functions.

A function is simply a reusable block of code designed to perform a task.

For example, imagine you want to add two numbers several times in your program. Instead of repeating the logic everywhere, you can create a function.

Example:

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

console.log(add(5, 3));

Output:

8

Once the function is created, you can reuse it whenever you want.

In JavaScript, there are two common ways to create functions:

• Function Declaration

• Function Expression

Understanding the difference between them is important because they behave slightly differently in JavaScript.

---

Function Declaration

A function declaration defines a function using the function keyword followed by the function name.

Syntax:

function functionName(parameters) {
  // code
}

Example :

Let’s create a function that adds two numbers.

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

console.log(addNumbers(4, 6));

Output:

10

Here:

• addNumbers → function name

• a and b → parameters

• return → sends the result back

Function declarations are one of the most common ways to define functions in JavaScript.

Function Expression

A function expression stores a function inside a variable.

In this case, the function does not need a name, because it is assigned to a variable.

Syntax

let variableName = function(parameters) {
  // code
};

Example

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

console.log(addNumbers(4, 6));

Output:

10

Here:

• addNumbers is a variable

• The function is assigned to that variable

So we can call the function using the variable name.

Declaration vs Expression (Side-by-Side)

Let’s compare them together.

Function Declaration

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

Function Expression

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

Both perform the same task, but they are written differently.

Key Differences Between Them

Feature	Function Declaration	Function Expression
Naming	Must have a function name	Usually anonymous
Storage	Defined directly	Stored in a variable
Hoisting	Fully hoisted	Not fully hoisted
Usage	Can be called before definition	Must be defined before calling

The biggest difference comes from hoisting.

What is Hoisting? (Simple Explanation)

Hoisting means that JavaScript moves certain declarations to the top of the code before execution.

This affects how functions behave when called before they are defined.

Let’s see how this works.

---

Hoisting with Function Declaration

Function declarations can be used before they appear in the code.

Example:

console.log(add(2, 3));

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

Output:

5

Even though the function is written after the call, it still works.

This happens because function declarations are hoisted.

---

Hoisting with Function Expression

Function expressions behave differently.

Example:

console.log(add(2, 3));

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

This will produce an error:

Cannot access 'add' before initialization

Why?

Because the variable is not ready yet when the code runs.

So function expressions cannot be used before they are defined.

---

When Should You Use Each?

Both types are useful depending on the situation.

Use Function Declaration When

• The function should be available throughout the file

• You want clearer structure

• The function represents a main piece of logic

Example:

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

---

Use Function Expression When

• You want to assign functions to variables

• You want more control over when the function is created

• You plan to pass the function as an argument

Example:

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

.