JavaScript Functions: Scope and Closures

A function gives a task a name and stores the instructions for doing it. Defining it does not run those instructions. A call runs them, and another call runs them again with new inputs.

Write the definition

A declaration has the keyword function, a name, parentheses for parameters, and curly braces for the body:

function greet(name) {
  console.log("Hello, " + name + "!");
}

Here name is a parameter: a local name for the input each call supplies. The body joins that input to the surrounding text and prints the result. The closing brace marks the end of the definition; execution continues with the next statement outside it.

A function with no inputs still needs parentheses. For example, function sayHi() { console.log("Hi"); } defines a task with an empty parameter list. The braces belong to the definition; the parentheses after a name belong in both definitions and calls, with different jobs.

Run the task

greet("Amira");
greet("Li");

The first call gives name the value "Amira" and prints "Hello, Amira!". The second starts a new call with name equal to "Li" and prints "Hello, Li!". The definition is shared; the input belongs to the individual call.

greet by itself refers to the function value. It does not run the body. This distinction matters when a line seems to do nothing: sayHi; reads a function value and discards it, while sayHi(); prints "Hi".

Replace copied instructions

Suppose several reports need a heading surrounded by lines:

function printHeading(title) {
  console.log("-----");
  console.log(title);
  console.log("-----");
}

printHeading("Report");
printHeading("Totals");

The first call prints a line, "Report", and another line. The second prints the same frame around "Totals". To change the line style, edit the two line-printing statements in this one definition. Without the function, every copied heading would need its own repair.

Choose a name that says what one call does. printHeading describes an action; isValidEmail names a yes-or-no check. Use camelCase, with a lowercase first word and uppercase starts for later words. If a proposed name joins two separate jobs with "and", consider giving each job its own function.

Read code that calls a declaration early

Declarations are set up before the surrounding code runs. This behavior is called hoisting:

sayHi();
function sayHi() {
  console.log("Hi");
}

The call works within the declaration's scope even though the written definition comes later. Hoisting does not make the body run early; it makes the function available for a call.

Check spelling and capitalization when a call fails. Greet() and greet() are different names. Calling an undeclared greeet() raises a ReferenceError; omitting the call parentheses can fail silently because merely reading an existing function is valid code.

Functions are values. You can keep one in a variable, copy its reference, pass it to another function, or return it. A function expression creates that value where an expression is expected.

Store a function

const square = function (n) {
  return n * n;
};

const answer = square(4);

The expression after = creates a function. The assignment stores it in square; the later call returns 16. This statement ends with a semicolon, following the formatting convention used here.

The position of function distinguishes the forms. A definition written as a standalone function square(n) { ... } is a declaration. A function written after = or directly as a call argument is an expression. Both ordinary function forms can accept parameters and return values.

Use const for a function variable when its value should stay the same. Calling square(5) is allowed; assigning square = 5; raises a TypeError. The constant protects the variable from replacement. It does not prevent repeated calls.

Keep a function or keep its result

const sq = square;
const result = square(3);

sq refers to the same function as square. Calling sq(3) returns 9. result holds the number 9 that one call returned. It cannot be called as a function. typeof square and typeof sq are "function"; typeof result is "number".

Reading an assignment from right to left helps: first decide whether its right side creates a function, refers to an existing function, or calls one. The variable on the left receives that value. Copying the reference does not create a second independent implementation.

Wait for the assignment to run

A declaration and a stored expression become callable at different times:

With const or let, the name cannot be used before initialization. With var, the name exists early, but the function value is not assigned until execution reaches the expression. Hoisting the variable does not hoist the assignment.

Give an expression an internal name

const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

The outside name is factorial. The name fact belongs inside the function and lets it call itself; outside code cannot use that internal name directly. The expression's name can also make stack traces easier to read. For example, factorial(3) computes 3 times 2 times 1 and returns 6.

Declarations work well for the main named tasks in a script. Expressions fit places where code needs a function value, such as a variable assignment or an argument. Choosing an expression changes how the value is created and stored, not how parentheses call it.

Arrow functions are function expressions with a shorter spelling. Their return behavior depends on what follows the arrow, so inspect the body before deciding what a call produces.

