title: Javascript performance of Array.map
body: <p>Just wrote up some test cases in jsperf to test the difference between named and anonymous functions while using <code>Array.map</code> and other alternatives.</p>
  
  <p><a href="http://jsperf.com/map-reduce-named-functions">http://jsperf.com/map-reduce-named-functions</a></p>
  
  <p>(excuse the url name, there is no testing of <code>Array.reduce</code> in here, I named the test before fully deciding on what I wanted to test)</p>
  
  <p>A simple for/while loop is obviously the fastest, I'm still surprised by the more than 10x slower <code>Array.map</code> though...</p>
  
  <p>Then I tried the polyfill by mozilla <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill</a></p>
  
  <pre><code>Array.prototype.map = function(fun /*, thisArg */)
  {
      "use strict";
  
      if (this === void 0 || this === null)
          throw new TypeError();
  
      var t = Object(this);
      var len = t.length &gt;&gt;&gt; 0;
      if (typeof fun !== "function")
          throw new TypeError();
  
      var res = new Array(len);
      var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
      for (var i = 0; i &lt; len; i++)
      {
          // NOTE: Absolute correctness would demand Object.defineProperty
          //       be used.  But this method is fairly new, and failure is
          //       possible only if Object.prototype or Array.prototype
          //       has a property |i| (very unlikely), so use a less-correct
          //       but more portable alternative.
          if (i in t)
              res[i] = fun.call(thisArg, t[i], i, t);
      }
  
      return res;
  };
  </code></pre>
  
  <p>Then I tried a simple implementation that I wrote myself...</p>
  
  <pre><code>Array.prototype.map3 = function(callback /*, thisArg */) {
      'use strict';
      if (typeof callback !== 'function') {
          throw new TypeError();
      }
  
      var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
  
      for (var i = 0, len = this.length; i &lt; len; i++) {
          this[i] = callback.call(thisArg, this[i], i, this);
      };
  };
  </code></pre>
  
  <p><strong>Summary of results:</strong></p>
  
  <p>From fastest to slowest:</p>
  
  <ol>
  <li>For simple/while (about the same)</li>
  <li>Map3 (my own implementation)</li>
  <li>Map2 (Mozilla polyfill)</li>
  <li><code>Array.map</code></li>
  <li>for in</li>
  </ol>
  
  <p><strong>Observations</strong></p>
  
  <p>An interesting note is that named functions are usually alittle faster than if you use anonymous functions (around 5%). But I noticed that the polyfill is slower with named functions in firefox, but faster in chrome, but chrome's own map implementation is slower with named functions... I tested this about 10x each, so even if it's not exactly intensive testing (which jsperf already does), unless my luck is that great it should be enough as a guideline.</p>
  
  <p>Also, chrome's <code>map</code> function is up to 2x slower than firefox on my machine. Didn't expect that at all.</p>
  
  <p>And... firefox's own <code>Array.map</code> implementation is slower than the Mozilla Polyfill... haha</p>
  
  <p>I'm not sure why ECMA-262 specs state that <code>map</code> can be used for objects other than Arrays (<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19">http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19</a>). That makes the whole map function 3-4 times slower (as shown in my tests) as you need to check for property existence every loop...</p>
  
  <p><strong>Conclusion</strong></p>
  
  <p>There isn't really much difference between named and anonymous functions, if you consider that different browsers perform slightly differently.</p>
  
  <p>At the end of the day, we shouldn't really micro-optimize too much, but I found this interesting :)</p>