How to get to map

Map and Set

Till now, we’ve learned about the following complex data structures:

But that’s not enough for real life. That’s why Map and Set also exist.

Methods and properties are:

As we can see, unlike objects, keys are not converted to strings. Any type of key is possible.

Map can also use objects as keys.

This algorithm can’t be changed or customized.

Every map.set call returns the map itself, so we can “chain” the calls:

Iteration over Map

Besides that, Map has a built-in forEach method, similar to Array :

Object.entries: Map from Object

When a Map is created, we can pass an array (or another iterable) with key/value pairs for initialization, like this:

If we have a plain object, and we’d like to create a Map from it, then we can use built-in method Object.entries(obj) that returns an array of key/value pairs for an object exactly in that format.

So we can create a map from an object like this:

Object.fromEntries: Object from Map

There’s Object.fromEntries method that does the reverse: given an array of How to get to map pairs, it creates an object from them:

We could also make line (*) shorter:

A Set is a special type collection – “set of values” (without keys), where each value may occur only once.

Its main methods are:

The main feature is that repeated calls of set.add(value) with the same value don’t do anything. That’s the reason why each value appears in a Set only once.

For example, we have visitors coming, and we’d like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be “counted” only once.

Set is just the right thing for that:

The alternative to Set could be an array of users, and the code to check for duplicates on every insertion using arr.find. But the performance would be much worse, because this method walks through the whole array checking every element. Set is much better optimized internally for uniqueness checks.

Iteration over Set

We can loop over a set either with for..of or using forEach :

That’s for compatibility with Map where the callback passed forEach has three arguments. Looks a bit strange, for sure. But may help to replace Map with Set in certain cases with ease, and vice versa.

The same methods Map has for iterators are also supported:

Summary

Map – is a collection of keyed values.

Methods and properties:

The differences from a regular Object :

Set – is a collection of unique values.

Methods and properties:

Iteration over Map and Set is always in the insertion order, so we can’t say that these collections are unordered, but we can’t reorder elements or directly get an element by its number.

How to get to map

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

Try it

Description

Map objects are collections of key-value pairs. A key in the Map may only occur once; it is unique in the Map ‘s collection. A Map object is iterated by key-value pairs — a for. of loop returns a 2-member array of How to get to map for each iteration. Iteration happens in insertion order, which corresponds to the order in which each key-value pair was first inserted into the map by the set() method (that is, there wasn’t a key with the same value already in the map when set() was called).

The specification requires maps to be implemented «that, on average, provide access times that are sublinear on the number of elements in the collection». Therefore, it could be represented internally as a hash table (with O(1) lookup), a search tree (with O(log(N)) lookup), or any other data structure, as long as the complexity is better than O(N).

Key equality

Objects vs. Maps

Object is similar to Map —both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. For this reason (and because there were no built-in alternatives), Object has been used as Map historically.

However, there are important differences that make Map preferable in some cases:

An Object has a prototype, so it contains default keys that could collide with your own keys if you’re not careful.

The keys in Map are ordered in a simple, straightforward way: A Map object iterates entries, keys, and values in the order of entry insertion.

Although the keys of an ordinary Object are ordered now, this was not always the case, and the order is complex. As a result, it’s best not to rely on property order.

Object does not implement an iteration protocol, and so objects are not directly iterable using the JavaScript for. of statement (by default).

Note:

Performs better in scenarios involving frequent additions and removals of key-value pairs.

Not optimized for frequent additions and removals of key-value pairs.

No native support for serialization or parsing.

(But you can build your own serialization and parsing support for Map by using JSON.stringify() with its replacer argument, and by using JSON.parse() with its reviver argument. See the Stack Overflow question How do you JSON.stringify an ES6 Map?).

Setting object properties

Setting Object properties works for Map objects as well, and can cause considerable confusion.

Therefore, this appears to work in a way:

But that way of setting a property does not interact with the Map data structure. It uses the feature of the generic object. The value of ‘bla’ is not stored in the Map for queries. Other operations on the data fail:

The correct usage for storing data in the Map is through the set(key, value) method.

Constructor

Creates a new Map object.

Static properties

The constructor function that is used to create derived objects.

Instance properties

Returns the number of key/value pairs in the Map object.

Instance methods

Removes all key-value pairs from the Map object.

Returns true if an element in the Map object existed and has been removed, or false if the element does not exist. Map.prototype.has(key) will return false afterwards.

Returns a boolean asserting whether a value has been associated to the key in the Map object or not.

Sets the value for the key in the Map object. Returns the Map object.

Iteration methods

