AngularJS forEach vs Native forEach vs key vs for (v33)

Revision 33 of this benchmark created by mr on

Description

Compare performance of the following iterative patterns:

AngularJS angular.forEach Native array.forEach Native for key in arr Native for loop

Should be quicker when caching length, also updated latest stable AngularJS! :)

Setup

var a = angular, u = {};
    
        a.forEach = function(obj, iterator, context) {
                var key, objLen;
                if (obj) {
                        if (a.isFunction(obj)) {
                                for (key in obj) {
                                        // Need to check if hasOwnProperty exists,
                                        // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
                                        if (key !== 'prototype' && key !== 'length' && key !== 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
                                                iterator.call(context, obj[key], key);
                                        }
                                }
                        } else if (u.isArray(obj) || u.isArrayLike(obj)) {
                                objLen = obj.length; key = 0;//cached length is faster!
                                for (; key < objLen; key++) {
                                        iterator.call(context, obj[key], key);
                                }
                        } else if (obj.forEach && obj.forEach !== a.forEach) { //https://github.com/angular/angular.js/commit/36625de0d3ebc1fc091af474d942c6ce16b0a1c0
                                obj.forEach(iterator, context);
                        } else {
                                for (key in obj) {
                                        if (obj.hasOwnProperty(key)) {
                                                iterator.call(context, obj[key], key);
                                        }
                                }
                        }
                }
                return obj;
        };
    
        u.isWindow = function(obj) {
                return obj && obj.document && obj.location && obj.alert && obj.setInterval;
        };
        
        u.isArray = (function() {
                if (!a.isFunction(Array.isArray)) {
                        return function(value) {
                                return toString.call(value) === '[object Array]';
                        };
                }
                return Array.isArray;
        })();
    
        u.isArrayLike = function(obj) {
                if (obj === null || u.isWindow(obj)) {
                        return false;
                }
    
                var length = obj.length;
    
                if (obj.nodeType === 1 && length) {
                        return true;
                }
    
                return a.isString(obj) || a.isArray(obj) || length === 0 || typeof length === 'number' && length > 0 && (length - 1) in obj;
        };
    
    
    
    
    function test7WithFn(arr, fn) {
      var i = 0, arrLen = arr.length;
      for (; i < arrLen; i++) {
        fn(arr[i]);
      }
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Native forEach
arr.forEach(function(item) {
  console.log(item);
});
ready
AngularJS forEach
angular.forEach(arr, function(item) {
    console.log(item);
});
ready
for key in arr
for (var key in arr) {
    console.log(arr[key]);
}
ready
for loop
for (i = arr.length - 1; i >= 0; i--) {
console.log(arr[i]);
}
ready
for loop, super-cached i and arr length, simpler!
var i,arrLen = arr.length;
for (i = 0; i < arrLen; i++) {
  console.log(arr[i]);
}
ready
for loop, simple (with var)
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
ready
for loop, improved super-cached i and arr length, even simpler!
var i = 0,arrLen = arr.length;
for (; i < arrLen; i++) {
  console.log(arr[i]);
}
ready
AngularJS forEach with Improved forEach Method
angular.forEach(arr, function(item) {
  console.log(item);
});
ready
test7WithFn(arr, function(item) { console.log(item); });
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.