Advanced JS: Closures & Recursion

Beyond basic `if` statements and `for` loops lies the true power of JavaScript. The concepts of **Higher-Order Functions**, **Closures**, and **Recursion** are not just academic theories; they are the fundamental building blocks used by libraries like React, Vue, and Node.js to create modular, efficient, and elegant applications. Mastering them is the difference between *scripting* and *engineering*.

1. Higher-Order Functions (HOFs)

In JavaScript, functions are **"first-class citizens."** This means they can be treated like any other variable: stored in arrays, passed as arguments, or returned from other functions. A function that does either of the last two is a **Higher-Order Function**.

Pattern 1: Passing Functions as Arguments (Callbacks)

This is the most common pattern. You pass a function (a "callback") to another function, which then decides *when* to execute it. You use this every day:

• Array Methods: .map(), .filter(), and .reduce() are all HOFs. They take a callback function and apply it to each item in the array.
• Event Listeners: element.addEventListener('click', handleClick). The `handleClick` function is a callback.

const numbers = [1, 2, 3];

// .map() is the HOF, the arrow function is the callback
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

Pattern 2: Returning Functions (Function Factories)

This pattern allows you to create specialized functions. A function factory takes some configuration and returns a *new* function that has that configuration "baked in." This is possible because of closures.

function createMultiplier(x) {
  // This inner function is returned
  // It "closes over" the variable 'x'
  return function(y) {
    return x * y;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(10)); // 20
console.log(triple(10)); // 30

2. Closures & Lexical Scope

A **closure** is one of the most powerful and often confusing features of JS. To understand it, you must first understand **Lexical Scope**.

• Lexical Scope: The scope (where variables are available) is defined by *where the function is written* in the code, not by where it is called. An inner function has access to its own variables, its parent function's variables, and the global variables.
• Closure: A closure is the **combination of a function and the lexical environment within which that function was declared.**

In simple terms: a function **remembers the variables from the place it was created**, even if it's executed in a different place. In the `createMultiplier` example above, the inner function "remembers" `x` long after `createMultiplier` has finished running. That "memory" is the closure.

Practical Use: Data Privacy

Closures are the original way to create "private" variables in JavaScript before classes had `#private` fields.

function createCounter() {
  let count = 0; // 'count' is private

  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    }
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
// You CANNOT access 'count' directly!
// console.log(counter.count); // undefined

3. Recursion

**Recursion** is a programming pattern where a function calls itself to solve a problem. It's an alternative to using loops (iteration) and is particularly elegant for problems that can be broken down into smaller, similar sub-problems.

Every recursive function **must** have two parts:

1. A **Base Case:** A simple condition that *stops* the recursion and returns a value. Without this, you get an infinite loop and a "stack overflow" error.
2. A **Recursive Step:** The part of the function that calls itself, but with a *different* input that moves it closer to the base case.

function factorial(n) {
  // Base Case
  if (n === 1) {
    return 1;
  }
  // Recursive Step
  return n * factorial(n - 1);
}

function countdown(n) {
  console.log(n);
  // No base case!
  countdown(n - 1);
}
// DANGER: Stack Overflow!

Recursion is perfect for navigating nested data structures, like a JSON object, a file system, or the HTML DOM.

Key Takeaway: HOFs let you pass logic around. Closures let functions remember their creation environment. Recursion lets you solve complex problems by breaking them into smaller, self-similar pieces.