22

Iam new to angular framework. when i want to iterate json object in angular, i used javascript foreach and for..in loops.

Later i came to know that angular itself has a angular.forEach loop to iterate objects.

How can i compare performance of angular.forEach with javascript for..in and foreach loops??

Why we should use angular.forEach instead of javascript foreach and for..in??

Please give me some examples and reasons to use it, which shows the performance.

Thanks :)

2 Answers 2

23

Angular forEach - Invokes the iterator function once for each item in obj collection, which can be either an object or an array.

var values = {name: 'misko', gender: 'male'};
angular.forEach(values, function(value, key) {
  console.log(key + ': ' + value);
});

// Output:
// "name: misko"
// "gender: male"

for..in - iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

forEach - method executes a provided function once per array element.

// Notice that index 2 is skipped since there is no item at
// that position in the array.
[2, 5, , 9].forEach(function (element, index, array) {
  console.log('a[' + index + '] = ' + element);
});
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9

In terms of performance it depends on the data structure you're working with, if it's an Array I will suggest using Angular.forEach or native forEach, if it's an Object for..in will be the best, however it seems Angular.forEach handles object pretty well too. Depending on the amount of data you working with. If it's enormous I will suggest you use libraries like Lodash or Underscore, they handle data manipulation well.

10

angular.forEach is basically a polyfill.

Therefore, if you are using angular, it doesn't matter if the browser is older because angular will provide a replacement if it's required.

In code it would look like this:

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(...) {
        // angulars own implementation
    }
}

There are some other differences, e.g.

  • angular.forEach supports iteration over objects;
  • angular.forEach takes an object/array as it's first argument.
3
  • True, the type of data structure also matter
    – Akinjide
    Aug 29, 2016 at 18:33
  • 2
    It's wrong, if (!Array.forEach) { > if (!Array.prototype.forEach) {. !Array.forEach will always be true in this case. forEach is available in prototype property.
    – user5066707
    Aug 29, 2016 at 18:57
  • angular.forEach performance is better than the regular for/foreach? Aug 11, 2017 at 11:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.