Using Maps in JavaScript

Objects are a serious workhorse in JavaScript, as they are in many programming languages.

At their most basic, they’re a data structure that allows you to store information in the form of key/value pairs, like so:

info = {
  company: "Google",
  url: "https://www.google.com",
}

You can nest objects within objects, store many objects together with an array, and even iterate over their properties and corresponding values. You can also add a new key to an object simply by assigning a value to it, like this:

info["CEO"] = "Sundar Pichai"

There’s a problem, though: Preserving the order of an object isn’t as simple as it sounds.

This is one of those weird JavaScript quirks that you might not even realize until you encounter it for the first time — because most of the time, your object keys will show up in the order in which they were inserted.

That’s because, since the ES2015 version of JavaScript was released, that’s how the language is set up to behave. And even before ES2015, that’s how it worked in most major browsers.

The problem arises when you have keys that parse as integers — in other words, they might technically be strings, like “1”, but if you tried to parse them as an integer they’d be converted to an integer.

Let’s add some arbitrary values to our object using these types of keys and see what happens.

info["1"] = "inserting a new key/value pair"

If insertion order was preserved, we’d expect this new property to show up at the end of the object, like when we added “CEO” earlier. But that’s not what happens:

Instead, the ‘1’ shows up at the beginning, where all of our keys that parse as integers will live. Let’s try another:

info["12"] = "where will this go?"

Yup, as expected — JavaScript stuck this new key/value pair with the other key that parses as an integer.

So if you need to preserve the insertion order without running into this weirdness, what do you do?

Enter Maps.

Maps work a lot like regular objects in JavaScript, except that they preserve the insertion order. You also need to use a different set of methods to declare and modify them.

You can declare a new Map like this:

let infoMap = new Map()

Then, when you want to add new keys and values, you just do it like this:

infoMap.set("company", "Google")
infoMap.set("url", "https://www.google.com")
infoMap.set("CEO", "Sundar Pichai")
infoMap.set("1", "inserting a new key/value pair")

Bam, the insertion order was preserved! Just like that!

You’ll also need to use different methods to check if a key exists, delete a key/value pair, and see what a key’s value is (has, delete, and get, respectively).

You can learn more about the details, including all kinds of other methods and uses, in the MDN documentation.

So the next time you get stuck with an object that isn’t behaving quite how you want it to, you’ll know where to look.