Understanding Higher-Order Functions and Closures in JavaScript (My Learning Journey)

This content originally appeared on DEV Community and was authored by Ankita Warkhade

—
title: “Understanding Higher-Order Functions and Closures in JavaScript (My Learning Journey)”

tags: javascript, closures, webdev, beginners, functionalprogramming

Aaj maine ek basic JavaScript concept ko deeply samjha — higher-order functions and closures. Pehle laga simple hai, par jab khud likhne baithi, toh kaafi confusion hua. Here’s what I learned:

1. Introduction

Aaj maine seekha ki JavaScript mein apna khud ka higher-order function kaise banate hain, kaise ek function ko dusre function mein pass kar sakte hain, aur kaise ek function ek aur function return bhi kar sakta hai.

Saath hi maine ye bhi samjha ki closure ka use karke hum ek variable ki value ko preserve kar sakte hain — matlab function terminate hone ke baad bhi woh value yaad rahti hai.

2. The Problem I Faced

Is project mein mujhe ek issue ho raha tha:

Maine tempVar = 0 se ek variable initialize kiya tha. But jab bhi function dobara call hota, tempVar phir se 0 ho jaata.

Main chahti thi ki har iteration ke baad tempVar ki value update ho aur next call mein wahi updated value se kaam ho — lekin yeh ho nahi raha tha.

Yeh problem closure ne solve kiya.

Closure ke through, maine ek aisa function banaya jo tempVar ko memory mein store karke rakhta hai. Toh har baar jab function call hota, woh updated value ke saath hi continue karta.

3. My Code

console.log("Let's start the higher-order topic in JavaScript");

const num = [6, 5, 4, 3, 2, 1];

// 🔹 Sum
const calSum = () => {
    let tempVar = 0;
    return (value) => {
        tempVar = tempVar + value;
        return tempVar;
    };
};

// 🔹 Subtraction
const calSub = () => {
    let tempVar = 0;
    return (value) => {
        tempVar -= value;
        return tempVar;
    };
};

// 🔹 Multiplication
const calMul = () => {
    let tempVar = 1;
    return (value) => {
        tempVar *= value;
        return tempVar;
    };
};

// 🔹 Square (No need for tempVar)
const calSq = () => {
    return (value) => {
        return value * value;
    };
};

// 🔹 Main higher-order function
const calculate = (num, logic) => {
    const result = [];
    for (let i = 0; i < num.length; i++) {
        result.push(logic(num[i]));
    }
    return result;
};

// 🔹 Using logic functions
const logicSum = calSum();
const logicSub = calSub();
const logicMul = calMul();
const logicSq = calSq();

console.log("Sum Result:", calculate(num, logicSum));   // [6, 11, 15, 18, 20, 21]
console.log("Sub Result:", calculate(num, logicSub));   // [-6, -11, -15, -18, -20, -21]
console.log("Mul Result:", calculate(num, logicMul));   // [6, 30, 120, 360, 720, 720]
console.log("Square Result:", calculate(num, logicSq)); // [36, 25, 16, 9, 4, 1]

4. Why This Approach is Powerful

Mujhe har logic ke liye alag for loop likhne ki zarurat nahi padti

Sirf ek calculate() function bana ke, different logic functions pass kiye

Har logic (sum, sub, mul, square) closure ya simple function ke form mein likha

Code reusable ho gaya, aur DRY principle follow hua (Don’t Repeat Yourself)

5. What I Learned

• JavaScript mein functions ko argument ke form mein pass kar sakte hain
• Functions dusre functions return bhi kar sakte hain (closures)
• Closure ke through, variable ko memory mein preserve kar sakte hain across calls
• Same logic calculate() ke through baar-baar reuse kar sakti hoon with different behavior

Aapko ye blog kaisa laga? Agar aap beginner ho ya closures se confused rahe ho, toh comment karke zaroor batana!

Thanks for reading!

This content originally appeared on DEV Community and was authored by Ankita Warkhade