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?
- JavaScript map syntax
- JavaScript map methods and use cases
- Advanced map concepts
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:
WeakMapis similar toMap, but all keys in aWeakMapare 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
We did three things here:
- Initialized the
scoresmap with names and scores - Added a key and value to the map using the
set()method (line 7) - Used the
sizeproperty 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.
JavaScript map syntax
This JavaScript map syntax is as follows:
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
thisvalue 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.
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
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. 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!
Top comments (0)