Choose the parameter form

const sayHi = () => "hi";
const double = n => n * 2;
const add = (a, b) => a + b;

No parameters require empty parentheses. One simple parameter may omit parentheses. Two or more require them. A default or rest parameter also needs parentheses: (n = 1) => n * 2 and (...nums) => nums.length are valid.

The arrow separates inputs from the body. const double = n => n * 2; creates the function and stores it; double(6) later calls it and returns 12. Like a const holding any function expression, double cannot be read before its initialization line runs.

Return an expression or write a block

A concise body returns its expression automatically. Curly braces begin a block of statements. In a block, evaluating an expression does not send it back to the caller; write return explicitly.

Use a block when the task needs intermediate work:

const describe = (n) => {
  const kind = n % 2 === 0 ? "even" : "odd";
  return n + " is " + kind;
};

For describe(7), the condition is false, so kind becomes "odd". The return then joins the number and words into "7 is odd". Removing that return would leave the local calculation in place but give the caller undefined.

Return an object literal

An object literal also uses curly braces. Wrap it in parentheses so the parser treats it as an expression:

const makePoint = (x, y) => ({ x: x, y: y });

makePoint(2, 5) returns an object with x equal to 2 and y equal to 5. Without the parentheses, the first brace begins a block. The single-property form () => { value: 1 } returns undefined; the similar two-property form with a comma is a syntax error. The parentheses change how the body is read.

Know the limits of the shorter form

Arrow functions do not have their own this or arguments, and they cannot be called with new to construct objects. For a simple calculation that uses neither this nor arguments, an arrow and an ordinary function expression behave the same. Replacing every ordinary function with an arrow can change code that depends on those features.

Short arrows are especially readable as callbacks. [1, 2, 3].map(n => n * 10) passes a function that returns a transformed element, producing [10, 20, 30]. Changing it to n => { n * 10; } silently loses each returned value.

A function's parameters give names to the values supplied by a call. To trace a call, match inputs by position first, then follow the operations in the body.

Match positions and types

function area(width, height) {
  return width * height;
}

area(4, 2.5);

width and height are parameters; 4 and 2.5 are arguments. During this call, width holds 4 and height holds 2.5, so the result is 10. Parameter names do not match caller variable names. With divide(a, b), swapping divide(10, 2) to divide(2, 10) changes the result from 5 to 0.2.

JavaScript does not enforce the number of arguments. area(4) leaves height as undefined; multiplying by it produces NaN. area(4, 2, 99) returns 8 because this body has no use for the third argument. A function can choose to collect extra arguments, but unused extras do not cause an automatic error.

Types also matter even when the call is accepted. area("4", 2) returns 8 because multiplication converts the text. An addition function behaves differently: add("4", 2) returns "42" when its body is return a + b;. If text represents a number, add(Number("4"), 2) returns 6.

Reassign a local parameter

Each parameter is local to its call. Assigning a new number to it does not reassign the caller's variable:

let score = 5;
function reset(s) {
  s = 0;
}
reset(score);

The call copies the value 5 into s. The assignment changes s to 0, and score remains 5. Numbers, strings, and booleans follow this value-copy rule. Code outside cannot read s directly; a nested function can retain access to it through a closure.

Change an array through a copied reference

An array value is a reference to an array. Passing that value copies the reference, so the caller and parameter can reach the same array:

const list = [1, 2];
function addItem(arr) {
  arr.push(3);
}
addItem(list);

list is now [1, 2, 3]. The function did not reassign list; it changed the array that both names reach. A const declaration prevents replacing its stored reference, not changing the array's contents.

Compare a local reassignment:

function clearLocal(arr) {
  arr = [];
}
clearLocal(list);

This points only arr at a new empty array. list still reaches [1, 2, 3]. Ask whether an operation changes an existing array, as push does, or gives a name a different value, as = does.

Return a new array when the input should stay intact

function withItem(arr, item) {
  return arr.concat(item);
}

