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 book. There is a lot more covered in the actual book.

Check out my previous post 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.

// 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:

// 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:

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:

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:

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.

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:

const map = new Map();

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

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:

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.

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

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

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.

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 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 the 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

Happy Learning!

Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.