Comparing AngularJS looping alternatives

angular.module('plunker', []).controller('MainCtrl', function($scope, TimerService) {
  $scope.unit = 'ms';
  $scope.nrOfIterations = 10000000;
  
  var buildListOfItems = function() {
    var elements = [];
    for (var i = 0; i < $scope.nrOfIterations; i++) {
      elements.push(1);
    }
    return elements;
  };
  
  var listOfItems = buildListOfItems();

  var whileLoop = function () {
    var elements = listOfItems;

    return TimerService.measureExecution(function() {
      var count = 0;
      var i = 0;
      while (i < elements.length) {
        count += elements[i];
        i ++;
      }
    });
  };

  $scope.whileLoopTime = whileLoop();

  var nativeTimeTempVar = function() {
    var elements = listOfItems;

    return TimerService.measureExecution(function() {
      var count = 0;
      for (var i = 0; i < elements.length; i++) {
        count += elements[i];
      }
    });
  };

  $scope.nativeTimeTempVar = nativeTimeTempVar();

  var nativeTimeIn = function() {
    var elements = listOfItems;

    return TimerService.measureExecution(function() {
      var count = 0;
      for (var i in elements) {
        count += elements[i];
      }
    });
  };

  $scope.nativeTimeIn = nativeTimeIn();

  var angularForeach = function() {
    var elements = listOfItems;

    return TimerService.measureExecution(function() {
      var count = 0;
      angular.forEach(elements, function(value) {
        count += value;
      });
    });
  };

  $scope.angularForEachTime = angularForeach();

  var nativeForeach = function() {
    var elements = listOfItems;

    return TimerService.measureExecution(function() {
      var count = 0;
      elements.forEach(function (val) {
        count += val;
      });
    });
  };

  $scope.javascriptNativeForeach = nativeForeach();

  var selfImplAngularStyleForeach = function() {
    var forEach = function(list, fnApply) {
      for (var i in list) {
        var current = list[i];
        fnApply(current, i);
      }
    };

    var elements = listOfItems;

    return TimerService.measureExecution(function() {
      var count = 0;
      forEach(elements, function(value) {
        count += value;
      });
    });
  };

  $scope.angularStyleTime = selfImplAngularStyleForeach();
});

<!doctype html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
  <script src="app.js"></script>
  <script src="TimerService.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div>Time for native while loop is: {{whileLoopTime}}{{unit}}</div>
  <div>Time for native loop with temprary variable is: {{nativeTimeTempVar}}{{unit}}</div>
  <div>Time for native loop with in statement is: {{nativeTimeIn}}{{unit}}</div>
  <div>Time for native forEach is: {{javascriptNativeForeach}}{{unit}}</div>
  <div>Time for Angular forEach is: {{angularForEachTime}}{{unit}}</div>
  <div>Time for Angular style self implemented forEach is: {{angularStyleTime}}{{unit}}</div>
</body>

</html>

{
  "tags": ["angularjs"]
}

angular.module('plunker').service('TimerService', function () {
  this.measureExecution = function (callback) {
    var start = new Date().getTime();

    callback();
    
    var end = new Date().getTime();
    return end - start;
  };
});

Comparing the performance of different looping alternatives when using Angular JS
==

I read that using angular.forEach to loop over an array is slow. It wasn't that suprising because for each element an extra method call is done, therefor I started replacing "angular.forEach" with "for (i in myList)" every time a saw one in the project. Event though the implementation for "for (i in myList)" is not that convenient as the python's "for i, val in myList" it seemed more readable than "for (var i = 0; i < myList.length; i ++)".

At one point when I saw a teammate use angular's forEach in a situation with square complexity even though I pointed out that it is slow it begged for a point plank comparison.

When I saw the results I was astonished. All this time I waste on replacing I made it even worse!

The results I got are the following:

```javascript
Looping function                                Time  
while(val)                                      11ms  
for (var i = 0; i < myList.length; i ++)        10ms  
for (i in myList)                               2647ms  
myList.forEach()                                571ms  
angular.forEach()                               570ms  
own implemented forEach                         2910ms  
```

I guess that it is pretty easy to draw conclusions from here that for-in loop is theribly slow and a nice explanation can be found from [here](http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas) in the "Avoid for-in loops" section.

It might be argued that what's in the loop is more important than the loop itself but winning from situations like this can't get any easier!