How do I loop through or enumerate a JavaScript object?

ID : 155

viewed : 269

Tags : javascriptloopsfor-loopeachjavascript





Top 5 Answer for How do I loop through or enumerate a JavaScript object?

vote vote

94

You can use the for-in loop as shown by others. However, you also have to make sure that the key you get is an actual property of an object, and doesn't come from the prototype.

Here is the snippet:

var p = {      "p1": "value1",      "p2": "value2",      "p3": "value3"  };    for (var key in p) {      if (p.hasOwnProperty(key)) {          console.log(key + " -> " + p[key]);      }  }

For-of with Object.keys() alternative:

var p = {      0: "value1",      "b": "value2",      key: "value3"  };    for (var key of Object.keys(p)) {      console.log(key + " -> " + p[key])  }

Notice the use of for-of instead of for-in, if not used it will return undefined on named properties, and Object.keys() ensures the use of only the object's own properties without the whole prototype-chain properties

Using the new Object.entries() method:

Note: This method is not supported natively by Internet Explorer. You may consider using a Polyfill for older browsers.

const p = {     "p1": "value1",     "p2": "value2",     "p3": "value3" };  for (let [key, value] of Object.entries(p)) {   console.log(`${key}: ${value}`); } 
vote vote

85

Under ECMAScript 5, you can combine Object.keys() and Array.prototype.forEach():

var obj = { first: "John", last: "Doe" };  Object.keys(obj).forEach(function(key) {     console.log(key, obj[key]); }); 

ECMAScript 6 adds for...of:

for (const key of Object.keys(obj)) {     console.log(key, obj[key]); } 

ECMAScript 8 adds Object.entries() which avoids having to look up each value in the original object:

Object.entries(obj).forEach(     ([key, value]) => console.log(key, value) ); 

You can combine for...of, destructuring, and Object.entries:

for (const [key, value] of Object.entries(obj)) {     console.log(key, value); } 

Both Object.keys() and Object.entries() iterate properties in the same order as a for...in loop but ignore the prototype chain. Only the object's own enumerable properties are iterated.

vote vote

72

You have to use the for-in loop

But be very careful when using this kind of loop, because this will loop all the properties along the prototype chain.

Therefore, when using for-in loops, always make use of the hasOwnProperty method to determine if the current property in iteration is really a property of the object you're checking on:

