🧠 JavaScript Functions Deep Dive #6: Functional Patterns — First-Class & Higher-Order Functions

JavaScript treats functions as first-class citizens, meaning you can use functions like any other value. This behavior unlocks one of the most powerful programming paradigms: functional programming.

In this article, you’ll learn:

• ✅ What first-class functions are

• ✅ What higher-order functions are

• ✅ How they work together in real-world JavaScript

• ✅ How they power array methods, callbacks, closures, and more

---

🥇 First-Class Functions

🔹 Definition

A programming language is said to have first-class functions if functions can be:

• Assigned to variables

• Passed as arguments

• Returned from other functions

• Stored in data structures

In JavaScript, functions are values. This means:

// Assign a function to a variable
const greet = function(name) {
  return `Hello, ${name}`;
};

// Pass a function as argument
function runCallback(callback) {
  return callback("Pushpesh");
}

console.log(runCallback(greet)); // Hello, Pushpesh

---

🧱 First-Class Functions in Action

---

🏗️ Higher-Order Functions (HOF)

🔹 Definition

A higher-order function is a function that:

• Takes one or more functions as arguments, OR

• Returns a function as its result

✅ A higher-order function is powered by first-class functions.

---

🔧 Example 1: Takes a function as argument

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// Output: 0 1 2

---

🔧 Example 2: Returns a function

function multiplier(factor) {
  return function (n) {
    return n * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

🔁 This is function factory behavior — you return new functions based on input.

---

🧪 Higher-Order Functions in the Wild

JavaScript has many built-in higher-order functions:

const nums = [1, 2, 3];
const squared = nums.map(n => n * n);
console.log(squared); // [1, 4, 9]

---

🎯 First-Class vs Higher-Order — What’s the Difference?

Think of it like this:

First-class is a property of the language
Higher-order is a design pattern made possible by that property

---

🔥 Real-World Use Case: Custom Logger

function createLogger(level) {
  return function (message) {
    console.log(`[${level}] ${message}`);
  };
}

const errorLog = createLogger("ERROR");
const infoLog = createLogger("INFO");

errorLog("Something went wrong");
infoLog("App started");

✅ This is a classic HOF — creating new behavior based on configuration.

---

✅ Benefits of Using Functional Patterns

---

🧑‍🏫 Final Thoughts

First-class and higher-order functions are fundamentals of functional JavaScript. They let you:

• Write cleaner, more expressive code

• Abstract logic into reusable pieces

• Embrace callbacks, closures, currying, and more

They’re not just theory — they power almost every array method, every async flow, and every functional utility library you use.