
A closure is a function bundled together with the variables from its surrounding lexical scope. Every function in JavaScript is a closure - the interesting cases are when that function outlives its defining scope.

<ExamplePair>
<ExampleProse>

A counter factory returns a function that captures a private `count` variable. Each call to `makeCounter` creates an independent `count` - callers cannot access or reset it directly.

</ExampleProse>
<ExampleCode>

```js
function makeCounter(start = 0) {
  let count = start;
  return function () {
    count++;
    return count;
  };
}

const a = makeCounter();
const b = makeCounter(10);

console.log(a()); // 1
console.log(a()); // 2
console.log(b()); // 11
console.log(a()); // 3 - independent of b
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

Closures are the natural fit for memoization: a wrapper function closes over a `Map` to cache expensive results without exposing the cache to callers.

</ExampleProse>
<ExampleCode>

```js
function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

function slowSquare(n) {
  // simulate expensive work
  return n * n;
}

const fastSquare = memoize(slowSquare);
console.log(fastSquare(4));  // 16 (computed)
console.log(fastSquare(4));  // 16 (cached)
console.log(fastSquare(5));  // 25 (computed)
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

The module pattern uses an IIFE to create a private scope and return only the public API - a lightweight alternative to ES modules when you need to hide implementation details in a single file.

</ExampleProse>
<ExampleCode>

```js
const cart = (() => {
  const items = [];

  return {
    add(item) {
      items.push(item);
    },
    remove(name) {
      const idx = items.findIndex((i) => i.name === name);
      if (idx !== -1) items.splice(idx, 1);
    },
    total() {
      return items.reduce((sum, i) => sum + i.price, 0);
    },
  };
})();

cart.add({ name: "book", price: 12 });
cart.add({ name: "pen", price: 2 });
console.log(cart.total()); // 14
// `items` is not accessible from outside
```

</ExampleCode>
</ExamplePair>

<InProduction>
Closures that capture large objects keep those objects alive in memory for as long as the closure itself is reachable. In SPAs, this is a common leak source: an event handler attached to a button captures the entire component state or a large API response, and it stays in memory until the handler is explicitly removed. The fix is to copy only the field you need - `const id = user.id` - rather than closing over `user`. The same principle applies to Node.js request handlers that capture `req` inside a callback that persists beyond the request lifecycle.
</InProduction>


Functions that remember the variables from their defining scope - the backbone of private state, memoization, and the module pattern.

Closures


Arrays are ordered, zero-indexed lists. JavaScript's array methods let you transform, filter, and aggregate them without mutation - most of the time.

<ExamplePair>
<ExampleProse>

`map` transforms each element into a new value and returns a new array. `filter` keeps elements that pass a predicate. Neither mutates the original.

</ExampleProse>
<ExampleCode>

```js
const prices = [10, 25, 8, 40, 15];

const doubled = prices.map((p) => p * 2);
console.log(doubled); // [20, 50, 16, 80, 30]

const affordable = prices.filter((p) => p < 20);
console.log(affordable); // [10, 8, 15]

// original is unchanged
console.log(prices); // [10, 25, 8, 40, 15]
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`reduce` accumulates elements into a single value - a sum, an object, another array. Always provide the initial accumulator to avoid surprising behavior on empty arrays.

</ExampleProse>
<ExampleCode>

```js
const orders = [
  { product: "book", qty: 2, price: 12 },
  { product: "pen", qty: 5, price: 1.5 },
  { product: "desk", qty: 1, price: 200 },
];

const total = orders.reduce((sum, o) => sum + o.qty * o.price, 0);
console.log(total); // 231.5

// Group by first letter - reduce into an object
const byLetter = ["apple", "avocado", "banana", "blueberry"].reduce(
  (acc, fruit) => {
    const key = fruit[0];
    acc[key] = acc[key] ?? [];
    acc[key].push(fruit);
    return acc;
  },
  {}
);
console.log(byLetter);
// { a: ['apple', 'avocado'], b: ['banana', 'blueberry'] }
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`find` returns the first matching element (or `undefined`). `some` and `every` return booleans. All three short-circuit on the first result.

</ExampleProse>
<ExampleCode>

```js
const users = [
  { id: 1, name: "Ana", admin: true },
  { id: 2, name: "Bo", admin: false },
  { id: 3, name: "Cal", admin: true },
];

const ana = users.find((u) => u.id === 1);
console.log(ana?.name); // Ana

console.log(users.some((u) => u.admin));  // true
console.log(users.every((u) => u.admin)); // false
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`.sort()` mutates the array in place and defaults to **lexicographic** (string) comparison - even for numbers. Always pass a comparator for numeric sorts.

</ExampleProse>
<ExampleCode>

```js
const nums = [10, 9, 2, 100, 21];

