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

Revision 20 of this benchmark created by Tom Taylor on

Description

Compare performance of the following iterative patterns:

1) AngularJS angular.forEach 2) Native array.forEach 3) Native for key in arr 4) Native for loop 5) for loop, super-cached i and arr length, simpler! 6) for loop, simple (with var) 7) for loop, improved super-cached i and arr length, even simpler! << WINNER 8) AngularJS forEach with Improved forEach Method 9) Test 7 wth Function

Should be quicker when caching length, also updated latest stable AngularJS and added an improved forEach method (now on new object 'newAngular') based on test 7! :)

This is an improvement of test 19, which broke the comparison of original vs improved AngularJS 'forEach' methods - unsure which crazy dev did that!

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js">
</script>
<script>
  var len = 1000;
  var arr = new Array();
  while (len--) {
    arr[len] = len;
  }
</script>

Setup

var a = angular, u = {}, newAngular = {};
    
        newAngular.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) {
  item;
});
ready
AngularJS forEach
angular.forEach(arr, function(item) {
  item;
});
ready
for key in arr
for (var key in arr) {
  arr[key];
}
ready
for loop
for (i = arr.length - 1; i >= 0; i--) {
  arr[i];
}
ready
for loop, super-cached i and arr length, simpler!
var i,arrLen = arr.length;
for (i = 0; i < arrLen; i++) {
  arr[i];
}
ready
for loop, simple (with var)
for (var i = 0; i < arr.length; i++) {
  arr[i];
}
ready
for loop, improved super-cached i and arr length, even simpler!
var i = 0,arrLen = arr.length;
for (; i < arrLen; i++) {
  arr[i];
}
ready
AngularJS forEach with Improved forEach Method
newAngular.forEach(arr, function(item) {
  item;
});
ready
Test 7 wth Function
test7WithFn(arr, function(item) { item; });
ready

Revisions

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