# JavaScript Map

JavaScript Map introduced in ES6 is similar to objects in JavaScript. A map is used to store elements in a **key/value** pair. Unlike objects, maps can contain other data types as key. Elements in a map are inserted in an insertion order.

## Creating a JavaScript Map

The `new Map()` constructor can be used to create a map in JavaScript.

```javascript
const myMap = new Map();
```

## Inserting elements into a Map

Elements can be inserted into a map using the `set()` method or by passing an array into the `new map()` construction function.

### Using the `set()` method

The `set()` method can be used to insert an element into a map, this is done by passing the **key** and **value** of the element as arguments to the `set()` method. The **key** does not necessarily have to be a string, you can use other data types such as objects, functions, etc as key.

```javascript
let myMap = new Map();
// insert elements
myMap.set("item1", 100);
myMap.set("item2", 200);
console.log("The Map contains " + myMap.size + " elements");
```

### Passing an array into the `new map()` constructor

Elements can also be inserted into a map by passing an array into the `new map()` constructor function. Each array should contain the **key** and **value** of the element. The number of arrays passed into the constructor corresponds to the number of elements in the map.

```javascript
let myMap = new Map([ 
    ["item1", 10],
    ["item2", 20]
]);
console.log("The Map contains " + myMap.size + " elements");
```

## Assessing Map Elements

The `get()` method can be used to access the elements in a JavaScript map. An element can be assessed by passing the **key** as an argument to the `get()` method.

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
let output = myMap.get("item1");
console.log(output); // 10
```

The `has()` method can be used to check if a specific element is available in a map. The `has()` method returns a boolean indicating the availability of the element in the map.

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
let output = myMap.has("item1");
console.log(output); // true
```

## JavaScript Map Size

The `size` property can be used to get the number of elements in a map.

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
let size = myMap.size;
console.log(size); // 2
```

## Removing Map Elements

JavaScript map elements can be removed using the `clear()` and the `delete()` methods.

The `clear()` method removes all elements in a map.

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
myMap.clear();
```

The `delete()` method can be used to remove a specific element from a map. The `delete()` method returns true if the specified element exists and has been deleted, otherwise, it returns false.

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);
myMap.delete("item1"); // true
```

## Iterating through a Map

The `for...of` loop or `foreach()` method can be used to iterate through the elements in a map. The elements in the map are accessed in the insertion order.

### Using the `for...of` loop

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

for(let [key, value] of myMap) {
    console.log(key + ": " + value);
}
```

### Using the `foreach()` method

The `foreach()` method invokes a function for each **key/value** pair in a map

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

myMap.forEach(function(value, key) {
    console.log(key + ": " + value);
});
```

### Iterating over map keys

The `key()` method can be used to iterate over the keys in a map.

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

for(let key of myMap.keys()) {
    console.log(key);
}
```

### Iterating over map values

The `values()` method can be used to iterate over the values in a map

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

for(let values of myMap.values()) {
    console.log(values);
}
```

### Iterating over a map's **key/value** pair

The `entries()` method can be used to iterate over a map's **key/value** pair

```javascript
let myMap = new Map();
myMap.set("item1", 10);
myMap.set("item2", 20);

for(let element of myMap.entries()) {
    console.log(element[0] + ": " + element[1]);
}
```

# JavaScript WeakMap

A JavaScript map can contain any data type as a key, whereas a weakmap can only allow an object as a key.

```javascript
let myWeakMap = new WeakMap();
obj = {};
myWeakMap.set(obj, "WeakMap");
let output = myWeakMap.has(obj);
console.log(output);
```

***Note:*** *WeakMaps are not iterable.*

## JavaScript Map vs Object

Below are some of the differences between a JavaScript map and an object

| Map | Object |
| --- | --- |
| Maps can be directly iterated | Objects cannot be directly iterated |
| Any datatype can be used as a key | Only strings and symbols can be used as a key |
| Keys are ordered by insertion | Keys are not well ordered |

[Learn more about JavaScript](https://codetutorialz.com/javascript)