First-Class & Higher-Order Function ka Funda

Understand how First-Class & Higher-Order Function works with Fullstackgada

Instagram icon More Diagrams

📸 First-Class Functions ka Demo

First-Class Functions: Functions ko variables ki tarah treat kar sakte hain - assign, pass, return sab kuch!

📷 Photo wali Misal

💝
Babita ki photo: Jaise photo ko wallet mein rakhte hain, waise function ko variable mein!
❤️
Share karna: Photo doosron ko de sakte hain, function bhi pass kar sakte hain!
Upar ke buttons click karo to see First-Class Functions in action!

🔝 Higher-Order Functions ka Demo

Higher-Order Functions: Functions jo doosre functions ko accept ya return karte hain.
Upar ke Higher-Order Functions try karo!
[{ name: "Jethalal", age: 45, loves: "Babita" }, { name: "Bhide", age: 50, loves: "Discipline" }, { name: "Popatlal", age: 40, loves: "Marriage" }]

🎯 Function Reference vs Function Call

Important Fark: myFunc (reference) vs myFunc() (turant call)

📋 Function Reference (Bina Parentheses)

// Function ko reference ke roop mein pass karna
function sayHello() {
return "Hello Babita Ji!";
}
let funcRef = sayHello; // Reference (no call)
console.log(funcRef); // [Function: sayHello]
console.log(funcRef()); // "Hello Babita Ji!"

📞 Function Call (Parentheses ke Saath)

// Function ko turant call karna
function sayHello() {
return "Hello Babita Ji!";
}
let result = sayHello(); // Turant call
console.log(result); // "Hello Babita Ji!"
Upar ke buttons click karo to samjho function reference aur call ka fark!

🛠️ Apna Higher-Order Function Banaye

// Higher-Order Function jo multiplier functions banata hai
function createMultiplier(factor) {
return function(number) {
return number * factor;
};
declaration"}
code-line // Usage
double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15
// Higher-Order Function jo validators banata hai
function createValidator(condition) {
return function(value) {
return condition(value);
};
}
// Usage
const isAdult = createValidator(age => age >= 18);
const isValidName = createValidator(name => name.length > 2);
// Higher-Order Function jo logging add karta hai
function withLogging(fn) {
return function(...args) {
console.log(`Calling ${fn.name} with:`, args);
const result = fn(...args);
console.log(`Result:`, result);
return result;
};
}
// Higher-Order Function jo timing measure karta hai
function withTiming(fn) {
return function(...args) {
const start = performance.now();
const result = fn(...args);
const end = performance.now();
console.log(`${fn.name} took ${end - start}ms`);
return result;
};
}
Upar ka tab select karo aur demo button click karo to custom Higher-Order Functions dekho!

🔍 First-Class vs Higher-Order Functions

Concept 📸 First-Class Functions 🔝 Higher-Order Functions
Definition Functions ko values ki tarah treat karna Functions jo doosre functions ko accept ya return karte hain
Capabilities Assign, Pass, Return functions Functions ko parameters ke roop mein lena, Functions return karna
Examples let fn = myFunction; fn(); array.map(fn), array.filter(fn)
Use Cases Dynamic function assignment, Callbacks Data transformation, Event handling, Composition
Jethalal ki Misal Photo ko wallet mein rakhna (variable assignment) Photo ko frame karne wala function (wrapper function)

🛠️ JavaScript ke Built-in Higher-Order Functions

Function Kaam Return Karta Hai Misal
map() Har element ko transform karta hai Transformed elements ke saath nayi array arr.map(x => x * 2)
filter() Condition ke hisaab se elements chunta hai Filtered elements ke saath nayi array arr.filter(x => x > 5)
reduce() Array ko ek single value mein convert karta hai Ek accumulated value arr.reduce((a,b) => a+b, 0)
forEach() Har element ke liye function chalata hai undefined (sirf side effects) arr.forEach(x => console.log(x))
find() Pehla matching element dhundta hai Pehla matching element ya undefined arr.find(x => x.name === "Jethalal")
some() Check karta hai koi element match karta hai ya nahi true/false arr.some(x => x > 10)
every() Check karta hai sab elements match karte hain ya nahi true/false arr.every(x => x > 0)