What language constructions do you use for iterating over object properties and array items?

Technology CommunityCategory: JavaScriptWhat language constructions do you use for iterating over object properties and array items?
VietMX Staff asked 3 years ago

For objects:

  • for loops – for (var property in obj) { console.log(property); }. However, this will also iterate through its inherited properties, and you will add an obj.hasOwnProperty(property) check before using it.
  • Object.keys() – Object.keys(obj).forEach(function (property) { ... })Object.keys() is a static method that will lists all enumerable properties of the object that you pass it.
  • Object.getOwnPropertyNames() – Object.getOwnPropertyNames(obj).forEach(function (property) { ... })Object.getOwnPropertyNames() is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it.

For arrays:

  • for loops – for (var i = 0; i < arr.length; i++). The common pitfall here is that var is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces let which has block scope and it is recommended to use that instead. So this becomes: for (let i = 0; i < arr.length; i++).
  • forEach – arr.forEach(function (el, index) { ... }). This construct can be more convenient at times because you do not have to use the index if all you need is the array elements. There are also the every and some methods which will allow you to terminate the iteration early.

Most of the time, I would prefer the .forEach method, but it really depends on what you are trying to do. for loops allow more flexibility, such as prematurely terminate the loop using break or incrementing the iterator more than once per loop.