In this post you will learn what is ES6 Map and how it compares to the object.

Introduction

Typically inside Javascript we are using objects a lot simply to store some data inside.

const obj = {foo: 'foo', bar: 'bar'}
console.log(obj.foo)

Here is how we create objects inside Javascript. It allows us to access it's properties by using dot.

console.log(obj.baz?.baa)

If the property can be undefined we can use an elvis operator to safely read it's value.

This code is extremely simple to read and support.

This is why it is a really good question if we need Map at all and if it is worth it.

const map  = new Map([
  ['foo', 'foo'],
  ['bar', 'bar']
])

To create a Map we are using new Map construction where we provide an array of arrays. Essentially it's an array of key-value pairs.

console.log(map.get('foo'))

We can read any value by the key with get operator.

Difference #1

The first point to remember is that objects inside Javascript support object oriented programming. It means that they have prototypes and lots of additional properties.

Inside Map we don't have all this stuff and we just store data inside.

Difference #2

Second important point is that in object keys can be only strings. Inside Maps keys can be anything - a number, a string, an object or even a function.

const map  = new Map([
  ['foo', 'foo'],
  ['bar', 'bar'],
  [1, '1']
])
console.log(map.get(1))

In this case here we defined a key as a number and got a value by this number.

Difference #3

Next important difference is that objects don't have any order. You can't sort objects by indexes. They are not even in alphabetical order - it's simply a random order. Inside Map we have a strict order and it is an order of insertion.

const map  = new Map([
  ['foo', 'foo'],
  ['bar', 'bar'],
  [1, '1']
])
map.set('baz', 'baz')
console.log(map.get(1))

Here we used set to add a pair to our Map and it will be set on the last place in our Map.

Difference #4

If we are working with object and we want to know how many keys do we have we typically get keys as an array and then calculate length.

console.log(Object.keys(obj).length)

Map has inside a size property and it doesn't need these calculations as it always stores a value.

console.log(map.size)

Difference #4

One more important difference is that Map is iterable and object is not.

for (const [key, value] of map) {
  console.log(key, value)
}

As you can see with for of construction we can loop through our map and get access to every pair. It is not possible in Object and we need to convert it to array of pair to be able to loop through.

Cloning the object

Sometime we want to clone the object because we don't want to reference the same object inside memory.

const obj2 = {...obj}

This will create a copy of the object. But it is possible to do the same with Map.

const map2 = new Map(map)

It works in the same way as cloning an object.

It is important to remember that in both cases with object and with Map it won't copy nested objects.

If you need a deep copy you might want to use structured clone.

const obj2 = structuredClone(obj)
const map2 = structuredClone(map)

It works in the same way to object and Map.

Stringify and parse

It is also really nice that we can stringify and parse objects out of the box.

const stringifiedObj = JSON.stringify(obj)
const parsedObj = JSON.parse(stringifiedObj)

But we can't do it out of the box with Map. But we still can do it in some way.

const stringifiedMap = JSON.stringify(Array.from(map.entries()))
// [["foo", "foo"], ["bar", "bar"]]
const stringifiedMap2 = JSON.stringify(Object.fromEntries(map))
// {"foo": "foo", "bar", "bar"}

These are 2 different variants to stringify a Map which results in different formats. I prefer to use second variant because we can directly use JSON.parse on it and get a normal Javascript object.

It is important to mention that Map works faster if you have lots of additions and deletions to your object. If you don't have that the difference and performance will be negligible.

Converting object to array

The last thing that I want to talk about we need every day is to convert our object to array so we can use things like map, filter which we can't do with objects.

In order to do that we Map we can use Array.from.

const result = Array.from(map, ([key, value]) => `${key} ${value}`)
// ['foo foo', 'bar bar']

Here we converted our Map to an array of strings.

For myself I prefer to use objects everywhere and I almost never use Map.

And actually if you want to improve your Javascript knowledge and prepare for the interview I highly recommend you to check my course Javascript Interview Questions.