withItem([1, 2], 3) produces [1, 2, 3] as a new array. The input array remains [1, 2]. This makes the function useful when the caller needs both the old list and the extended list. Document a function's intended input changes through its name and behavior so callers can use it predictably.

Defaults make an input optional; rest parameters let a call supply many inputs. Spread syntax connects an existing array to a function that expects separate arguments.

Apply a default only for undefined

function greet(name = "friend") {
  return "Hello, " + name;
}

greet() and greet(undefined) both return "Hello, friend". greet(null) returns "Hello, null", and greet("") returns "Hello, ". A default tests for undefined, not for every value that looks empty.

Defaults are evaluated when a call needs them. They may use earlier parameters: function makeBox(width, height = width) { return width * height; } returns 9 for makeBox(3) and 12 for makeBox(3, 4). The explicit second argument replaces the default for that call.

Put required inputs first. With function total(amount, rate = 0.25) { return amount + amount * rate; }, total(80) returns 100 and total(80, 0.5) returns 120. Reversing the parameters would make the common default-rate call require total(undefined, 80).

Older code may use level = level || 50;. This also replaces 0, false, and an empty string because they are falsy. A default parameter preserves those values: function setVolume(level = 50) { return level; } returns 0 for setVolume(0) and 50 for setVolume(undefined).

Gather arguments with rest

function sum(...numbers) {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
}

sum(1, 2, 3) puts [1, 2, 3] into numbers and returns 6. sum() gives it an empty array, so the loop adds nothing and returns 0. A rest parameter is a real array, ready for array methods or iteration.

A fixed input can come before rest: in function log(label, ...values) { console.log(label, values); }, log("scores", 7, 9) gives label the string "scores" and values the array [7, 9]. Only one rest parameter is allowed, and it must be last; otherwise JavaScript cannot assign the remaining arguments unambiguously using this syntax.

Expand arguments with spread

Math.max(...[3, 7, 2]) receives three numbers and returns 7. Math.max([3, 7, 2]) receives one array and returns NaN. The three dots are identical on the page, but the surrounding syntax tells you which job they perform.

Ordinary functions also have an arguments object containing the arguments passed to them. It is array-like, with indexed entries and a length, but it is not a real array and has no own map or filter methods. Arrows have no arguments of their own. Prefer a rest parameter for new code that needs a flexible list of inputs.

A returned value is the output other code receives from a call. Printing can show the same value on screen, but it gives the caller a different result unless the function also returns it.

Use the call as a value

function double(n) {
  return n * 2;
}
const x = double(5) + 1;

double(5) returns 10, so the assignment evaluates as 10 plus 1 and stores 11. A call can appear anywhere an appropriate value is needed. double(double(3)) first gets 6 from the inner call, then returns 12 from the outer one. Math.round(double(2.3)) doubles to 4.6 and rounds to 5.

return also ends the current call immediately. A guard clause handles a special case before the main work:

function safeDivide(a, b) {
  if (b === 0) {
    return null;
  }
  return a / b;
}

safeDivide(6, 0) returns null and never reaches the division. safeDivide(6, 2) skips the guard and returns 3. Put the condition before the operation it protects.

Separate output from display

function addLog(a, b) {
  console.log(a + b);
}

addLog(2, 3) prints 5, but its return value is undefined. Consequently, addLog(2, 3) * 2 prints 5 and evaluates to NaN. A function that reaches its end without a return, or executes a bare return;, returns undefined. The console display is a side effect, not the call's usable numeric output.

If a caller needs a sum, write return a + b;. The caller can then choose to print it, store it, or use it in another calculation. That keeps display decisions out of a reusable calculation.

Keep the returned expression on the same line

function brokenAdd(a, b) {
  return
  a + b;
}

JavaScript ends the return statement at the line break. The function returns undefined; the later expression is never reached. For a long expression, start it or open a parenthesis on the return line, then continue below.

Package several results into one value

A call returns one value, but that value can be an array:

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [low, high] = minMax([4, 9, 1]);

The returned array is [1, 9]. Destructuring assigns its first entry to low and its second to high. There is still one returned value, containing two useful results.

