What is JavaScript Map? Get started in 5 minutes
Tags: javascript, programming, computerscience
Published: 2021-04-23 18:59:48

JavaScript used to be restricted with its collections capabilities. In other languages, you could work with sets, associative maps, lists, and dictionaries, but JavaScript only allowed you to work with arrays. JavaScript developers found a way to map keys to values, but their method came with its own limitations.

In the ES6 release, JavaScript introduced a new built-in class for maps that makes it easier to work with collections. In this short tutorial, we’ll discuss JavaScript `Map` code examples, methods, and use cases, and we’ll introduce advanced concepts to learn.

**We’ll cover:**
* [What is JavaScript map?](#whatismap)
* [JavaScript map syntax](#syntax)
* [JavaScript map methods and use cases](#methods)
* [Advanced map concepts](#advancedconcepts)

<br>

<a name=“whatismap”></a>
## What is JavaScript map?

Before ES6, JavaScript developers used objects to map keys to values, but using an object as a map has some restrictions:

* There’s no dependable way to iterate over keys
* The `keys()` method converts fields to strings, which creates key collision
* There’s no simple way to add new keys and new values

These issues were addressed in the ES6 release when the `Map` collection type was introduced. It can **hold key-value pairs** of any type and can remember **key insertion order**. Any value (objects and primitives) can be used as a key or a value. 

JavaScript `Map` creates a new array, which contains the results from the iteration over the elements of the array and calls the provided function once for each element in order. It’s an important data structure that has many essential uses.

> **Note:** `WeakMap` is similar to `Map`, but all keys in a `WeakMap` are objects.


To create a new `Map`, follow this syntax:

```
let map = new Map([iterable]);
```

Let’s say we want to create one that stores names as keys and scores as values.

```
'use strict';

//START:DEFINE
const scores =
	new Map([['Ruby', 12], ['Steven', 11], ['Sam', 15], ['Robin', 14]]);

scores.set('James', 14);

console.log(scores.size);
//END:DEFINE
```
> **Output:** `5`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxpd7z6j7x8wzrx3n1u6.png)

We did three things here: 
1. Initialized the `scores` map with names and scores
2. Added a key and value to the map using the `set()` method (line 7)
3. Used the `size` property to determine how many keys are in the map (line 9)

**There’s a lot more we can do with JavaScript maps, such as:**

* Iterate through maps
* Initialize maps with iterable objects
* Get elements from maps by key
* Get the number of elements in a map
* Convert map keys or values to arrays
* Invoke callbacks for each key-value pair in insertion order
* Etc.

Before we dive deeper into some methods and use cases, let’s first learn the JavaScript map syntax.

<a name=“syntax”></a>
## JavaScript map syntax

This JavaScript map syntax is as follows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c7me2yoiyrqmcc7533r.png)

Description:
* **array:** the array on which the specific function is called
* **map:** the method called for the array with the required parameters
* **function(currentValue, index, arr):** the function with its parameters, which is required to run for each element in the array
	* **currentValue:** the value of the current element
	* **index:** the index of the current element
	* **arr:** the array object on which the `map()` is called
* **thisValue:** the value used as the function’s `this` value when it’s executed

Now that we’ve learned the syntax, let’s look at an example implementation of the `map()` function:

```
//creating an array
var an_array = [5, 3, 1, 4, 2]

//map calls a function with “item” as parameter
//map will pass each element of an_array as “item” in this function
//the function will triple each element passed and return it as the return value
result = an_array.map(function(item) {
	return item*3;
});

//new list will print with the tripled values
console.log(result);
```
> **Output:** `[ 15, 9, 3, 12, 6 ]`

> **Note:** The original map array doesn't change.

<a name=“methods”></a>
## JavaScript map methods and use cases

Now that we know the JavaScript map syntax and walked through an example implementation, let’s discuss some commonly used map methods along with their use cases.

### Initialize a map with an iterable object
The `Map()` constructor initializes a map with an iterable object:

```
let userRoles = new Map( [
	[ruby, 'director'],
	[steven, 'producer'],
	[foo, 'writer'],
	[robin, 'actress']
]);
```

### Return a value mapped to a specific key

`get()` returns a value mapped to a specific key:

```
userRoles.get(robin); // actress
```

If you pass a key that’s not in the map, it will return as *undefined*:

```
let emma = {name: 'Emma'};
userRoles.get(emma); // undefined
```

### Return a boolean value showing whether a specified key exists

`has()` returns a boolean value showing whether a specified key exists:

```
userRoles.has(emma); // false
userRoles.has(ruby); // true
```

### Return the number of entries in the map

The `size` property returns the number of entries in the map:

```
console.log(userRoles.size); // 4
```

### Return a new iterator object that includes the value of each element

`values()` returns a new iterator object that includes the value of each element:

```
for (let role of userRoles.values()) {
	console.log(role); 
}
// director
// producer
// writer
// actress
```

### Remove specified elements from map object

`delete()` removes specified elements from map object:

```
userRoles.delete(ruby);
```

### Remove all elements in map object

`clear()` removes all elements in map object:

```
userRoles.clear();
```

If we checked the size, it would return as zero:

```
console.log(userRoles.size); // 0
```

### More important map methods:
* `forEach(callback[, thisArg])`: invokes a callback for each key-pair value in the map in insertion order
* `set(key, value`): sets the value for the key in the map object
* `keys()`: returns a new iterator with the keys for elements in insertion order
* `entries()`: iterates over a collection of keys and values

<br>

<a name=“advancedconcepts”></a>
## Advanced map concepts

JavaScript `Map` is a valuable collection type that makes programming with JavaScript cleaner and more efficient. We’ve learned about map syntax, methods, and use cases. Now you’re ready to tackle more advanced concepts. Some recommended concepts to cover next are:

* Metaprogramming
* Prototypal inheritance
* Implementing constructors
* Literals

To get up to speed on JavaScript’s features, check out Educative’s course, [**Rediscovering JavaScript: ES6, ES7, & ES8.**](link) This course explores modern JavaScript features to help you make your code more concise, expressive, and less error-prone. You’ll begin by learning basic features of modern JavaScript, and then you’ll move into more complex features, like destructuring, metaprogramming, object literals, and inheritance.

By the end of the course, you’ll be able to add new JavaScript features easily and write your code more efficiently. 

*Happy learning!*

<br>

### Continue reading about JavaScript
* [JavaScript Map and Set Tutorial: how to use new built-in classes](https://www.educative.io/blog/javascript-map-set)
* [JavaScript Array Methods: how to use map and reduce](https://www.educative.io/blog/javascript-array-methods-map-reduce)
* [JavaScript Versions: How JavaScript has changed over the years](https://www.educative.io/blog/javascript-versions-history)