// WRONG - lexicographic sort
console.log([...nums].sort());
// [10, 100, 2, 21, 9]

// CORRECT - numeric comparator
console.log([...nums].sort((a, b) => a - b));
// [2, 9, 10, 21, 100]

// Sort mutates - spread first if you need the original
const sorted = [...nums].sort((a, b) => a - b);
console.log(nums);   // [10, 9, 2, 100, 21] - untouched
console.log(sorted); // [2, 9, 10, 21, 100]
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`flat` and `flatMap` handle nested arrays. `flat(depth)` flattens to the given depth; `flatMap` is equivalent to `map` followed by `flat(1)` and is more efficient.

</ExampleProse>
<ExampleCode>

```js
const matrix = [[1, 2], [3, 4], [5, 6]];
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6]

const sentences = ["hello world", "foo bar"];
const words = sentences.flatMap((s) => s.split(" "));
console.log(words); // ['hello', 'world', 'foo', 'bar']
```

</ExampleCode>
</ExamplePair>

<InProduction>
The default `.sort()` comparator converts elements to strings before comparing, so `[10, 9, 2, 100].sort()` produces `[10, 100, 2, 9]` - a bug that staging almost never catches because test data is usually small and already sorted. Always supply `(a, b) => a - b` for numbers. And because `.sort()` mutates the original array, teams that want the unsorted original must spread first: `[...arr].sort(...)`. Missing that spread is the second most common `.sort` bug, and it shows up in search and pagination code where the display order changes the underlying state.
</InProduction>


map, filter, reduce, and the rest of the essential array API - plus the sort default that bites everyone once.

Arrays


Arrow functions are a compact function syntax that captures `this` from the surrounding scope instead of binding it dynamically.

<ExamplePair>
<ExampleProse>

The basic arrow syntax removes the `function` keyword. Parentheses around a single parameter are optional; a single-expression body can omit braces and `return`.

</ExampleProse>
<ExampleCode>

```js
// Traditional expression
const double = function (n) {
  return n * 2;
};

// Arrow - equivalent
const triple = (n) => n * 3;

// Multi-statement body still needs braces and return
const clamp = (n, min, max) => {
  if (n < min) return min;
  if (n > max) return max;
  return n;
};

console.log(double(5));       // 10
console.log(triple(5));       // 15
console.log(clamp(12, 0, 10)); // 10
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

Arrow functions capture `this` lexically - from the enclosing scope at definition time, not from the caller. This makes them ideal as callbacks inside methods.

</ExampleProse>
<ExampleCode>

```js
class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    // Arrow function: `this` is the Timer instance
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
}

// With a regular function, `this` would be undefined (strict mode)
// or the global object - the classic setTimeout/setInterval trap.
const t = new Timer();
t.start(); // 1, 2, 3 ...
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

Arrow functions cannot be used as constructors, and they have no `arguments` object. They also cannot be generator functions.

</ExampleProse>
<ExampleCode>

```js
const Foo = () => {};
// new Foo(); // TypeError: Foo is not a constructor

// Arrow functions have no `arguments` - use rest params instead
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3)); // 6
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

Object method shorthand (or a regular `function`) is the right choice when the method needs to reference the owning object via `this`. An arrow method silently captures the wrong `this`.

</ExampleProse>
<ExampleCode>

```js
const counter = {
  count: 0,

  // WRONG - arrow captures `this` from module scope, not the object
  badIncrement: () => {
    counter.count++; // forced to reference by name - fragile
  },

  // CORRECT - method shorthand binds `this` to the receiver
  increment() {
    this.count++;
  },
};

counter.increment();
console.log(counter.count); // 1
```

</ExampleCode>
</ExamplePair>

<InProduction>
Arrow functions cannot be used as object methods when the method needs dynamic `this` (the owning object), cannot be constructors, and cannot be generators. Use arrow functions for callbacks, array method predicates, and any inner function that should inherit `this` from the surrounding method. Use the `function` keyword (or method shorthand) for anything that defines its own `this` - class methods, Express route handlers that rely on `this`, and generator functions. Mixing the two up is one of the quietest sources of `undefined is not an object` errors in production.
</InProduction>


Shorter syntax and lexical `this` - plus when arrow functions are the wrong choice.