for (var prop in p) {     if (!p.hasOwnProperty(prop)) {         //The current property is not a direct property of p         continue;     }     //Do your logic with the property here } 
vote vote

66

The question won't be complete if we don't mention about alternative methods for looping through objects.

Nowadays many well known JavaScript libraries provide their own methods for iterating over collections, i.e. over arrays, objects, and array-like objects. These methods are convenient to use and are entirely compatible with any browser.

  1. If you work with jQuery, you may use jQuery.each() method. It can be used to seamlessly iterate over both objects and arrays:

    $.each(obj, function(key, value) {     console.log(key, value); }); 
  2. In Underscore.js you can find method _.each(), which iterates over a list of elements, yielding each in turn to a supplied function (pay attention to the order of arguments in iteratee function!):

    _.each(obj, function(value, key) {     console.log(key, value); }); 
  3. Lo-Dash provides several methods for iterating over object properties. Basic _.forEach() (or it's alias _.each()) is useful for looping through both objects and arrays, however (!) objects with length property are treated like arrays, and to avoid this behavior it is suggested to use _.forIn() and _.forOwn() methods (these also have value argument coming first):

    _.forIn(obj, function(value, key) {     console.log(key, value); }); 

    _.forIn() iterates over own and inherited enumerable properties of an object, while _.forOwn() iterates only over own properties of an object (basically checking against hasOwnProperty function). For simple objects and object literals any of these methods will work fine.

Generally all described methods have the same behaviour with any supplied objects. Besides using native for..in loop will usually be faster than any abstraction, such as jQuery.each(), these methods are considerably easier to use, require less coding and provide better error handling.

vote vote

54

Preface:

  • Object properties can be own (the property is on the object itself) or inherited (not on the object itself, on one of its prototypes).
  • Object properties can be enumerable or non-enumerable. Non-enumerable properties are left out of lots of property enumerations/arrays.
  • Property names can be strings or Symbols. Properties whose names are Symbols are left out of lots of property enumerations/arrays.

Here in 2018, your options for looping through an object's properties are (some examples follow the list):

  1. for-in [MDN, spec] — A loop structure that loops through the names of an object's enumerable properties, including inherited ones, whose names are strings
  2. Object.keys [MDN, spec] — A function providing an array of the names of an object's own, enumerable properties whose names are strings.
  3. Object.values [MDN, spec] — A function providing an array of the values of an object's own, enumerable properties.
  4. Object.entries [MDN, spec] — A function providing an array of the names and values of an object's own, enumerable properties (each entry in the array is a [name, value] array).
  5. Object.getOwnPropertyNames [MDN, spec] — A function providing an array of the names of an object's own properties (even non-enumerable ones) whose names are strings.
  6. Object.getOwnPropertySymbols [MDN, spec] — A function providing an array of the names of an object's own properties (even non-enumerable ones) whose names are Symbols.
  7. Reflect.ownKeys [MDN, spec] — A function providing an array of the names of an object's own properties (even non-enumerable ones), whether those names are strings or Symbols.
  8. If you want all of an object's properties, including non-enumerable inherited ones, you need to use a loop and Object.getPrototypeOf [MDN, spec] and use Object.getOwnPropertyNames, Object.getOwnPropertySymbols, or Reflect.ownKeys on each object in the prototype chain (example at the bottom of this answer).

With all of them except for-in, you'd use some kind of looping construct on the array (for, for-of, forEach, etc.).

Examples:

for-in:

// A prototype object to inherit from, with a string-named property  const p = {answer: 42};  // The object we'll look at, which inherits from `p`  const o = Object.create(p);  // A string-named property  o.question = "Life, the Universe, and Everything";  // A symbol-named property  o[Symbol("author")] = "Douglas Adams";  for (const name in o) {      const value = o[name];      console.log(`${name} = ${value}`);  }

Object.keys (with a for-of loop, but you can use any looping construct):

// A prototype object to inherit from, with a string-named property  const p = {answer: 42};  // The object we'll look at, which inherits from `p`  const o = Object.create(p);  // A string-named property  o.question = "Life, the Universe, and Everything";  // A symbol-named property  o[Symbol("author")] = "Douglas Adams";  for (const name of Object.keys(o)) {      const value = o[name];      console.log(`${name} = ${value}`);  }

Object.values:

// A prototype object to inherit from, with a string-named property  const p = {answer: 42};  // The object we'll look at, which inherits from `p`  const o = Object.create(p);  // A string-named property  o.question = "Life, the Universe, and Everything";  // A symbol-named property  o[Symbol("author")] = "Douglas Adams";  for (const value of Object.values(o)) {      console.log(`${value}`);  }

Object.entries:

// A prototype object to inherit from, with a string-named property  const p = {answer: 42};  // The object we'll look at, which inherits from `p`  const o = Object.create(p);  // A string-named property  o.question = "Life, the Universe, and Everything";  // A symbol-named property  o[Symbol("author")] = "Douglas Adams";  for (const [name, value] of Object.entries(o)) {      console.log(`${name} = ${value}`);  }

Object.getOwnPropertyNames:

// A prototype object to inherit from, with a string-named property  const p = {answer: 42};  // The object we'll look at, which inherits from `p`  const o = Object.create(p);  // A string-named property  o.question = "Life, the Universe, and Everything";  // A symbol-named property  o[Symbol("author")] = "Douglas Adams";  for (const name of Object.getOwnPropertyNames(o)) {      const value = o[name];      console.log(`${name} = ${value}`);  }

Object.getOwnPropertySymbols:

// A prototype object to inherit from, with a string-named property  const p = {answer: 42};  // The object we'll look at, which inherits from `p`  const o = Object.create(p);  // A string-named property  o.question = "Life, the Universe, and Everything";  // A symbol-named property  o[Symbol("author")] = "Douglas Adams";  for (const name of Object.getOwnPropertySymbols(o)) {      const value = o[name];      console.log(`${String(name)} = ${value}`);  }

Reflect.ownKeys:

// A prototype object to inherit from, with a string-named property  const p = {answer: 42};  // The object we'll look at, which inherits from `p`  const o = Object.create(p);  // A string-named property  o.question = "Life, the Universe, and Everything";  // A symbol-named property  o[Symbol("author")] = "Douglas Adams";  for (const name of Reflect.ownKeys(o)) {      const value = o[name];      console.log(`${String(name)} = ${value}`);  }

All properties, including inherited non-enumerable ones:

// A prototype object to inherit from, with a string-named property  const p = {answer: 42};  // The object we'll look at, which inherits from `p`  const o = Object.create(p);  // A string-named property  o.question = "Life, the Universe, and Everything";  // A symbol-named property  o[Symbol("author")] = "Douglas Adams";  for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {      for (const name of Reflect.ownKeys(current)) {          const value = o[name];          console.log(`[${depth}] ${String(name)} = ${String(value)}`);      }  }
.as-console-wrapper {    max-height: 100% !important;  }

Top 3 video Explaining How do I loop through or enumerate a JavaScript object?







Related QUESTION?