Upgrade your JavaScript Array knowledge

Upgrade your JavaScript Array Knowledge

Everyday in JavaScript new features are added. Sometimes we are so busy with our daily coding routine that we use older tricks to solve some specific problem without knowing that there is a new method or feature added to new version of JavaScript. In this article I will take to some of these interesting methods that has been added to Array in newer version of JavaScript.

1. Array.prototype.isArray

How do you check that a given object is Array in JavaScript ? This is one of the questions usually asked in interviews. Usually if you are an unseasoned JavaScript developer, first thing that comes into mind is typeof operator. But typeof will return Object for Array.

let a = [1];

typeof a//Returns 'object'

So typeof does not work. So what will?

Solution to this problem is to use Object.prototype.toString

let arr = [1, 2, 3];let obj = {name: 'Akash', age: '22'};Object.prototype.toString.call(arr);// Returns '[object Array]'Object.prototype.toString.call(obj);// Returns '[object Object]'

So this is the workaround of this problem. Now in newer JavaScript we have isArray method.

let arr = [1, 2, 3];let obj = {name: 'Akash', age: '22'};Array.isArray(arr)// Returns trueArray.isArray(obj);// Returns false

isArray is supported by all the major browser. You can see below :

For the browser is it not supported you can use polyfill. You can find polyfill here.

2. Array.prototype.includes

When we have to find whether a given item exist in a particular array or not, we usually go for indexOf operator and then check that result is greater than -1.

let arr = [1,2,3,4];

let item = 4;

let result = arr.indexOf(item) > -1 ? 'exist' : 'do not exist';

console.log(result)//Result exist

But now we can use includes which will return trueif item exists in array and false if item does not exists.

let arr = [1,2,3,4];

let item = 4;

console.log(arr.includes(item));// Returns true

console.log(arr.includes(5));// Return false

You can check the browser compatibility here:

Note that, this is not supported by IE. So You can use polyfill for this if you want to use it in IE. Polyfill can be found here.

3. Array.prototype.find

This is a very helpful method if you have an array of objects and your objective is to find one object out of collection that satisfy a particular condition.

Sometimes coders use filter to find the object based on condition but as we all know filter method returns an array of filtered items not item inside the array. So every time we need to take first item from that filtered array.

let users = [{  name: 'Mayank'}, {  name: 'Prashant'}, {  name: 'Pankaj'}, {  name: 'Nikhil'}];

// find a user named Pankaj

// solution via filter

let filteredUser = users.filter(user => user.name === 'Pankaj');

console.log('fileterd user array => ', filteredUser);

// Result [{ name: "Pankaj" }]

// so to get the user we need to do filteredUser[0]

console.log('Filtered user => ', filteredUser[0]);

// Result { name: "Pankaj" }

But there is a better solution to this problem where we can get directly the user by using find method.

let users = [{  name: 'Mayank'}, {  name: 'Prashant'}, {  name: 'Pankaj'}, {  name: 'Nikhil'}];

// find a user named Pankaj

// solution via find

let filteredUser = users.find(user => user.name === 'Pankaj');

console.log('Filtered user => ', filteredUser);

// Result { name: "Pankaj" }

Browser support for this can been seen here :

As you can see it is not supported by IE so if you want to use this method you can find the polyfill here.

5. Array.prototype.flat

Have you ever encounter an array where the element of array is also array and you want all element into a single flat array? How do you solved that problem? I guess you might have used reduce and concat . Well that is a great way to solve this issue. But now we have flat operator which can do it for us till the depth you pass. If you do not pass the depth it will take default value of 1.

let arr = [1,2, [3,4,5]];

let result = arr.flat();

console.log(result);//Result [1,2,3,4,5]

Let us consider an example of more deeply nested array.

let arr = [1,2, [3,4,5,[6,7,8,9,10]]];

let result = arr.flat();

console.log(result);//Result [1,2,3,4,5,[6,7,8,9,10]]

// if we know the depth as we know here that is 2. We can pass it

let flatArray = arr.flat(2);

console.log(flatArray);//Result [1,2,3,4,5,6,7,8,9,10]

Now I know what you are thinking, what if we do not know the depth? If we do not know the depth we can always go back to reduce and concat solution

let arr = [1,2, [3,4,5,[6,7,8,9,10]]];

function flattenDeep(arr1) {   return arr1.reduce((acc, val) => {       return Array.isArray(val) ?            acc.concat(flattenDeep(val)) :           acc.concat(val);   }, []);}

console.log(flattenDeep(arr))//Result [1,2,3,4,5,6,7,8,9,10]

There are couple of other solution to this problem if you do not want a recursive solution. You can find it here.

Browser support for this method is as follows:

You can use the polyfill for this method which can be found here.

These are the some JavaScript methods which I find useful.

Kindly suggest any improvements and do share, subscribe and clap. Thanks :)

Upgrade your JavaScript Array knowledge was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.