First-Class & Higher-Order Functions Interactive Demo
Master JavaScript functions with Fullstackgada’s fun approach! 🚀
More Diagrams
Follow for More
📸 First-Class Functions Demo
First-Class Functions: Treat functions like variables—assign, pass, or return them!
📷 Photo Analogy
💝
Photo in Wallet: Store a function in a variable like keeping a photo in your wallet!
❤️
Sharing Photo: Pass a function as an argument like sharing a photo!
🔝 Higher-Order Functions Demo
Higher-Order Functions: Functions that accept or return other functions.
[{ name: "Jethalal", age: 45, loves: "Babita" },
{ name: "Bhide", age: 50, loves: "Discipline" },
{ name: "Popatlal", age: 40, loves: "Marriage" }]
🎯 Function Reference vs Function Call
Key Difference:
myFunc (reference) vs myFunc() (immediate call)
📋 Function Reference (Without Parentheses)
// Pass function as a reference
function sayHello() {
return "Hello, World!";
}
let funcRef = sayHello; // Reference (no call)
console.log(funcRef); // [Function: sayHello]
console.log(funcRef()); // "Hello, World!"
📞 Function Call (With Parentheses)
// Call function immediately
function sayHello() {
return "Hello, World!";
}
let result = sayHello(); // Immediate call
console.log(result); // "Hello, World!"
🛠️ Create Your Own Higher-Order Function
// Higher-Order Function that creates multiplier functions
function createMultiplier(factor) {
return function(number) {
return number * factor;
};
}
// Usage
const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15
// Higher-Order Function that creates validators
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 that adds logging
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 that measures timing
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;
};
}
🔍 First-Class vs Higher-Order Functions
| Concept | 📸 First-Class Functions | 🔝 Higher-Order Functions |
|---|---|---|
| Definition | Treat functions as values | Functions that accept or return other functions |
| Capabilities | Assign, pass, return functions | Accept functions as parameters, return functions |
| Examples | let fn = myFunction; fn(); | array.map(fn), array.filter(fn) |
| Use Cases | Dynamic function assignment, callbacks | Data transformation, event handling, composition |
| Fun Analogy | Store a photo in a wallet (variable assignment) | Create a frame for the photo (wrapper function) |
🛠️ JavaScript’s Built-in Higher-Order Functions
| Function | Purpose | Returns | Example |
|---|---|---|---|
| map() | Transforms each element | New array with transformed elements | arr.map(x => x * 2) |
| filter() | Selects elements based on a condition | New array with filtered elements | arr.filter(x => x > 5) |
| reduce() | Converts array to a single value | Single accumulated value | arr.reduce((a,b) => a+b, 0) |
| forEach() | Runs a function for each element | undefined (side effects only) | arr.forEach(x => console.log(x)) |
| find() | Finds the first matching element | First matching element or undefined | arr.find(x => x.name === "Jethalal") |
| some() | Checks if any element matches | true/false | arr.some(x => x > 10) |
| every() | Checks if all elements match | true/false | arr.every(x => x > 0) |