CODEWITHSUNDEEP
javascriptangularjsperformance
Hemakumar
Hemakumar

Reputation: 639

perfomance difference between angular.foreach and native for loop

I am using native for loop in my application (3rd loop statement in below), Some where I read native for loop have good performance than angular.forEach but I didn't found the correct explanation. If somebody have a better explanation please share.

1) angular.forEach

and 2)

for (var i = Things.length - 1; i >= 0; i--){
  Things[i]
};

and 3)

for (var i=0; i < Things.length; i++) {
  Things[i]
};

Thanks

Upvotes: 2

Views: 8479

Answers (1)

Deepak Sharma
Deepak Sharma

Reputation: 1137

Use forEach and related

If you're using an environment that supports the Array features of ES5 (directly or using a shim), you can use the new forEach (spec | MDN):

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

forEach accepts an iterator function and, optionally, a value to use as this when calling that iterator function (not used above). The iterator function is called for each entry in the array, in order, skipping non-existent entries in sparse arrays. Although I only used one argument above, the iterator function is called with three: The value of each entry, the index of that entry, and a reference to the array you're iterating over (in case your function doesn't already have it handy).

Using forEach on a general-purpose web page still (as of March 2014) requires that you include a "shim" for it for browsers that don't support it natively, because IE8 and earlier don't have it (and they're used by somewhere between 7% and 21% of the global browser users depending on who you believe; that figure is skewed a bit by markedly higher use in China vs. elsewhere, always check your own stats to see what you need to support). But shimming/polyfilling it is easily done (search for "es5 shim" for several options).

forEach has the benefit that you don't have to declare indexing and value variables in the containing scope, as they're supplied as arguments to the iteration function, and so nicely scoped to just that iteration.

If you're worried about the runtime cost of making a function call for each array entry, don't be; details.

Additionally, forEach is the "loop through them all" function, but ES5 defined several other useful "work your way through the array and do things" functions, including:

every (stops looping the first time the iterator returns false or something falsey) some (stops looping the first time the iterator returns true or something truthy) filter (creates a new array including elements where the filter function returns true and omitting the ones where it returns false) map (creates a new array from the values returned by the iterator function) reduce (builds up a value by repeated calling the iterator, passing in previous values; see the spec for the details; useful for summing the contents of an array and many other things) reduceRight (like reduce, but works in descending rather than ascending order)

Use a simple for loop

Sometimes the old ways are the best:

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

If the length of the array won't change during the loop, and it's in performance-sensitive code (unlikely), a slightly more complicated version grabbing the length up front might be a tiny bit faster:

var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}

And/or counting backward:

var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}

But with modern JavaScript engines, it's rare you need to eke out that last bit of juice.

.forEach cannot be broken efficiently. You have to throw an exception to perform the break

So native loop is better than .each loop

Upvotes: 3

Related Questions