Take a look at this small, typical code snippet:
let car_ids = [];
for (let i = 1; i <= 5; i++) {
const car_id = `car-${i}`;
if (car_is_empty(car_id)) {
car_ids.push(car_id);
}
}
return car_ids;
I call this the iterate-and-mutate pattern. It comes up all the time in code. But every time we see it, we should think about replacing it with a mapping operation, like this: (Ruby syntax)
return (1..5)
.map{|n| "car-#{n}"}
.select{|m| car_is_empty(m)}
This is better for lots of reasons:
- Code that mutates (changes) a variable is harder to reason about, and so easier to get wrong.
- An explicit for loop is another common source of bugs.
- The original snippet is longer because it’s doing boring, low-level work. More, boring, code is another source of bugs.
- Long code with low-level operations like for loops and pushing values onto arrays is not expressive.
- The shorter, functional version has no variables, no mutation, and no explicit looping. It’s much shorter and easy to understand, once you’ve seen this style.
Here’s a great intro to functional programming in Javascript.