Code Anatomy - For loops, array reduce and method chaining

Angelos Chalaris · May 19, 2020 ·

JavaScript, Array, Object, Iterator

For loops

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.

Array reduce

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.

Method chaining

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

Image credit: Windows on Unsplash

Recommended snippets