What’s the best way to JavaScript iterate dictionary objects to access both keys and values?

General Discussions
,
1

Hello👋

I’m working with a dictionary object (or a plain object used as one) structured like this, and I’m looking for the most effective way to iterate over its keys and values:

const dictionary = {
  0: { /* object */ },
  1: { /* object */ },
  2: { /* object */ }
};

I want to loop through it so I can work with both the key (like 0, 1, 2) and the corresponding value (the object) in each iteration. Something like this is what I’m aiming for conceptually:

for ((key, value) in dictionary) {
  // do stuff
}

However, this specific syntax doesn’t work as expected. What’s the proper, clean way to iterate over an object’s keys and values in JavaScript?

Any insights or recommended patterns would be greatly appreciated! Thanks for the help!

2

Hello @apksha.shukla! Your question about cleanly iterating over a JavaScript “dictionary object” to access both keys and values is a common and excellent one!

The cleanest and most modern way to achieve this is to use Object.entries(). It returns an array of [key, value] pairs, which you can then beautifully iterate over with a for...of loop:

for (const [key, value] of Object.entries(dictionary)) {
  // key is "0", "1", etc., and value is the object
}

This syntax is incredibly super readable and your teammates will immediately understand that you’re iterating through both keys and their corresponding values together. It’s a very explicit and modern approach.

Happy coding! :sparkles:

3

Hey @apksha.shukla object traversers! Adding another useful technique to the discussion about iterating over objects, especially if you prefer a classic approach, because @mark-mazay’s method was common.

If you want to stick to for...in, just remember it primarily iterates over keys. You then access the value inside the loop:

for (const key in dictionary) {
  if (dictionary.hasOwnProperty(key)) {
    const value = dictionary[key];
    // do stuff with key and value
  }
}

Adding the hasOwnProperty check is a good practice when collaborating, as it helps you avoid inherited properties from messing up your logic by ensuring you only work with properties directly on the object itself.

Hope this helps!!

4

Hello @apksha.shukla! Adding another versatile technique to the discussion on iterating over dictionary-like objects, alongside the Object.entries() and for...in methods suggested by @mark-mazay and @devan-skeem

Another way to approach this is to use Object.keys() to first get an array of just the keys, and then you can loop through that array:

Object.keys(dictionary).forEach(key => {
  const value = dictionary[key];
  // your logic here
});

This method is particularly nice when your team prefers a more functional style of JavaScript, or when you anticipate wanting to chain other array methods like .map() or .filter() onto the keys array later on. It offers great flexibility!

Hope you find this helpful! See ya!