# Javascript the Basics: Maps

# Before we begin...

What is a `Map`? The map() function in JS should not be confused with the `Map` objects. `Map` are objects that hold elements in key-value pairs. What does this mean? It means every entry in a `Map` has a key and each key is associated with a certain value.



![map key/value pairs.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668464233165/IOZhErC1c.png align="left")

The `Map` object remembers insertion order and any type of value can be used as either keys or values.

# What Would the Code Look Like?

To start off we would need to instantiate a `Map` object. To do that we use the *new* operator with the `Map` keyword. 


```
let map = new Map;
``` 
## Basic Functions

Ok so we have our new `Map` object. Since it is empty let's try adding some key/value pairs to it.

### Map.set( )

```
map.set(0,1);
map.set("a", 56);
map.set("obj",{1:23, 2:78});
map.set("anything here", 01110);
``` 
To add values to a `Map` we use the built in set( ) function. This function takes in two parameters, the key and its value respectively. As mentioned before both of the values passed to this function could be of any type.



```
console.log(map);

//Map(4) {
//  0 => 1,
//  'a' => 56,
//  'obj' => { '1': 23, '2': 78 },
//  'anything here' => 584
//}

``` 

### Map.get( )

 We can also return the value of a key in a `Map` using the get( ) function. This function returns the value of the key if the `Map` has the key and returns undefined if the key doesn't exist within the `Map`.


```
console.log(map.get(0));// 1
console.log(map.get('b'));// undefined
``` 

### Map.has( )

Another important function is the has( ) function. This function returns a Boolean function based on the existence of a key in the `Map`. If the key exists within the `Map` then it returns true if not it returns false.


```
console.log(map.has('obj');//true
console.log(map.has('notObj');//false
``` 

## Functions for Deleting Elements

Now that we have covered the most basic `Map` functions let's take a look at other function we can use on a `Map`.

### Map.delete( )

The delete( ) function takes one parameter. By passing in the value of a key, you can delete that specific key and it's associated value.


```
map.delete(0);//deletes key 0 and its associated value from the Map
console.log(map);

//Map(3) {
//  'a' => 56,
//  'obj' => { '1': 23, '2': 78 },
//  'anything here' => 584
//}
``` 

### Map.clear( )

As the name suggests this function completely clears a `Map` and leaves it empty.


```
map.clear( );
console.log(map);
//Map(0) {}
``` 
## Functions for Getting Iterator Objects

Let us first start by creating a new `Map` object and adding a few values to it.

```
let map2 = new Map;

map2.set(0,1);
map2.set(1,2);
map2.set(2,1);
map2.set(3,2);
map2.set(4,1);
map2.set(5,3);
``` 
The following functions return [iterator objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) when called.

### Map.entries( )

The entries( ) function returns an iterator object that has each key and value in its own separate array. This means the object returned will have a collection of arrays each consisting of individual keys and their associated values.


```
console.log(map2.entries( ));

//[Map Entries] {
//  [ 0, 1 ],
//  [ 1, 2 ],
//  [ 2, 1 ],
//  [ 3, 2 ],
//  [ 4, 1 ],
//  [ 5, 3 ]
//}
``` 
### Map.keys( )

This function is very similar to the function above. The only difference is that while the entries( ) function returns both the key and value as a pair, the keys( ) function return only the keys as an iterator object.

```
console.log(map2.keys( ));

//[Map Iterator] { 0, 1, 2, 3, 4, 5 }
``` 

### Map.values( )

Again this function is very similar to the entries( ) and the keys( ) functions. While the entries( ) function returns a collection of key/value pairs and the keys( ) function returns a collection of all the keys, the values( ) function returns a collection of all the values as an iterator object.

```
console.log(map2.values( ));

//[Map Iterator] { 1, 2, 1, 2, 1, 3 }
``` 


The use of the iterator objects is that you can iterate through them using a for...of loop.


```
for(let i of map2.keys()){
    console.log(i);
}

//0
// 1
// 2
// 3
// 4
// 5
``` 


Well done! Now you know the basics of `Maps` in Javascript to dive deeper take a look [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map).