JavaScript - Maps

Grokking JavaScript Fundamentals

Ask Author

Back to course home

0% completed

Vote For New Content

JavaScript - Maps

Table of Contents

Contents are not accessible

Maps in JavaScript are a collection of keyed data items, just like an Object. However, Maps allow keys of any type, offering more flexibility and power in handling data than Objects. Maps maintain the insertion order of elements, which can be crucial for certain algorithms.

Syntax

To create a Map, you can use the Map() constructor, which optionally accepts an iterable (such as an array) of key-value pairs.

Javascript

. . . .

iterable is an Array or any iterable object whose elements are key-value pairs (arrays with two elements).

Example of Creating a Map

Javascript

. . . .

Above code initializes a Map fruits with three entries: apples, bananas, and oranges, with their respective quantities.
Each item in the array is a key-value pair, showing how Maps can store data in a structured format.

Map Properties in Table Format

Maps come with properties that help to inspect the collection:

Property	Description
`size`	Returns the number of key/value pairs in the Map object.

Map Methods in Table Format

Maps offer a variety of methods to manipulate the data:

Method	Description
`set(key, value)`	Adds or updates an element with a specified key and value to the Map object.
`get(key)`	Returns the value associated with the key, or `undefined` if there is none.
`has(key)`	Returns a boolean asserting whether a value has been associated with the key in the Map object or not.
`delete(key)`	Removes any value associated with the key.
`clear()`	Removes all key/value pairs from the Map object.
`entries()`	Returns a new Iterator object that contains an array of `[key, value]` for each element in the Map object in insertion order.
`keys()`	Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.
`values()`	Returns a new Iterator object that contains the values for each element in the Map object in insertion order.
`forEach(callbackFn[, thisArg])`	Executes a provided function once per each key/value pair in the Map object, in insertion order.

Examples

Example 1: Using set and get Methods

Javascript

. . . .

A Map books is created without any entries.
The set method adds two books as keys with their authors as values.
The get method retrieves the author of "1984".

Example 2: Checking for a Key with has Method

Javascript

. . . .

Above code checks if "1984" is a key in the books Map, returning true because it was added previously.

Map vs. Object Table

Comparing Maps to Objects:

Feature	Map	Object
Key Types	Any value type	Strings and Symbols
Order of Elements	Maintains insertion order	No guaranteed order
Size Property	Yes (`size`)	No, must be computed manually
Iteration	Directly iterable	Requires fetching keys or values

Maps provide advantages over Objects when a collection of key-value pairs is needed, especially when complex keys or order are important.

.....

Like the course? Get enrolled and start learning!

Table of Contents

Contents are not accessible