# Master Modern JavaScript - Array includes, Array reduce, Map object and much more

Over the past few years, there have been many updates to the JavaScript language. And these updates are very useful if you want to improve your coding skills.

So let's look at some of the things added in JavaScript which you need to be familiar with to improve your skills and get a high paying job.

> **Note:** This is the final short preview of content from [Mastering Modern JavaScript](https://modernjavascript.yogeshchavan.dev/) book. There is a lot more covered in the actual book.

Check out my [previous post](https://yogeshchavan.hashnode.dev/master-modern-javascript-skills-with-this-amazing-guide) to get more preview content if you missed it.

So let's get started.

## Array.prototype.includes

ES7 has added this function that checks if an element is present in the array or not and returns a boolean value of either `true` or `false`.

```js
// ES5 Code
const numbers = ["one", "two", "three", "four"];

console.log(numbers.indexOf("one") > -1); // true
console.log(numbers.indexOf("five") > -1); // false
```

The same code using the Array `includes` method can be written as shown below:

```js
// ES7 Code
const numbers = ["one", "two", "three", "four"];

console.log(numbers.includes("one")); // true
console.log(numbers.includes("five")); // false
```

So using the Array `includes` methods makes code short and easy to understand.

The `includes` method also comes in handy when comparing with different values.

Take a look at the below code:

```js
const day = "monday";

if(day === "monday" || day === "tuesday" || day === "wednesday") {
  // do something
}
```

The above code using the `includes` method can be simplified as shown below:

```js
const day = "monday";

if(["monday", "tuesday", "wednesday"].includes(day)) {
  // do something
}
```

So the `includes` method is pretty handy when checking for values in an array.

-----


## Array.reduce

The `Array.reduce` has the following syntax:

```js
Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
```

The `reduce` method executes a **reducer** function (that you provide) on each element of the array, resulting in a single output value.

**The output of the `reduce` method is always a single value. It can be an object, a number, a string or an array, etc. It depends on what you want the output of `reduce` method to generate but it's always a single value.**

Suppose, you want to find the sum of all the numbers in the array, then you can use the reduce method for that.

```js
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, number) { 
 return accumulator + number;
}, 0); 

console.log(sum); // 15
```

The `reduce`  method accepts a callback function that receives
`accumulator`, `number`, `index` and `array` as the values. 

In the above code, we’re using only `accumulator` and `number`.

The `accumulator` is just a name given to identify the initial value.

The `accumulator` will contain the `initialValue` to use for the array. The `initialValue` decides the return type of the data returned by the `reduce` method.

The `number` which is the second parameter to the callback function will contain the array element during each iteration of the loop.

In the above code, we have provided `0` as the `initialValue` for the `accumulator`. 

So the first time the callback function executes, the `accumulator + number ` will be `0 + 1 = 1` and we're returning back the value `1`.

So next time the callback function runs, `accumulator + number` will be `1 + 2 = 3`(`1` here is the previous value returned in the last iteration
and `2` is the next element from the array).

And when next time the callback function runs, `accumulator + number` will be `3 + 3 = 6` (first 3 here is the previous value returned in the last iteration and next `3` is the next element from the array) and it will continue till all the elements in the `numbers` array are not iterated.

So the `accumulator` will retain the value of the last operation just like a static variable.

In the above code, `initialValue` of `0` is not required because all the elements of the array are integers.

_Other useful examples of `reduce` method you will find in the book._

----

## Map

`Map` is a new type of object added in ES6 which holds key-value pairs.

It's created like this:

```js
const map = new Map();
```

To add values to the map we use the `set` method.

```js
const user1 = { name: 'David', age: 30 };
const user2 = { name: 'Mike', age: 40 };

const map = new Map();

map.set('user1', user1);
map.set('user2', user2);
```

We can also add values to the map using array-like syntax. So the above code can be written like this:

```js
const user1 = { name: 'David', age: 30 };
const user2 = { name: 'Mike', age: 40 };

const map = new Map([['user1', user1], ['user2', user2]]);
```

If we try to print the map we will get an object of type Map.

```js
console.log(map); // [object Map] { ... }
```

But we can use the `for...of` loop to iterate through the map.

```js
for(element of map) {
 console.log(element);
}

/* output
['user1', { name: 'David', age: 30 }]
['user2', { name: 'Mike', age: 40 }]
*/
```

To get a particular element from the map we can use the `get` method provided by `Map`.

```js
console.log(map.get('user1')); // { name: 'David', age: 30 }
console.log(map.get('user2')); // { name: 'Mike', age: 40 }
```

_You can find other useful methods provided by `Map` in the book._

> A very popular but not so easy programming challenge related to `Map` is frequently asked in the first round of coding interview to filter out candidates which you will find in the book with the explanation of code.

## Closing points

The [Mastering Modern JavaScript](https://modernjavascript.yogeshchavan.dev/) book covers everything you need to know to become an expert in Modern JavaScript skills.

You will get Guaranteed up to date information with each new release of ESNext.

**With the one-time purchase, you will receive the updated copy of the book for free for each new release of ESNext.**

This book contains all the concepts that are the pre-requisite for learning React and are essential to become an expert in Modern JavaScript and better at React.

This is the only guide you need, to face any JavaScript/React interview where ES6+ features are must-know things to crack the interview.

**Only last few hours are left with this limited time 43% discount for the book. So grab it now.**

**There will never be such a huge discount again for this book.**

Get your copy of the book by clicking the link below.

**[Mastering Modern JavaScript](https://modernjavascript.yogeshchavan.dev/)**

Happy Learning!

**Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox [here](https://yogeshchavan.dev/).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)