Replace Nested Loops with Elegant JavaScript Array Methods

Traditional for loops become verbose when handling multi‑dimensional arrays. With functional programming, JavaScript offers powerful array methods that eliminate nested loops, making code shorter, more readable, and easier to maintain.

Problems of Nested Loops

Example of a typical nested for loop that selects even numbers from a two‑dimensional array and doubles them:

const matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const result = [];

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    if (matrix[i][j] % 2 === 0) {
      result.push(matrix[i][j] * 2);
    }
  }
}
console.log(result); // [4, 8, 12, 16]

The code suffers from several issues:

Lengthy and hard to read.

Uses intermediate variables to store state.

Complexity grows exponentially with deeper nesting.

Debugging is difficult and error‑prone.

Elegant Functional Alternatives

1. Flatten nested arrays

The flat() method flattens nested arrays, allowing subsequent operations on a single‑level array.

2. Map and filter

Combining map() and filter() makes selection and transformation straightforward.

3. One‑step solution with flatMap()

For the common pattern of flatten‑then‑map, flatMap() provides a more efficient approach.

4. Deeply nested arrays

For deeper nesting, specify the depth argument of flat() or use Infinity to fully flatten.

5. Powerful combination of reduce() and recursion

For complex nested structures, combine reduce() with recursion to create flexible solutions.

function processNestedArrays(arr, processFn) {
  return arr.reduce((result, item) => {
    if (Array.isArray(item)) {
      return [...result, ...processNestedArrays(item, processFn)];
    }
    const processed = processFn(item);
    return processed ? [...result, processed] : result;
  }, []);
}

const nestedNumbers = [1, [2, 3], [4, [5, 6, [7, 8]]]];
const doubledEvens = processNestedArrays(
  nestedNumbers,
  num => num % 2 === 0 ? num * 2 : null
);
console.log(doubledEvens); // [4, 8, 12, 16]

While functional methods improve readability and maintainability, traditional loops may be marginally faster in extreme performance scenarios. Modern JavaScript engines, however, optimize higher‑order functions well, making performance differences negligible for most applications, with code quality gains being significant.