JavaScript Loop through objects: Javascript Loop through Object Keys – like the one below – are extremely common but frustratingly non-iterable. Choose the method that fits your needs and coding style. Note that Object.keys() provides more flexibility and is often preferred when working with arrays of object keys.
myObject = {
name: “Captain”,
username: “Anonymous”,
password: “weakPassword”,
dob: null,
sayHi: function() {
console.log(“Hi ” + name + “!”);
}
}
Common iteration fails
Try and use a for loop through one, and it will return undefined for each attempt to access a property:
for ( i=0; i<3; i++) {
console.log(myObject[i]); // undefined
}
Attempting to iterate through it with map will return an error:
myObject.map((item) => {
console.log(item); // Uncaught TypeError: myObject.map is not a function
})
A for of loop doesn’t work either:
for (item of myObject) {
console.log(item); // Uncaught TypeError: myObject is not iterable
}
And neither does forEach:
myObject.forEach((item) => {
console.log(item); // Uncaught TypeError: myObject.forEach is not a function
})
So, most go-to iteration methods don’t work with objects. So what are your options?
Option 1: The for in loop
The for in loop allows us to retrieve the keys from a JavaScript object:
let keys = [];
for (key in myObject) {
keys.push(key); // pushes each key into keys arrays
}
console.log(keys); // [ “name”, “username”, “password”, “dob”, “sayHi” ]
Now, to get the values, you can use the value of the key each time the loop runs to query the object:
let values = [];
for (key in myObject) {
values.push(myObject[key]); // queries object by key each time to get values
}
console.log(values); // [“Captain”, “Anonymous”, “weakPassword”, null, function sayHi()]
To mirror the object format in a single array with both keys and values, create a property in each loop, push the key and property value to it, and then push this array into an array initialized before the loop:
let properties = [];
for (key in myObject) {
let property = [];
property.push(key);
property.push(myObject[key]);
properties.push(property);
}
console.log(properties); // [ [“name”,”Captain”], [“username”,”Anonymous”], [“password”,”weakPassword”], [“dob”,null], [“sayHi”,sayHi()] ]
Option 2: Object.entries, Object.keys, Object.values
This in-built Object constructor can create iterable arrays from JavaScript objects. Just pass in an object into one of its methods.
Using Object.entries, it creates an array of arrays containing each property key and value:
const entries = Object.entries(myObject);
console.log(entries); // [ [“name”,”Captain”], [“username”,”Anonymous”], [“password”,”weakPassword”], [“dob”,null], [“sayHi”,sayHi()] ]
Use Object.keys to get the keys only:
const keys = Object.keys(myObject);
console.log(keys); [ “name”, “username”, “password”, “dob”, “sayHi” ]
And Object.values for values only:
const values = Object.keys(myObject);
console.log(values); // [“Captain”, “Anonymous”, “weakPassword”, null, function sayHi()]
