DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for ES6 Data Structures: JS Map
Mitchell Mutandah
Mitchell Mutandah

Posted on

ES6 Data Structures: JS Map

Hi there. In today's article, we are going to take a deep dive into ES6 Data structures, so lets get started!
deep


You may wonder β€” why Map vs Object but not Map vs Array, or Object vs Set? Well, you can also compare between any of the two, but Map and Object, unlike others, have very similar use-cases which require us to understand more deeply about them to decide what is better for when. And that’s what this is about.

What is Map?

Map sounds very simple, doesn’t it? We see or hear about it almost everyday, let’s say World map, Street map, etc…. So what is exactly Map?

Map is a data collection type (in a more fancy way β€” abstract data structure type), in which, data is stored in a form of pairs, which contains a unique key and value mapped to that key. And because of the uniqueness of each stored key, there is no duplicate pair stored.

And what about Object?

Everyone knows Object, especially in Javascript. Object is object, isn’t it? Right, but not enough.

Regular Object (pay attention to the word β€˜regular’ ) in Javascript is dictionary type of data collection β€” which means it also follows key-value stored concept like Map. Each key in Object β€” or we normally call it β€œproperty” β€” is also unique and associated with a single value.

Map Overview

  • Map holds key-value pairs where the keys can be any datatype.
  • A map remembers the Original insertion order of the keys.
  • A map has a property that represents the size of the map.

Create Map

  • Passing an array to new Map().
  • Create a map and use Map.set().

new Map()

const fruits = new Map([
  ['mango', 200],
  ['apple', 500],
  ['orange', 400],
])
console.log(fruits);
// Map(3) {'mango' => 200, 'apple' => 500, 'orange' => 400}
Enter fullscreen mode Exit fullscreen mode

Map.set()

const fruits = new Map()

fruits.set('mango', 200);
fruits.set('apple', 500);
fruits.set('orange', 400);

console.log(fruits);
// Map(3) {'mango' => 200, 'apple' => 500, 'orange' => 400}

Enter fullscreen mode Exit fullscreen mode

The set() method can also be used to change existing Map values.

Map.get()
Gets the value of a key in a Map

fruits.get("apple")
Enter fullscreen mode Exit fullscreen mode

Map.size

fruits.size; //no. of element Map
Enter fullscreen mode Exit fullscreen mode

Map.has()

  • true if a key exists in a Map
fruits.has("apple"); //return true
Enter fullscreen mode Exit fullscreen mode

Map.delete()

fruits.delete( "apple")
Enter fullscreen mode Exit fullscreen mode

Map.clear()

fruits.clear ( "apple") // remove all the elements
Enter fullscreen mode Exit fullscreen mode

Map Iteration

For looping over a map, there are 3 methods.

Map.keys()

const fruits = new Map([
  ["mango",200],
  ["apple",500],
  ["orange",400]
]);

for(cost x of fruits.keys()){
   console.log(x)
};
Enter fullscreen mode Exit fullscreen mode

Map.values()

const fruits = new Map([
  ["mango",200,
  ["apple",500),
  ["orange", 400]
]);

for(const x of fruits.values )){
  console. log(x);
}
 /* 200,
    500,
    400
*/
Enter fullscreen mode Exit fullscreen mode

Map.entries()

const fruits = new Map([
  ["mango",200],
  ["apple",500],
  ["0range", 400]
]);

for (const x of fruits.entries()){
  console. log(x);
};
Enter fullscreen mode Exit fullscreen mode

That's it! Subscribe and follow me for more content like this. Episode 2 coming soon.

Cheers! #HappyCoding

Top comments (1)

Collapse
 
mitchiemt11 profile image
Mitchell Mutandah

Episode 2 of full comparison between object and map is coming soon. Stay tuned!

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.