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

Hey Everyone,

In this blog, we will learn about Function Declaration vs Function Expression in JavaScipt.

Functions are one of the most important concepts in JavaScript. They help us reuse code, organize logic, and make programs easier to manage.

---

What Are Functions?

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

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

Example:

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

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

Output:

5

Here, the function adds two numbers and returns the result.

Functions help keep code clean, organized, and reusable.

---

Function Declaration

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

Syntax:

function functionName(parameters) {
  // code
}

Example:

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

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

Output:

20

Here:

• multiply is the function name

• a and b are parameters

• The function returns the product

---

Function Expression

A function expression means assigning a function to a variable.

Syntax:

const functionName = function(parameters) {
  // code
};

Example:

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

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

Output:

20

The function works the same way, but here the function is stored inside a variable.

---

Declaration vs Expression (Side-by-Side)

Function Declaration:

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

Function Expression:

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

Both functions behave similarly when called.

Example:

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

Output:

Hello Rahul

---

Key Differences

Feature	Function Declaration	Function Expression
Definition	Defined using function keyword	Stored inside a variable
Hoisting	Fully hoisted	Not fully hoisted
Usage	Can be called before definition	Must be defined before calling
Syntax	function add(){}	const add = function(){}

---

Understanding Hoisting (Simple Explanation)

Hoisting means JavaScript moves certain declarations to the top during execution.

Let’s see an example.

Function Declaration

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

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

This works because function declarations are hoisted.

Output:

5

---

Function Expression

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

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

This will cause an error because the function is not available before it is defined.

Why?

Because the variable add is declared first but the function assignment happens later.

---

Simple Execution Flow

Function Declaration:

JS reads file
↓
Function is hoisted
↓
Function call works

Function Expression:

JS reads file
↓
Variable created
↓
Function assigned later
↓
Calling before assignment causes error

---

When Should You Use Each?

Use Function Declaration When

• You want a simple reusable function

• The function should be available anywhere in the file

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 functions as arguments

• You want better control over scope

Example:

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

Many modern JavaScript patterns prefer expressions because they work well with callbacks and functional programming.

---

Practice Assignment

Try this in your browser console.

1. Function Declaration

Write a function that multiplies two numbers.

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

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

---

2. Function Expression

Write the same logic using a function expression.

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

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

---

3. Experiment With Hoisting

Try calling both functions before defining them.

Observe:

• Function declaration works

• Function expression throws an error

This experiment helps you understand how JavaScript executes code.

---

And now, you know what Function Declaration vs Function Expression is.

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!