Function Declaration vs Function Expression What’s the Difference

Understanding Function Declarations vs Function Expressions in JavaScript

While writing a blog about Arrow Functions, I kept seeing two terms appear everywhere:

• Function Declaration
• Function Expression

That made me pause and ask:

What exactly are these? And why do they matter?

If you are learning JavaScript, you will encounter these concepts very early. Understanding them will make it much easier to learn arrow functions, callbacks, and modern JavaScript patterns.

In this blog, we’ll break everything down in a beginner-friendly way.

---

Topics Covered

In this guide we will learn:

• What functions are and why we need them
• The difference between parameters and arguments
• Function Declarations
• Function Expressions
• Key differences between them
• When to use each type

---

What Are Functions?

Functions are one of the fundamental building blocks of JavaScript.

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

Instead of writing the same code again and again, we can put it inside a function and reuse it whenever needed.

Example:

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

add(5, 10);

Here the function performs one task: adding two numbers.

---

Parameters vs Arguments

Before going further, it’s important to understand two commonly confused terms.

Parameters

Parameters are the variables defined in the function definition.

Example:

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

Here:

• a
• b

are parameters.

They act like placeholders that will receive values later.

---

Arguments

Arguments are the actual values passed to the function when calling it.

Example:

add(5, 10);

Here:

• 5
• 10

are arguments.

So in simple words:

Term	Meaning
Parameters	Variables inside the function definition
Arguments	Actual values passed when calling the function

---

Why Do We Need Functions?

Functions make our programs cleaner, more efficient, and easier to manage.

Here are some key benefits:

1. Code Reusability

Write the code once and reuse it multiple times.

2. Cleaner Code

Functions break large programs into smaller logical parts.

3. Easier Maintenance

If something changes, you only update the function instead of multiple places.

4. Modularity

Programs become easier to understand and scale.

---

Ways to Define Functions in JavaScript

JavaScript provides multiple ways to define functions.

The two most common ones are:

• Function Declaration
• Function Expression

Let’s understand them with a simple analogy.

---

Function Declaration: The "Rich Kid"

A Function Declaration is like a rich kid who already has power before doing anything.

In JavaScript, this special privilege is called hoisting.

Hoisting means you can call the function even before it appears in the code.

Example:

add(5, 10); // calling before definition

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

Even though the function is written later in the code, JavaScript still allows it to run.

That’s because function declarations are hoisted to the top of their scope.

Another important point:

👉 Function declarations always have a name.

---

Function Expression: The "Intern"

A Function Expression is like an intern who cannot start working until HR assigns them a job.

Similarly, a function expression cannot run until it is assigned to a variable.

Example:

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

add(5, 10);

Here the function is assigned to the variable add.

Unlike function declarations, you cannot call it before the assignment.

Example (this will fail):

add(5, 10); // Error

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

Most function expressions are anonymous, meaning they don’t have their own name.

---

Key Differences Between Function Declaration and Function Expression

Feature	Function Declaration	Function Expression
Definition	Defined directly using function	Function assigned to a variable
Hoisting	Fully hoisted	Not fully hoisted
Name	Always named	Often anonymous
Usage	Traditional style	Used in modern patterns

Example comparison:

Function Declaration

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

Function Expression

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

---

When Should You Use Each?

Use Function Declaration When:

• The function should be reusable throughout the file
• You want to call the function before it is defined
• Writing traditional JavaScript code

---

Use Function Expression When:

• Assigning functions to variables
• Passing functions as callbacks
• Working with events, arrays, or asynchronous code

Example:

setTimeout(function() {
  console.log("Hello");
}, 1000);

---

Final Thoughts

Understanding Function Declarations vs Function Expressions is important because many modern JavaScript concepts depend on them.

For example:

• Arrow Functions
• Callbacks
• Higher-order functions
• Event handlers

Once you understand these two patterns, learning arrow functions becomes much easier.

And that’s exactly what we will explore in the next blog.

---