ES6 Data Structures: JS Map
Tags: javascript, tutorial, beginners, programming
Published: 2022-12-04 10:51:39

Hi there. In today's article, we are going to take a deep dive into ES6 Data structures, so lets get started!
![deep](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qx1oqmre24cggm3v6gp.gif)

---

_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**