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