Code Anatomy - For loops, array reduce and method chaining

JavaScript, Array, Iterator · Jun 12, 2021

const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
let filePaths = [];

for (let file of files) {
  const fileName = file.trim();
  if(fileName) {
    const filePath = `~/cool_app/${fileName}`;
    filePaths.push(filePath);
  }
}

// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
  • Any for loop can be used - read more about the different JavaScript loops.
  • Less common nowadays, due to functional programming being more popular.
  • Control over the iteration, such as skipping over elements or early returns.
  • Resulting array needs to be declared beforehand, outside the loop.
  • Uses Array.prototype.push() or the spread (...) operator to add elements.
  • O(N) complexity, each element will be iterated over only once.
const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
const filePaths = files.reduce((acc, file) => {
  const fileName = file.trim();
  if(fileName) {
    const filePath = `~/cool_app/${fileName}`;
    acc.push(filePath);
  }
  return acc;
}, []);

// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
  • Uses Array.prototype.reduce() with an empty array as the initial value.
  • More common nowadays, due to functional programming being more popular.
  • Less control over the iteration, cannot skip elements or return early.
  • Can be chained with other methods, if necessary.
  • Uses Array.prototype.push() or the spread (...) operator to add elements.
  • O(N) complexity, each element will be iterated over only once.
const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
const filePaths = files
  .map(file => file.trim())
  .filter(Boolean)
  .map(fileName => `~/cool_app/${fileName}`);

// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
  • Uses Array.prototype.map() and Array.prototype.filter().
  • More common nowadays, due to functional programming being more popular.
  • Less control over the iteration, cannot skip elements or return early.
  • Declarative, easier to read and refactor, chain can grow as necessary.
  • Does not use Array.prototype.push() or the spread (...) operator.
  • O(cN) complexity, c iterations per element, (c: length of the chain).

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this