title: JavaScript `reduce` performance
body: <p>I've spent some time recently plying around with transducers (tool in functional programming meant to improve performance without losing readability/flexibility of code) and when I came to testing their actual speed, I got some quite disappointing results. Consider:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const inc = x =&gt; x + 1;
  
  const isEven = x =&gt; x % 2 === 0;
  
  // simplest, shortest way I would be comfortable with if performance wasn't an issue
  
  const mapFilter = xs =&gt; xs.filter(isEven).map(inc);
  
  // transducers way
  
  // function composition
  const compose = (...fns) =&gt; x =&gt; fns.reduceRight((y, f) =&gt; f(y), x);
  
  const map = f =&gt; step =&gt; (a, c) =&gt; step(a, f(c));
  const filter = p =&gt; step =&gt; (a, c) =&gt; (p(c) ? step(a, c) : a);
  
  // basic reducer for building array
  const build = (acc, x) =&gt; {
    acc.push(x);
    return acc;
  };
  
  // transducer, it doesn't create intermediate arrays hence should theoretically be faster 
  const transducers = xs =&gt;
    xs.reduce(compose(filter(isEven), map(inc))(build), []);
  
  // native loop for comparison
  const nativeLoop = data =&gt; {
    const result = [];
    const l = data.length;
    for (let i = 0; i &lt; l; i++) {
      const x = data[i];
      if (isEven(x)) result.push(inc(x));
    }
    return result;
  };
  
  const data = Array(1000).fill(1);
  
  const base = ["simplest, chained map and filter", () =&gt; mapFilter(data)];
  const alternative = ["composed transducers", () =&gt; transducers(data)];
  const alternative2 = ["native loop", () =&gt; nativeLoop(data)];
  
  /* console.log(Benchmark) */
  console.log("Running benchmarks....");
  
  const suite = new Benchmark.Suite();
  suite
    .add(...base)
    .add(...alternative)
    .add(...alternative2)
    .on("cycle", function(event) {
    console.log(String(event.target));
  })
    .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name").join(", "));
  })
  // run async
    .run({ async: true });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I would expect that the order of performance will be</p>
  <p><strong>native loop &gt; transducers &gt; chained map/filter</strong></p>
  <p>Meanwhile, besides native approach which is way faster than any other, it turned out, to my great astonishment, that <em>reduce/transduce way is much slower than using map/filter and creating intermediate arrays</em> (slower, like an order of magnitude in Chrome). Could someone explain to me the origin of this result?</p>