/
/
A Quick Guide to JavaScript ES6 Map
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

A Quick Guide to JavaScript ES6 Map

JavaScript ES6 introduced a new data structure called Map. A map is an unordered collection of key-value pairs, where the keys are unique, and the values can be any JavaScript type.

Maps allow you to store key-value pairs in a way that’s easy to retrieve by their associated value, making it perfect for storing data about your application or website, such as user information. In this blog post, we’ll take a look at how maps work and what they can do for you!

I’m going to show you some examples of when and how you should use maps with code snippets so that you get an idea of how to implement them into your own projects! Let’s go over everything needed to start using maps today.

Let’s look at the differences. We have a couple of built-in methods:

📚 Creating New Map in JavaScript

When you want to create sets in JavaScript, always do it with the set constructor set(), preceded by the new keyword.

    let animals = new Map();

📚 animals.set(key, value)

Set the value for the key in the Map, and return the Map.
If the key is already present in the map, then the value is overwritten.

animals.set('🐧', 'penguin');
animals.set('🐯', 'tiger');
animals.set('🐶', 'dog'); // Output: 👉 animals: {'🐧'=> 'penguin', '🐯' => 'tiger', '🐶' =>'dog'}

📚 animals.get(key)

Returns the value associated with the key or returns undefined if there is no key on the Map that matches the passed key.

animals.get('🐯'); // tiger.
animals.get('🐘'); // undefined.

📚 animals.entries()

Returns an iterator that has an array of key-value pairs in insertion order.

animals.entries(); // MapIterator {'🐯' => 'tiger', '🐶' => 'dog'}

📚 animals.delete(key)

Delete the entry matching the key and returns true. If the key is not found in the map, then it returns false.

animals.delete('🐘'); // false
animals.delete('🐧'); // true

📚 animals.has(key)

Returns true if the map has the key provided, else return false.

animals.has('🐯'); // true
animals.has('🐧'); // false

📚 animals.keys()

Returns a new iterator that contains the keys in insertion order.

animals.keys(); // MapIterator {'🐯', '🐶' }

📚 animals.values()

Returns a new iterator that contains the values in insertion order.

animals.values(); // MapIterator {'tiger', 'dog'}

📚 animals.size

This is how we get the number of entries currently on the Map.

animals.size; // 2

📚 animals.clear()

Delete all key-value pairs from the Map.

animals.clear(); // delete all elements

Conclusion 🎁

Conclusion paragraph: Map is a powerful JavaScript ES6 data structure that can create new arrays of the same type. It’s especially useful when you have an array of objects and want to do something with each object in turn, like iterate over them. If this sounds interesting or if you’re interested in learning more about how a map works, let us know! We’d love to work with you on your project and help make it awesome.

Recent Snippet

How to use reduce over an array of objects

To get the maximum or the minimum value from an array, we can use Math.max() and pass as arguments the numbers from which we want to pick.

How to get the highest or the lowest value in an array

To get the maximum or the minimum value from an array, we can use Math.max() and pass as arguments the numbers from which we want to pick.