The Iterate-and-Mutate Programming Anti-Pattern

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;
view raw iterate-and-mutate-snippet.js hosted with ❤ by GitHub

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)}
view raw ruby-map-example.rb hosted with ❤ by GitHub

This code is “safer from bugs, easier to understand, and more ready for change” (MIT Course on software construction):

  • 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.

Leave a Comment