A pure function computes its output from its arguments and changes nothing outside itself. double is pure. Printing, updating an outer variable, and mutating an input array are side effects. Pure calculations are easy to check with input-output examples; side effects belong in clearly named functions where the program needs visible changes.

When one function calls another, the caller pauses until that call returns. The call stack records the unfinished work so execution can resume in the right place.

Add and remove call frames

Each active call has a frame holding its parameters, local variables, and return location. A new call goes on top of the stack; a return removes that top frame.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}
sumOfSquares(3, 4);

First, sumOfSquares begins with a equal to 3 and b equal to 4. It calls square(3), which returns 9 and finishes. Then square(4) runs and returns 16. The paused addition can now finish as 9 plus 16, and sumOfSquares returns 25. The two square calls do not overlap in this trace.

Each call gets fresh parameters and local variables. Calling the same function twice does not reuse a previous call's local numeric state. Even when a function calls itself, the new call has its own frame.

Reduce a problem with recursion

A recursive function calls itself. A base case finishes without another self-call; a recursive case takes a step toward that base case.

function factorial(n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

For nonnegative integer inputs, this multiplies the integers down to 1. Trace factorial(4) in two directions:

1. factorial(4) waits for factorial(3).
2. That call waits for factorial(2).
3. That call waits for factorial(1).
4. The base case returns 1.
5. The waiting calls return 2, then 6, then 24.

The multiplication in the call with n equal to 4 happens after the smaller call returns. Its own n has stayed 4 while it waited.

A base case must be reachable. Using only n === 1 fails for a starting input of 0 if every recursive call subtracts 1: the values become negative and never reach 1. n <= 1 catches both 0 and 1. Without a stopping path, repeated calls exhaust the stack. Chrome and Node.js report "RangeError: Maximum call stack size exceeded"; Firefox uses "InternalError: too much recursion".

Recognize a smaller copy of the same task

function countItems(list) {
  let count = 0;
  for (const item of list) {
    if (Array.isArray(item)) {
      count += countItems(item);
    } else {
      count += 1;
    }
  }
  return count;
}

countItems([1, [2, 3], [4, [5]]]) returns 5. Each nested array asks the same counting question of a smaller list. A loop is also suitable for a simple factorial; recursion is especially useful when the data itself is nested.

If a call fails, read the stack trace from the most recent call at the top. The following entries show which unfinished callers led there. Repeated entries for one function can reveal recursion that failed to stop.

A variable's scope is the region where its name can be used. Scope lets functions keep their working data separate while still using inputs and values from surrounding code.

Draw boundaries around declarations

let and const are block-scoped. A block is a region inside curly braces, such as an if body, a loop body, or a function body:

if (true) {
  const msg = "hi";
  console.log(msg);
}

The print works inside the block. Adding console.log(msg); after it raises a ReferenceError because that outer code cannot reach this declaration. A different outer declaration with the same name would be a different variable.

Parameters and variables inside a function are local to that function. In function f() { let temp = 1; }, outside code cannot read temp. Two functions can each have a local total without sharing it. Each call starts with fresh local variables; a returned nested function can later preserve access through a closure.

Read older var declarations

function test() {
  if (true) {
    var x = 1;
  }
  return x;
}

test() returns 1 because var ignores the if boundary. Replacing it with let x = 1; makes the return fail: the block's x is unavailable there. Similarly, for (let i = 0; i < 3; i++) {} keeps i within the loop, while a var i remains available in its enclosing function or script after the loop and holds 3.

Look outward from the function's written position

Scopes nest. An inner function can use names in its enclosing scopes, but outer code cannot search inward into an inner function's locals. This is lexical scope: where the code is written determines the available names.

const level = "global";
function show() {
  return level;
}
function run() {
  const level = "local";
  return show();
}

run() returns "global". show was defined outside run, so its enclosing scope contains the outer level. Calling it from inside run does not give it access to that caller's local level.

Keep shared state deliberate

A top-level variable in a regular script is global and can be reached by functions within that script. Shared globals can make independent tasks affect one another; scripts on the same page can also clash over names. Passing inputs and returning outputs keeps dependencies visible.

Declare every variable. In strict mode, count = 5; throws a ReferenceError if no accessible declaration exists. Without strict mode, such an assignment can create an accidental global. A script can enable strict mode with "use strict"; at its start; modules enable it automatically. Prefer const for values that are not reassigned and let when reassignment is needed.

The same name can occur in several scopes. JavaScript finds the relevant declaration by looking outward from the current code, stopping at the first match.

Follow the scope chain

let x = 1;
function f() {
  let x = 2;
  return x;
}

f() returns 2. The local declaration shadows the outer x, so the search stops inside f. The outer value stays 1. A parameter can shadow a name in the same way. If no scope on the chain declares a name, reading it raises a ReferenceError.

An assignment does not declare a new variable. With let count = 0; function add() { count = count + 1; }, add finds the outer declaration and changes it. Inserting let changes the meaning: it creates a new local name, which may hide the very value you meant to read.

Separate registration from initialization

Hoisting describes how declarations are registered before their scope runs. Their early behavior differs:

For example, console.log(a); var a = 5; prints undefined. The assignment to 5 has not happened yet. console.log(b); let b = 5; fails instead. The interval when the lexical name exists but cannot be accessed is its temporal dead zone, often shortened to TDZ.

Trace shadowing before a declaration line

let n = 10;
function f() {
  console.log(n);
  let n = 20;
}
f();

The inner n shadows the outer one throughout the function body, including before the declaration's written line. At console.log(n), that inner name is still in its TDZ, so the call throws a ReferenceError. JavaScript does not skip an uninitialized local declaration and fall back to the outer value 10.

The same problem appears in let count = count + 1; inside add. The right side reads the new local count before it has been initialized. If the intention is to update an outer count, use an assignment without a new declaration. If the intention is to calculate a separate value, give it a different name and read the outer count explicitly.

Distinguish reassignment from mutation

let and const cannot redeclare the same name in one scope; doing so is a SyntaxError. An inner scope may declare its own name, which is shadowing. var allows repeated declarations in its scope, making accidental name reuse harder to notice.

const blocks reassignment of its variable. It does not freeze an array:

const list = [];
list.push(1);

The reference stored in list stays the same while the array changes to [1]. list = []; would try to replace the stored reference and would fail.

Keep a declaration in the smallest scope that needs it. Distinct names for distinct jobs reduce the need to mentally track shadowing, and initializing before use avoids TDZ failures.

A function keeps a link to the scope where it was created. The function and that retained access form a closure. The link becomes especially useful when a nested function is returned and called after its outer call has finished.

Give a returned function memory

function makeCounter() {
  let count = 0;
  return function () {
    count = count + 1;
    return count;
  };
}
const counter = makeCounter();

The call to makeCounter creates count, creates an inner function, and returns that function. It does not run the inner body yet. counter now holds the function value. Its first call changes the retained count from 0 to 1 and returns 1. Its next call changes the same variable to 2 and returns 2.

The outer call's stack frame has finished, but the captured variable remains accessible. A local variable that no longer has any reachable use can be released; here the callable inner function still needs it. Closure access survives a return without making the variable global.

Create independent memory with separate calls

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

The results are 1, 2, and 1. Each factory call created a different count. The two functions returned from separate calls have the same code but different retained environments.

Copying a returned function reference works differently. If const alias = a;, then alias() uses a's existing count; it does not call makeCounter and create another environment.

Keep variables, not snapshots

let greeting = "Hi";
const say = () => greeting;
greeting = "Hello";

say() returns "Hello". The closure reads the variable when it runs, so a later update is visible. It does not store a frozen copy of "Hi" at creation time.

Outside code cannot access the local count directly, and counter.count is undefined. Only code with access to that lexical environment can read or update it. Calling the counter from a different function does not change which count it uses.

Share state within one outer call

function makeWallet() {
  let balance = 0;
  return [
    function deposit(n) { balance += n; return balance; },
    function getBalance() { return balance; }
  ];
}
const [deposit, getBalance] = makeWallet();
deposit(50);
deposit(20);

getBalance() returns 70 because both returned functions were created in the same call and refer to the same balance. Another call to makeWallet() creates a separate balance.

A function factory uses closure access to create functions with settings or state of their own. The caller supplies the configuration once, then uses the returned function many times.

Configure a function with a parameter

function makeMultiplier(factor) {
  return (n) => n * factor;
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);

double(5) returns 10 and triple(5) returns 15. Each returned arrow retains the factor from its own factory call. The outer function configures the behavior; the inner one performs the repeated work.

The compact form is const makeMultiplier = (factor) => (n) => n * factor;. Two arrows mean two function creations, not two consecutive calculations on one number. makeMultiplier(4)(5) first returns a function configured with 4, then calls it with 5 to get 20.

Enforce a rule around private state

function makeLimiter(max) {
  let used = 0;
  return function () {
    if (used >= max) {
      return false;
    }
    used = used + 1;
    return true;
  };
}
const tryLogin = makeLimiter(3);

The first three calls return true and increment used. The fourth returns false before incrementing. used is local to the factory call, so outside code cannot reset it through that name. The returned function controls which changes are available. Another limiter would have its own used variable and its own maximum.

Diagnose functions created in loops

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}

