📘 Function Declaration vs Function Expression

---

1️⃣ What Are Functions & Why Do We Need Them?

Think of a function as a reusable block of code.

Instead of writing the same code again and again, we put it inside a function and call it whenever we need it.

Example (Without Function)

console.log(5 + 3);
console.log(10 + 2);

Now imagine doing this 50 times 😅

Example (With Function)

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

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

✔ Clean

✔ Reusable

✔ Easy to maintain

That’s why functions are powerful.

---

2️⃣ Function Declaration Syntax

This is the most common way beginners learn.

Syntax

function functionName(parameters) {
  // code
}

Example

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

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

---

3️⃣ Function Expression Syntax

Here, we store a function inside a variable.

Syntax

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

Example

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

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

Notice the difference?

👉 Declaration: function is defined directly

👉 Expression: function is assigned to a variable

---

4️⃣ Key Differences (Side-by-Side)

Feature	Function Declaration	Function Expression
Defined using	function name()	const name = function()
Hoisted?	✅ Yes	❌ No
Can call before definition?	✅ Yes	❌ No
Stored in variable?	Not required	Yes

---

5️⃣ Hoisting (Very Simple Explanation)

Hoisting means:

👉 JavaScript moves function declarations to the top of the code before execution.

Example – This Works

sayHello();

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

Even though we called it before writing it — it works!

---

Example – This Fails

sayHello();

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

❌ Error

Because function expressions are NOT hoisted the same way.

That’s the main difference.

---

6️⃣ When Should You Use Each?

✅ Use Function Declaration When:

• You want simple reusable functions

• You may call function before defining it

• Writing general utility functions

✅ Use Function Expression When:

• You want more control

• You want to pass functions as arguments

• Working with callbacks

• Modern JavaScript style

In real projects, both are used — but expressions are very common in modern JS.

---

📝 Assignment Practice

1️⃣ Write a function declaration to multiply two numbers

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

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

---

2️⃣ Same logic using function expression

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

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

---

3️⃣ Try calling before defining

console.log(multiply(2, 5)); // ✅ Works

console.log(multiplyExp(2, 5)); // ❌ Error

Now you clearly see the difference 👌

---

📊 Simple Execution Flow

Function Declaration Flow

JS reads file
↓
Moves function to top (hoisting)
↓
Runs code
↓
Function call works anywhere

---

Function Expression Flow

JS reads file
↓
Variable declared (but not function yet)
↓
Function assigned later
↓
Can only call after assignment

---

🎯 Final Summary

• Both create functions

• Declaration is hoisted

• Expression is not

• Expressions are more common in modern JS

• Keep your code small, readable, and practical