difference between javascript foreach loop, for..in and angular forEach loop.?
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 🙂
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.
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.
