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

If you are learning JavaScript, you’ll often hear people say:

“Everything becomes easy once you understand functions.”

And that’s true.

Functions are one of the most important building blocks in JavaScript. In this article, we’ll deeply understand:

• What functions are and why we need them

• Function declaration syntax

• Function expression syntax

• Key differences between them

• A very simple idea of hoisting

• When to use which one

• Practice assignments with examples

No heavy theory. No complex jargon. Just clear explanations with small examples.

---

1. What Are Functions and Why Do We Need Them?

Think of functions as reusable blocks of code

Imagine you are cooking food 🍳
Every time you want tea, you follow the same steps:

1. Boil water

2. Add tea leaves

3. Add sugar

4. Pour into a cup

Instead of explaining these steps again and again, you can just say:

“Make tea.”

That’s exactly what a function does in programming.

Definition (in very simple words)

A function is a block of code that:

• Does a specific task

• Can be reused multiple times

• Runs only when we call it

Why do we need functions?

✔ Avoid repeating the same code
✔ Make code clean and readable
✔ Easy to fix bugs (change in one place)
✔ Easier to understand large programs

---

Simple Example: Adding Two Numbers

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

add(2, 3); // 5
add(10, 20); // 30
add(5, 35); // 40

Instead of writing a + b everywhere, we just call the function.

---

2. Function Declaration Syntax

What is a Function Declaration?

A function declaration is the traditional way of creating a function using the function keyword.

Syntax

function functionName(parameters) {
  // code to run
}

Example: Adding Two Numbers

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

console.log(addNumbers(5, 3)); // 8

Key points

• Starts with the function keyword

• Must have a name

• Can be called before it is written in code (important later!)

---

3. Function Expression Syntax

What is a Function Expression?

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

Here, the function behaves like a value.

Syntax

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

Example: Adding Two Numbers

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

console.log(addNumbers(5, 3)); // 8

Key points

• Function is assigned to a variable

• Can be anonymous (no name)

• Cannot be used before it is defined beacuse of Temporal Dead Zone (TDZ)

---

4. Function Declaration vs Function Expression

🔹 Visual Comparison

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

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

---

5. Key Differences between function declaration and function expression

Feature	Function Declaration	Function Expression
Syntax	function name()	const name = function()
Has name	Yes	Optional
Hoisting	Yes	Yes but can not access before declaration bcs of Temporal Dead Zone (TDZ)
Can call before definition	Yes	No
Stored in variable	No	Yes
Common use	General functions	Callbacks, dynamic logic

---

6. Basic Idea of Hoisting (Very High Level)

What is Hoisting? (Simple language)

Hoisting means:

JavaScript moves some things to the top before running the code.

But not everything is hoisted the same way.

---

Function Declaration & Hoisting

sayHello();

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

✅ This works

Because function declarations are hoisted

---

Function Expression & Hoisting

sayHello();

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

❌ This gives an error

Because function expressions are also hoisted but can not access before declaration because of Temporal Dead Zone (TDZ)

---

Easy Rule to Remember

• ✅ Function Declaration → Can call before defining

• ❌ Function Expression → Must define first, then call

---

7. When to Use Which Type?

Use Function Declaration when:

✔ You want simple, reusable logic

✔ Function should be available everywhere

✔ Writing utility or helper functions

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

---

Use Function Expression when:

✔ You want more control

✔ Working with callbacks

✔ Functions depend on conditions

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

---

8. Assignment (Try in your console)

Step 1: Function Declaration

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

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

---

Step 2: Function Expression

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

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

---

Step 3: Try Calling Before Definition

multiplyBefore(2, 3);

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

✅ Works

multiplyExpBefore(2, 3);

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

❌ Error

👉 Observe the difference carefully

---

Final Thoughts

• Functions help us reuse code

• Function declarations are simple and hoisted

• Function expressions are more controlled and flexible

• Understanding this difference will make JavaScript much easier