The loop creates three functions but only one var i. After the loop, that variable holds 3. Calling any stored function now returns 3 because every closure reads the same current binding. Creating a function does not evaluate its body or snapshot the current i.

Changing the header to let i = 0 gives the loop a separate binding for each iteration. The stored functions then return 0, 1, and 2. The same distinction explains delayed printing: a setTimeout callback that reads var i after the loop sees the final value, while the let version retains each iteration's value.

Recognize an immediately invoked expression

Older code often creates a private function scope and runs it immediately:

(function () {
  var hidden = 1;
  console.log(hidden);
})();

This is an immediately invoked function expression, or IIFE. The outer parentheses make a function expression; the final parentheses call it. hidden belongs to that function, keeping it out of the surrounding global scope. It is a common pattern in code written before block-scoped declarations and modules.

Retained access also affects memory. A callable closure that needs a large array keeps that data reachable. When the function and its captured data are no longer reachable, they can be released. Store long-lived closures deliberately when their memory is part of the task.

A callback is a function supplied as an argument for another function to call. It lets the receiving function handle the overall task while the caller supplies a particular action or test.

Pass an action to a loop

function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i);
  }
}
repeat(3, (i) => console.log(i));

repeat owns the loop and chooses the values 0, 1, and 2. The arrow owns what to do with each value: print it. Each action(i) calls the supplied function with that iteration's number.

