Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Objects vs arrays in Javascript for key/value pairs

Say you have a very simple data structure:

(personId, name) 

...and you want to store a number of these in a javascript variable. As I see it you have three options:

// a single object var people = {     1 : 'Joe',     3 : 'Sam',     8 : 'Eve' };  // or, an array of objects var people = [     { id: 1, name: 'Joe'},     { id: 3, name: 'Sam'},     { id: 8, name: 'Eve'} ];  // or, a combination of the two var people = {     1 : { id: 1, name: 'Joe'},     3 : { id: 3, name: 'Sam'},     8 : { id: 8, name: 'Eve'} }; 

The second or third option is obviously the way to go if you have (or expect that you might have) more than one "value" part to store (eg, adding in their age or something), so, for the sake of argument, let's assume that there's never ever going to be any more data values needed in this structure. Which one do you choose and why?


Edit: The example now shows the most common situation: non-sequential ids.

like image 232
nickf Avatar asked Mar 27 '09 00:03

nickf


People also ask

Can arrays have key-value pairs?

Arrays in javascript are typically used only with numeric, auto incremented keys, but javascript objects can hold named key value pairs, functions and even other objects as well. Simple Array eg. We see above that we can loop a numerical array using the jQuery.

Are key-value pairs objects?

An object contains properties, or key-value pairs. The desk object above has four properties. Each property has a name, which is also called a key, and a corresponding value. For instance, the key height has the value "4 feet" .

Why are JavaScript objects better than arrays?

Both objects and arrays are considered “special” in JavaScript. Objects represent a special data type that is mutable and can be used to store a collection of data (rather than just a single value). Arrays are a special type of variable that is also mutable and can also be used to store a list of values.

How do you store key-value pairs in JavaScript?

Method 2: In this method we will use Map to store key => value in JavaScript. The map is a collection of elements where each element is stored as a key, value pair. Map objects can hold both objects and primitive values as either key or value.


1 Answers

Each solution has its use cases.

I think the first solution is good if you're trying to define a one-to-one relationship (such as a simple mapping), especially if you need to use the key as a lookup key.

The second solution feels the most robust to me in general, and I'd probably use it if I didn't need a fast lookup key:

  • It's self-describing, so you don't have to depend on anyone using people to know that the key is the id of the user.
  • Each object comes self-contained, which is better for passing the data elsewhere - instead of two parameters (id and name) you just pass around people.
  • This is a rare problem, but sometimes the key values may not be valid to use as keys. For example, I once wanted to map string conversions (e.g., ":" to ">"), but since ":" isn't a valid variable name I had to use the second method.
  • It's easily extensible, in case somewhere along the line you need to add more data to some (or all) users. (Sorry, I know about your "for argument's sake" but this is an important aspect.)

The third would be good if you need fast lookup time + some of the advantages listed above (passing the data around, self-describing). However, if you don't need the fast lookup time, it's a lot more cumbersome. Also, either way, you run the risk of error if the id in the object somehow varies from the id in people.

like image 57
Dan Lew Avatar answered Oct 13 '22 04:10

Dan Lew