You might not need for

Declarative looping in JavaScript

Ramón Guijarro

Creative web developer with an eye for design and communication. JavaScript and React enthusiast. Proud @h4ckademy alumni.

Reasons to care

An awful lot of what we do is manipulating data

Data means collections of items, so mostly arrays

Also objects, but they can be traversed in similar ways, as we'll see

There are better, declarative ways to handle arrays than for

The for statement is very much imperative

These ways produce cleaner, more semantic and terser code

They also make avoiding mutation easier

Why for is no good

const getFruitNames = fruits => {
  const fruitNames = [];
  for (let i=0; i < fruits.length; i++) {
    const fruit = fruits[i];
    fruitNames.push(fruit.name);
  }
  return fruitNames;
};

const getFruitNames = fruits => {
  const fruitNames = [];
  for (let i=0; i < fruits.length; i++) {
    const fruit = fruits[i];
    fruitNames.push(fruit.name);
  }
  return fruitNames;
};

Most of a for loop is actually meaningless boilerplate

We call i auxiliary variable for a reason

There's stuff we have to write, but don't care about

What matters is not the plumbing, but the business logic it enables

We have no immediate understanding and need to run the code in our heads

Computing is for machines, not us

This all gets much worse if we need to do nesting

Not at all uncommon for even basic stuff

The better way

const getFruitNames = fruits => {
  return fruits.map(fruit => fruit.name);
};

const getFruitNames = fruits => {
  return fruits.map(fruit => fruit.name);
};

const getFruitNames = fruits =>
  fruits.map(fruit => fruit.name);

Less boilerplate code to get distracted with

The auxiliary variable i is gone and we also get the fruit element right away

Much easier and quicker to grasp, no need to compute

It almost reads like English

Complex operations can be splitted into simpler chainable expressions

Divide and conquer

Avoids mutation of the original data

This is harder to do with for loops, particularly with nested elements

A world of possibilities

forEach

find

findIndex

map

sort

filter

reduce

includes

some

every

slice

from

fill

of

forEach

find

findIndex

map

sort

filter

reduce

includes

some

every

slice

from

fill

of

forEach

find

findIndex

map

sort

filter

reduce

includes

some

every

slice

from

fill

of

forEach

find

findIndex

map

sort

filter

reduce

includes

some

every

slice

from

fill

of

forEach

find

findIndex

map

sort

filter

reduce

includes

some

every

slice

from

fill

of

forEach

find

findIndex

map

sort

filter

reduce

includes

some

every

slice

from

fill

of

Everything is an array

Array-like objects are easily transformed into actual arrays

Works for iterables, too

Objects can be seen as arrays of properties

Function arguments can be neatly transformed into arrays

Arrays for looping can be generated in a flexible way

In conclusion

Being able to manipulate data efficiently is key for programming

Array methods are the best tools for this; they're clean, semantic and powerful

Modern JavaScript allows us to avoid for loops entirely without any tradeoffs