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

1. Introduction

Jab aap JavaScript seekhna shuru karte hain, toh sabse pehle aur zaroori concepts mein se ek hai functions.

Functions hote kya hain? Simple shabdon mein, ek function ko code ka ek aisa hissa (block) samjhein jise aap baar-baar use kar sakte hain. Ek hi code ko das alag jagah likhne ke bajaye, aap use ek function ke andar ek baar likhte hain aur jab bhi zaroorat ho, use "call" kar lete hain.

Programming mein functions bahut zaroori hain kyunki yeh aapke code ko saaf, organized aur reusable rakhte hain. Ek acchi application functions par hi tiki hoti hai.

Lekin, jaise-jaise aap JavaScript tutorials padhenge, aap notice karenge ki functions likhne ke kayi tareeke hain. Sabse common do tareeke hain Function Declarations aur Function Expressions. Is guide mein hum dekhenge ki inme kya farq hai, yeh kaise behave karte hain, aur aapko kab kaunsa use karna chahiye.

---

2. Function Declaration

Function Declaration JavaScript mein function banane ka sabse purana aur traditional tareeka hai. Isme hum function keyword ka use karte hain, aur uske turant baad function ko ek naam dete hain.

Syntax

function functionName(parameters) {
  // Code jo chalana hai
}

Simple Example: Do Numbers ko Jodna

Chaliye ek practical example dekhte hain. Hum ek aisa function banana chahte hain jo do numbers ko lekar unhe jod de.

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

// Function ko call karna
const result = add(5, 10);
console.log(result); // Output: 15

Yeh kaise kaam karta hai:

• Humne function keyword use kiya.

• Function ko add naam diya.

• Use do parameters (a aur b) diye, jo un numbers ki jagah lenge jo hum baad mein bhejenge.

• Curly braces {} ke andar humne bola ki a + b ka result return (wapas) karo.

• Aakhir mein, humne add(5, 10) call kiya aur result print kar diya.

Kyunki iska ek saaf naam hai, yeh function officially declare ho gaya hai aur JavaScript environment mein saver ho gaya hai.

---

3. Function Expression

Function Expression thoda alag hai. Isme aap function ko naam dekar declare karne ke bajaye, ek function banate hain aur use ek variable mein assign (store) kar dete hain.

Syntax

const variableName = function(parameters) {
  // Code jo chalana hai
};

Simple Example: Do Numbers ko Jodna (Expression Style)

Pichle example ko hi rewrite karte hain, lekin is baar function expression ka use karke.

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

// Function ko call karna
const result = add(5, 10);
console.log(result); // Output: 15

Declaration se yeh kaise alag hai?

• Notice karein ki function keyword ke turant baad function ka koi naam nahi hai. Ise hum anonymous function kehte hain.

• Yeh function apne aap mein independently exist nahi karta, balki yeh const add variable ke andar store hai.

• Is function ko use karne ke liye, hum variable ka naam add call karte hain aur parameters bhejte hain.

---

4. Side-by-Side Comparison

Inke beech ke farq ko aur saaf samajhne ke liye yeh table dekhein:

Feature	Function Declaration	Function Expression
Syntax	function name() {}	const name = function() {}
Kaise Define hota hai	Yeh independently exist karta hai.	Yeh ek variable ki value ki tarah assign hota hai.
Kab call kar sakte hain	Code mein kahin bhi (likhne se pehle bhi!).	Sirf tab jab variable define ho chuka ho.

Chaliye aakhri point "Kab call kar sakte hain" ko detail mein samajhte hain, jise hum Hoisting kehte hain.

---

5. Hoisting (A Simple Explanation)

Hoisting sunne mein thoda technical lag raha hoga, par iska concept bahut simple hai.

Jab JavaScript aapki file load karta hai, toh code chalane se pehle woh poore document ko scan karta hai. Woh aapki saari Function Declarations ko utha kar script ke sabse upar (top) par le jata hai (parde ke peeche).

Is behavior ki wajah se:

• Function Declarations ko aap unke likhne se pehle hi call kar sakte hain.

• Function Expressions ko aap pehle call nahi kar sakte. (Kyunki variable assignments hoist nahi hote).

Hoisting Demonstration Examples

Example 1: Function Declaration ka Jadoo

// Likhne se PEHLE hi call kar rahe hain!
sayHello(); // Output: "Hello, Developer!"

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

Kyu kaam kiya: JavaScript ne sayHello ko parde ke peeche upar shift kar diya tha, isliye use pata tha ki sayHello kya hai.

Example 2: Function Expression ki Limitation

// Variable assign hone se PEHLE call karne ki koshish!
sayGoodbye(); // Error: Cannot access 'sayGoodbye' before initialization

const sayGoodbye = function() {
  console.log("Goodbye, Developer!");
};

Kyu fail hua: JavaScript ko pata hai ki sayGoodbye variable hai, lekin jab tak woh line nahi aati jahan function define hai, variable khali rehta hai. Isliye iska pehle call hona possible nahi hai.

---

6. Kab Kya Use Karein?

Dono hi tareeke sahi hain aur aap apne career mein dono hi use karenge. Decision lene ke liye kuch hints:

Function Declarations tab use karein jab:

• Aap utility functions bana rahe hon (math, formatting, etc.) jo aap poori file mein kahin bhi use karna chahte hain.

• Aap chahte hain ki aapka main code upar rahe aur functions file ke neeche (safayi ke liye), lekin calls upar se hi hon.

Function Expressions tab use karein jab:

• Aap ek function ko kisi dusre function mein parameter ki tarah bhej rahe hon (ise callback function kehte hain).

• Aap chahte hain ki function sirf tabhi available ho jab woh define ho chuka ho. Isse code mein aane wale ajeeb aur confusing bugs kam hote hain.

---

7. Practical Assignment

Kya aap apni knowledge test karne ke liye taiyar hain? Yeh exercise try karein! Is code ko apne browser console ya editor mein dekhein.

Aapka Goal:

1. Ek function declaration likhein jo do numbers ko multiply kare.

2. Wahi same logic ek function expression se likhein.

3. Dono ko call karein aur results print karein.

4. Experiment ke liye, dono ko unke likhne se pehle call karne ki koshish karein aur dekhein hoisting kaise kaam karti hai.

Solution block:

// Step 4: Define karne se PEHLE call
console.log(multiplyDeclaration(4, 5)); // Output: 20 (Works due to Hoisting!)

// console.log(multiplyExpression(4, 5)); // ISE UNCOMMENT KAREIN ERROR DEKHNE KE LIYE

// ----------------------------------------

// Step 1: Function Declaration
function multiplyDeclaration(num1, num2) {
  return num1 * num2;
}

// Step 2: Function Expression
const multiplyExpression = function(num1, num2) {
  return num1 * num2;
};

// Step 3: Call karna
console.log("Declaration Result:", multiplyDeclaration(10, 2)); // Output: 20
console.log("Expression Result:", multiplyExpression(10, 2)); // Output: 20

---

8. Conclusion

Function Declarations aur Function Expressions ke beech ka farq samajhna har JavaScript beginner ke liye ek bada milestone hai.

Summary yeh hai:

• Declarations independently exist karte hain aur hoisting ka fayda uthate hain (kahin se bhi call ho sakte hain).

• Expressions variables mein store hote hain aur ek strict order follow karte hain (pehle define, phir call), jo modern callbacks ke liye perfect hain.

Dono ki practice karein! Inhe jaldi master karne se aapki JavaScript journey aur bhi aasaan aur mazedaar ho jayegi. Happy coding!