You can pass an existing function or write one inline. repeat(2, sayHi) passes the named function. repeat(2, (i) => console.log("Round " + (i + 1))) prints "Round 1" and "Round 2". A callback may ignore arguments it does not need.

Pass the value, not an early call

repeat(3, sayHi()) evaluates sayHi() while preparing the arguments. If sayHi only prints, its return value is undefined, so repeat receives that value as action. The later action(i) fails with a TypeError because undefined is not callable.

Use repeat(3, sayHi) to hand over the function. If the eventual call needs chosen arguments, pass a wrapper such as () => sayHi() so the call happens inside the callback body. Function creation and function invocation are separate steps.

Check what arguments the receiver supplies

Array callbacks often receive more than one argument: element, index, and the whole array. Passing an existing function is safe only when those inputs fit its parameter meanings.

["1", "2", "3"].map(parseInt);

This returns [1, NaN, NaN]. parseInt accepts a second argument for the number base, so the array index changes its behavior. Use ["1", "2", "3"].map((s) => parseInt(s, 10)) to choose base 10 explicitly, or .map(Number) to convert these strings.

Return an answer to the receiver

function countIf(arr, test) {
  let n = 0;
  for (const x of arr) {
    if (test(x)) {
      n++;
    }
  }
  return n;
}

countIf([3, 8, 12, 5], (x) => x > 4) returns 3. The callback answers a question for each item; countIf uses each answer to decide whether to increment. Compare repeat, whose loop ignores the callback's return value. The receiving function's code or documentation tells you both the arguments and the role of the result.

Callbacks can run immediately or later. repeat and array methods call them synchronously before returning. setTimeout(sayHi, 2000) schedules one for later while following code continues immediately. Being a callback describes how a function is supplied, not when it must run.

