4 Ways To Iterate Over Objects In Javascript – Simple Examples

Welcome to a quick tutorial on how to iterate over objects in Javascript. So you might have been working with an object, and wondering how to loop through it.

The common ways to iterate over objects in Javascript are: 

  1. The easiest way, use a for-of loop to run through the object.
    • for (let KEY of OBJECT) { ... }
  2. Use Object.keys() to extract the keys into an array and loop through it.
    • var keys = Object.keys(OBJECT);
    • for (let i of keys) { ... }
  3. Use Object.values() to extract the values and loop through.
    • var values = Object.values(OBJECT);
    • for (let i of values) { ... }
  4. Lastly, Object.entries() to extract the keys and values into a nested array, then loop through them.
    • var entries = Object.entries(OBJECT);
    • for ([key, value] of entries) { ...; }

That covers the basics, but let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Iterate Object Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

LOOPING THROUGH OBJECTS

All right, let us now go through the examples on how to loop through an object in Javascript.

 

1) FOR-IN LOOP

1-for-in.html
// (A) THE OBJECT
var person = {
  name: "John Doe",
  email: "john@doe.com",
  foo: "Bar"
};

// (B) FOR-IN LOOP
for (let i in person) {
  console.log(i); // name, email, foo
  console.log(person[i]); // Jonn Doe, john@doe.com, Bar
}

As in the introduction – The for (KEY in OBJECT) loop is one of the easiest ways to run through an object.

 

 

2) LOOP THROUGH KEYS & VALUES OF OBJECT

2-keys-values.html
// (A) THE OBJECT
var person = {
  name: "John Doe",
  email: "john@doe.com",
  foo: "Bar"
};
 
// (B) OBJECT KEYS
// (B1) EXTRACT KEYS INTO ARRAY
var keys = Object.keys(person);
// (B2) FOR-OF LOOP
for (let i of keys) {
  console.log(i); // name, email, fav 
}
 
// (C) OBJECT VALUES
// (C1) EXTRACT VALUES INTO ARRAY
var values = Object.values(person); 
// (C2) FOR-OF LOOP
for (let i of values) {
  console.log(i); // John Doe, john@doe.com, Bar
}
  • Object.keys(OBJECT) will extract all the keys in an object into an array.
  • Object.values(OBJECT) will extract all the values into an array.
  • Thereafter, we can use for (X of Y) to loop through the keys or values.

 

3) LOOP THROUGH ENTRIES OF OBJECT

3-entries.html
// (A) THE OBJECT
var person = {
  name: "John Doe",
  email: "john@doe.com",
  foo: "Bar"
};
 
// (B) GET ENTRIES
var entries = Object.entries(person);
console.log(entries); 
/* [
 *   [name, John Doe],
 *   [email, john@doe.com],
 *   [foo, Bar]
 * ]
 */
 
// (C) FOR-OF LOOP
for ([key, value] of entries) {
  console.log(key); // name, email, foo
  console.log(value); // John Doe, john@doe.com, Bar
}

This should be pretty self-explanatory. The Object.entries() function extracts both the key and values into a nested array. Thereafter, we use the same old for (X of Y) to loop through all of them.

 

 

4) LOOP THROUGH KEYS OF NESTED OBJECTS

4-nested-keys.html
// (A) NESTED OBJECT
var person = {
  name: "John Doe",
  email: "john@doe.com",
  num: [1, 2, {innum: [3, 4]}],
  fav: {
    food: ["Apple", "Orange", "Pear"],
    color: ["Red", "Green", "Blue"]
  }
};

// (B) NESTED KEYS EXTRACT
var getKeys = function (obj) {
  let keys = [];
  if (obj instanceof Array) {
    for (let i of obj) {
      if (typeof i == "object") { keys = keys.concat(getKeys(i)); }
    }
  } else {
    for (let i of Object.keys(obj)) {
      keys.push(i);
      if (typeof obj[i] == "object") { keys = keys.concat(getKeys(obj[i])); }
    }
  }
  return keys;
};
var keys = getKeys(person);
 
// (C) FOR-OF LOOP
// name, email, num, innum, fav, food, color
for (let i of keys) { console.log(i); }

Just in case you have not noticed, Object.keys() will only return the keys at the first level. It will not go into the depths of nested objects – To do that, we have to use a recursive function.

 

5) LOOP THROUGH VALUES OF NESTED OBJECT

5-nested-values.html
// (A) NESTED OBJECT
var person = {
  name: "John Doe",
  email: "john@doe.com",
  num: [1, 2, {innum: [3, 4]}],
  fav: {
    food: ["Apple", "Orange", "Pear"],
    color: ["Red", "Green", "Blue"]
  }
};

// (B) NESTED VALUES EXTRACT
var getValues = function (obj) {
  let values = [];
  if (obj instanceof Array) {
    for (let i of obj) {
      if (typeof i == "object") { values = values.concat(getValues(i)); }
      else { values.push(i); }
    }
  } else {
    for (let i of Object.values(obj)) {
      if (typeof i == "object") { values = values.concat(getValues(i)); }
      else { values.push(i); }
    }
  }
  return values;
};
var values = getValues(person);

// (C) FOR-OF LOOP
// John Doe, john@doe.com, 1, 2, 3, 4, ...
for (let i of values) { console.log(i); }

Similarly with Object.values(), it will only return values at the first level – We have to use recursive functions to run through nested values.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

SUMMARY

Statement/Operator Description Reference Link
for...in Runs through all keys of an object. Click Here
for...of Runs through all properties of iterable objects. Click Here
Object.keys(OBJECT) Returns array of keys in the given object. Click Here
Object.values(OBJECT) Returns array of values in the given object. Click Here
Object.entries(OBJECT) Returns array of keys and values in the given object. Click Here

 

INFOGRAPHIC CHEAT SHEET

Iterate Objects In Javascript (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “4 Ways To Iterate Over Objects In Javascript – Simple Examples”

Leave a Comment

Your email address will not be published. Required fields are marked *