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 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.
Happy Learning!
Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.