JavaScript: Data Structures (Part 3 - Maps)

Maps Data Structures

This is the third and last part of my data structures series, this part as the previous, Arrays (Part 1) and Sets (Part 2) cover another method for organizing data, so it can be used efficiently so your coding can flow in its intended way.

Maps data structures provide with a convenient way of keeping a list of key and value pairs. At first, maps data structure looks like JavaScript objects, but you can differentiate them because:

• Objects use strings for key values and maps can use any data type as a key.
• Objects have methods that can be called, and prototypes used as chains; in the other hand maps only focus on storage and retrieval of key values pairs.
• An objects value can accessed directly, but in maps they restrict you to using the get ( ) method so you can be able to retrieve any values.

Creating Maps

You can create an empty map object by using new operator and Map ( ) constructor:

const romanNumbers = new Map( );

Map Literal Notation

There is no literal notation for creating maps, the only thing I found in my research is that there is some proposal syntax in place, but nothing formalized now.

You will need to use constructors and pass an iterable (an array literal):

Example:

const map = new Map([[“foo”, “Foo”], [“bar”, “Bar”, …]);
const set = new Set([“Foo”, “Bar”, …]);

Adding Entries

Using the set ( ) method allows you to add a key and value pair to a map.

Example:

romanNumbers.set(1, ‘l’); // The first value is the key, and second is the value.
<< Map (1 => ‘l’) // The “hash rocket” symbol (=>) represents the map connection between the key and the value.

Multiple Entries

You can add multiple entries by repeatedly calling the set( ) method.

Example:

romanNumbers.set(2, ‘II’) .set(3, ‘III’) .set(4, ‘IV’) .set(5, ‘V’);
<< Map { 1 => ‘I’, 2 => ‘II’, 3 => ‘III’, 4 => ‘IV’, 5 => ‘V’ }

Map Methods

In Maps you can look for a value based on its key by using the get ( ) method.

Example

romanNumbers.get (4);
<< ‘IV’

Using the has ( ) methods allows you to look if a particular key is in a map, and this method will return a Boolean value (true or false).

Example:

romanNumbers.has(5);
<< true

romanNumbers.has(10);
<< false

You can also add multiple values by using nested arrays as parameter.

Example:

const heroes = new Map([ [‘Clark Kent’, ‘Superman’], [‘Bruce Wayne’, ‘Batman’] ]);

You can look for the number of key and value pair in a map by using the size property:

Example:

heroes.size
<< 2

Removing Entries

By using the delete( ) method you can remove a key and its value from a map.

Example:

heroes.delete(‘Clark Kent’); // To delete a value you need to specify it in the parentheses 
<< true // Will return a Boolean of true if the value was return, or false if not

heroes.size;
<< 1

In the other hand if you use the clear ( ) method, it will remove both, the key and its value.

Example:

heroes.clear( );

heroes.size;
<< 0

Converting Maps to Arrays

[ ...romanNumbers]
<< [ [1, 'I'], [2, 'II'], [3, 'III'], [4, 'IV'], [5, 'V'] ]

Array.from(romanNumbers)
<< [ [1, 'I'], [2, 'II'], [3, 'III'], [4, 'IV'], [5, 'V'] ]

Conclusion

Maps data structures are not intended to replace objects, its use depends on what operation you are going to perform or what data you are going to work with. Maps are more useful over objects when you just need a simple look up structure for data storing.

Hope this post is of any help.