A higher-order function accepts a function, returns a function, or does both. The function value supplies behavior, while the higher-order function manages a reusable pattern.

Write the pattern once

function myMap(arr, transform) {
  const result = [];
  for (const item of arr) {
    result.push(transform(item));
  }
  return result;
}

myMap([1, 2, 3], (n) => n * n) returns [1, 4, 9]. The loop and output-array construction stay the same; the callback decides how each entry changes. A matching filter pushes an item only when test(item) is truthy. With [4, 7, 10, 3] and (n) => n % 2 === 0, that pattern keeps [4, 10].

Choose the callback contract you need

map, filter, and find do not themselves modify the input array, but callbacks can still mutate it. Returning a new array from a method does not make every supplied callback pure.

Carry a result through a reduction

[5, 10, 15].reduce((total, n) => total + n, 0);

The starting accumulator is 0. The callback returns 5 for the first item, 15 for the second, and 30 for the third. Each return becomes the next call's total. The method returns 30 after the last item. An empty array without a starting accumulator makes reduce throw a TypeError; an explicit starting value also defines the useful empty-input result.

Returning arrays makes chaining possible. [3, 8, 12, 5].filter((n) => n > 4).map((n) => n * 2) first keeps [8, 12, 5], then transforms it into [16, 24, 10]. Read the chain in execution order from left to right.

Supply a numeric sort rule

Without a comparator, sort compares entries as strings. [10, 9, 1].sort() therefore produces [1, 10, 9]. For ascending numeric order, use .sort((a, b) => a - b). A negative return puts a first, a positive return puts b first, and zero leaves the pair equivalent for ordering. Unlike map and filter, sort rearranges its input array.

Check the returned values

[1, 2, 3].map((n) => { n * 2; }) yields [undefined, undefined, undefined] because the block has no return. Using forEach to build a new result by assignment also fails if you expect the method itself to return an array. Choose map for transformation and forEach for actions whose collected outputs are not needed.

A higher-order method states a familiar pattern clearly. A plain loop remains useful when work needs break or does not fit the method's contract.

A function can return a new function that remembers an existing one. Wrappers, composition, and partial application use this pattern to adapt behavior without copying the original function's body.

Wrap a call and preserve its result

function logged(fn) {
  return (...args) => {
    console.log("Calling with", args);
    const result = fn(...args);
    console.log("Result", result);
    return result;
  };
}
const add = (a, b) => a + b;

logged(add) creates a function that retains add as fn. Calling logged(add)(2, 3) gathers the arguments, forwards them to add, prints the returned value, and returns 5. Rest gathers the wrapper's inputs; spread forwards them. The final return keeps the output available to later calculations.

logged(add(2, 3)) passes the number 5 instead. Calling that wrapper later tries to call 5 and throws a TypeError. There are two stages: configure the wrapper with a function, then call the returned function with inputs.

Retain state around an operation

function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (!done) {
      done = true;
      result = fn(...args);
    }
    return result;
  };
}

For an operation that returns normally, the first call runs fn and stores its result. Later calls return that stored value without rerunning fn, even if their arguments differ. The boolean tracks whether the operation ran; checking the result's truthiness would be wrong when a valid result is 0 or false. Each call of once creates its own flag and stored result.

Feed one result into another function

const compose = (f, g) => (x) => f(g(x));
const addOne = (n) => n + 1;
const square = (n) => n * n;

compose(square, addOne)(3) runs addOne(3) first, then squares 4 to return 16. compose(addOne, square)(3) squares 3 first and then adds 1, returning 10. The function nearest the input runs first, so the order of the arguments to compose matters.

Fix some arguments in advance

function partial(fn, ...fixed) {
  return (...rest) => fn(...fixed, ...rest);
}
const greetWith = (greeting, name) => greeting + ", " + name;
const hello = partial(greetWith, "Hello");

hello("Ana") calls greetWith("Hello", "Ana") and returns "Hello, Ana". This partial helper puts fixed arguments first and later arguments afterward; changing that order changes the underlying call.