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

Functions are one of the most important concepts in JavaScript. They help you organize your code and avoid repeating the same logic again and again.

In JavaScript, there are multiple ways to create functions, but two of the most common are:

• Function Declaration

• Function Expression

At first they may look similar, but there are some important differences. Let’s understand them step by step.

1. What Functions Are and Why We Need Them

A function is a reusable block of code that performs a specific task.

Instead of writing the same code many times, you can place that code inside a function and reuse it whenever needed.

For example, imagine you want to add two numbers multiple times in your program.

Without a function:

let result1 = 5 + 3;
let result2 = 10 + 4;
let result3 = 7 + 6;

This quickly becomes repetitive.

Using a function makes it cleaner:

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

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

Now the logic is written once and reused many times.

2. Function Declaration Syntax

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

Example:

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

You can call the function like this:

console.log(greet("Aman"));

Output:

Hello Aman

In this case:

• greet is the function name

• name is the parameter

• the function returns a greeting message

Function declarations are very common and easy to read.

3. Function Expression Syntax

A function expression is when a function is stored inside a variable.

Example:

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

Calling the function works the same way:

console.log(greet("Rahul"));

Output:

Hello Rahul

Here:

• greet is a variable

• the function itself does not have a name (this is called an anonymous function)

The main difference is that the function is treated like a value assigned to a variable.

4. Key Differences Between Declaration and Expression

Let’s compare them side by side.

Function Declaration

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

Function Expression

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

Both can achieve the same result, but their behavior in the code is slightly different.

5. Basic Idea of Hoisting (Simple Explanation)

Hoisting is a JavaScript behavior where some declarations are moved to the top of their scope before code execution.

This mainly affects function declarations.

Example:

sayHello();

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

This works even though the function is called before it appears in the code.

Now look at a function expression.

sayHello();

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

This will cause an error because the variable has not been initialized yet.

So in simple terms:

• Function declarations can be used before they are defined

• Function expressions cannot

6. When to Use Each Type

Both function declarations and expressions are useful, but developers often use them in different situations.

Use Function Declaration When:

• You want a clearly defined reusable function

• The function should be accessible anywhere in the file

• You want simple and readable structure

Example:

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

---

Use Function Expression When:

• You want to store a function in a variable

• You want to pass a function as data

• You want more control over when it becomes available

Example:

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