javascript loops object keys

Javascript Loop through Object Keys

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: => {
console.log(item); // Uncaught TypeError: 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 = [];
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()]

Javascript training in hyderabad


Add a Comment

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