Returns a new Iterator object that contains an array of How to get to map for each element in the Map object in insertion order.

Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.

Returns a new Iterator object that contains the values for each element in the Map object in insertion order.

Returns a new Iterator object that contains an array of How to get to map for each element in the Map object in insertion order.

Examples

Using the Map object

Using NaN as Map keys

Iterating Map with for..of

Maps can be iterated using a for..of loop:

Iterating Map with forEach()

Maps can be iterated using the forEach() method:

Relation with Array objects

Cloning and merging Maps

Just like Array s, Map s can be cloned:

Note: Keep in mind that the data itself is not cloned.

Maps can be merged, maintaining key uniqueness:

Map и Set

Сейчас мы знаем о следующих сложных структурах данных:

Методы и свойства:

Как мы видим, в отличие от объектов, ключи не были приведены к строкам. Можно использовать любые типы данных для ключей.

Map может использовать объекты в качестве ключей.

Давайте попробуем заменить Map на Object :

Этот алгоритм не может быть заменён или модифицирован.

Каждый вызов map.set возвращает объект map, так что мы можем объединить вызовы в цепочку:

Перебор Map

Для перебора коллекции Map есть 3 метода:

Object.entries: Map из Object

При создании Map мы можем указать массив (или другой итерируемый объект) с парами ключ-значение для инициализации, как здесь:

Если у нас уже есть обычный объект, и мы хотели бы создать Map из него, то поможет встроенный метод Object.entries(obj), который получает объект и возвращает массив пар ключ-значение для него, как раз в этом формате.

Так что мы можем создать Map из обычного объекта следующим образом:

Object.fromEntries: Object из Map

Вот как это сделать:

Мы могли бы написать строку (*) ещё короче:

Объект Set – это особый вид коллекции: «множество» значений (без ключей), где каждое значение может появляться только один раз.

Его основные методы это:

Основная «изюминка» – это то, что при повторных вызовах set.add() с одним и тем же значением ничего не происходит, за счёт этого как раз и получается, что каждое значение появляется один раз.

Например, мы ожидаем посетителей, и нам необходимо составить их список. Но повторные визиты не должны приводить к дубликатам. Каждый посетитель должен появиться в списке только один раз.

Множество Set – как раз то, что нужно для этого:

Альтернативой множеству Set может выступать массив для хранения гостей и дополнительный код для проверки уже имеющегося элемента с помощью arr.find. Но в этом случае будет хуже производительность, потому что arr.find проходит весь массив для проверки наличия элемента. Множество Set лучше оптимизировано для добавлений, оно автоматически проверяет на уникальность.

Перебор объекта Set

Set имеет те же встроенные методы, что и Map :

Итого

Map – коллекция пар ключ-значение.

Методы и свойства:

Отличия от обычного объекта Object :

Set – коллекция уникальных значений, так называемое «множество».

Методы и свойства:

Перебор Map и Set всегда осуществляется в порядке добавления элементов, так что нельзя сказать, что это – неупорядоченные коллекции, но поменять порядок элементов или получить элемент напрямую по его номеру нельзя.

How to Use JavaScript Collections – Map and Set

In JavaScript, objects are used to store multiple values as a complex data structure.

An object is created with curly braces <…>and a list of properties. A property is a key-value pair where the key must be a string and the value can be of any type.

On the other hand, arrays are an ordered collection that can hold data of any type. In JavaScript, arrays are created with square brackets [. ] and allow duplicate elements.

Until ES6 (ECMAScript 2015), JavaScript objects and arrays were the most important data structures to handle collections of data. The developer community didn’t have many choices outside of that. Even so, a combination of objects and arrays was able to handle data in many scenarios.

However, there were a few shortcomings,

Map in JavaScript

Map is a collection of key-value pairs where the key can be of any type. Map remembers the original order in which the elements were added to it, which means data can be retrieved in the same order it was inserted in.

In other words, Map has characteristics of both Object and Array :

How to Create and Initialize a Map in JavaScript

A new Map can be created like this:

Which returns an empty Map :

Another way of creating a Map is with initial values. Here’s how to create a Map with three key-value pairs:

Which returns a Map with three elements:

How to Add values to a Map in JavaScript

To add value to a Map, use the set(key, value) method.

Please note, if you use the same key to add a value to a Map multiple times, it’ll always replace the previous value:

So the output would be:

How to Get values from a Map in JavaScript

All About Map Keys in JavaScript

Map keys can be of any type, a primitive, or an object. This is one of the major differences between Map and regular JavaScript objects where the key can only be a string:

Here is the output:

A regular JavaScript object always treats the key as a string. Even when you pass it a primitive or object, it internally converts the key into a string:

Map Properties and Methods in JavaScript

JavaScript’s Map has in-built properties and methods that make it easy to use. Here are some of the common ones:

MapIterator: keys(), values(), and entries() in JavaScript

First, create a simple Map :

How to Iterate Over a Map in JavaScript

You can use either the forEach or for-of loop to iterate over a Map :

The output is going to be the same in both cases:

How to Convert an Object into a Map in JavaScript

How to Convert a Map into an Object in JavaScript

If you want to do the reverse, you can use the fromEntries method:

How to Convert a Map into an Array in JavaScript

There are a couple of ways to convert a map into an array:

Map vs. Object: When should you use them?

The similarity with objects ends here though. As you’ve seen, Map is different in a lot of ways. So, which one should you use, and when? How do you decide?

Use an object when:

Set in JavaScript

A Set is a collection of unique elements that can be of any type. Set is also an ordered collection of elements, which means that elements will be retrieved in the same order that they were inserted in.

A Set in JavaScript behaves the same way as a mathematical set.

How to Create and Initialize a Set in JavaScript

A new Set can be created like this:

And the output will be an empty Set :

Here’s how to create a Set with some initial values:

Set Properties and Methods in JavaScript

Set has methods to add an element to it, delete elements from it, check if an element exists in it, and to clear it completely:

I love cucumbers! How about adding one more?

Oh no, I can’t – Set is a collection of unique elements:

Now our salad Set is as follows:

How to Iterate Over a Set in JavaScript

Set has a method called values() which returns a SetIterator to get all its values:

We can use a forEach or for-of loop on this to retrieve the values.

As Set doesn’t have keys, the keys() method returns a SetIterator to retrieve its values:

How to Enumerate over a Set in JavaScript

We can enumerate over a Set using forEach and for-of loops:

The output of both is:

Sets and Arrays in JavaScript

How to Convert a Set into an array in JavaScript

Converting a Set into an array is simple:

Unique values from an array using the Set in JavaScript

Creating a Set is a really easy way to remove duplicate values from an array:

Set and Object in JavaScript

A Set can have elements of any type, even objects:

No surprise here – the Set contains one element that is an object.

Let’s change a property of the object and add it to the set again:

What do you think the output will be? Two person objects or just one?

Here is the output:

Set is a collection of unique elements. By changing the property of the object, we haven’t changed the object itself. Hence Set will not allow duplicate elements.

Set is a great data structure to use in addition to JavaScript arrays. It doesn’t have a huge advantage over regular arrays, though.

In Summary

Here is a GitHub repository to find all the source code used in this article. If you found it helpful, please show your support by giving it a star: https://github.com/atapas/js-collections-map-set

You may also like some of my other articles:

If this article was useful, please share it so others can read it as well. You can @ me on Twitter (@tapasadhikary) with comments, or feel free to follow me.

JavaScript Maps

A Map holds key-value pairs where the keys can be any datatype.

A Map remembers the original insertion order of the keys.

A Map has a property that represents the size of the map.

Map Methods

How to Create a Map

You can create a JavaScript Map by:

new Map()

You can create a Map by passing an Array to the new Map() constructor:

Example

Map.set()

You can add elements to a Map with the set() method:

Example

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set(«apples», 500);
fruits.set(«bananas», 300);
fruits.set(«oranges», 200);

The set() method can also be used to change existing Map values:

Example

Map.get()

The get() method gets the value of a key in a Map:

Example

Map.size

The size property returns the number of elements in a Map:

Example

Map.delete()

The delete() method removes a Map element:

Example

Map.clear()

The clear() method removes all the elements from a Map:

Example

Map.has()

The has() method returns true if a key exists in a Map:

Example

Try This:

Maps are Objects

typeof returns object:

Example

instanceof Map returns true:

Example

JavaScript Objects vs Maps

Differences between JavaScript Objects and Maps:

Map.forEach()

The forEach() method invokes a callback for each key/value pair in a Map:

Example

Map.entries()

The entries() method returns an iterator object with the How to get to map in a Map:

Example

Map.keys()

The keys() method returns an iterator object with the keys in a Map:

Example

Map.values()

The values() method returns an iterator object with the values in a Map:

Example

You can use the values() method to sum the values in a Map:

Example

Objects as Keys

Being able to use objects as keys is an important Map feature.

Example

// Create a Map
const fruits = new Map();

// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Remember: The key is an object (apples), not a string («apples»):

Example

Browser Support

JavaScript Maps are supported in all browsers, except Internet Explorer: