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!

---

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}

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}

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")

Map.size

fruits.size; //no. of element Map

Map.has()

• true if a key exists in a Map

fruits.has("apple"); //return true

Map.delete()

fruits.delete( "apple")

Map.clear()

fruits.clear ( "apple") // remove all the elements

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)
};

Map.values()

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

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

Map.entries()

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

for (const x of fruits.entries()){
  console. log(x);
};

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

Cheers! #HappyCoding

Comments

[Mitchell Mutandah]

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