What’s the best way to store a key-value array in JavaScript, and how can it be looped through?

General Discussions
, ,
1

I need to store a key-value array in JavaScript where the key is a tag, such as {id} or just id, and the value is the numerical value of the id. This should be an element of an existing JavaScript class or a global variable that can easily be referenced through the class. I’m okay with using jQuery. What’s the most efficient way to create and loop through a JavaScript key value array?

2

I’ve been working with JavaScript for over a decade now, and the most straightforward way I’ve found to store a javascript key value array is just by using a plain object. It’s simple, fast, and perfect for most everyday use cases.

// Storing key-value pairs in an object
var idValues = {
  id1: 101,
  id2: 102,
  id3: 103
};

// Looping through the object using for...in
for (var key in idValues) {
  if (idValues.hasOwnProperty(key)) {
    console.log(key + ": " + idValues[key]);
  }
}

This method works great when your keys are strings and you just need a lightweight solution without bringing in extra tools or libraries.

3

Adding to what @kumari_babitaa said—after working on more dynamic apps, I’ve started leaning towards Map when handling a javascript key value array. It’s especially helpful when key order matters or when keys aren’t just strings.

// Using Map for key-value storage
let idValues = new Map();
idValues.set('id1', 101);
idValues.set('id2', 102);
idValues.set('id3', 103);

// Looping through the Map
idValues.forEach((value, key) => {
  console.log(key + ": " + value);
});

The bonus with Map is that it remembers the insertion order and handles various key types, which is a big plus when you’re dealing with more complex data structures.

4

Jumping in here—with around 7 years of frontend work, I often use jQuery when working on legacy codebases. If you’re already using jQuery, it offers a super clean way to handle a javascript key value array using $.each()."

// Storing key-value pairs in an object
var idValues = {
  id1: 101,
  id2: 102,
  id3: 103
};

// Looping using jQuery's $.each()
$.each(idValues, function(key, value) {
  console.log(key + ": " + value);
});

That said, whether you use Object, Map, or jQuery really depends on your specific context. For flexibility and modern standards, Map is solid. For simplicity, native objects are just fine. And jQuery—well, it’s still handy if you’re already in that ecosystem.