Insanely Useful JavaScript Array Methods

A step towards better coding in JavaScript

Yogesh Chavan
Nov 25, 2019 · 7 min read
Photo by Max Duzij on Unsplash

With the start of ES6, there are many improvements added in the javascript language to improve the javascript coding standard and performance.

Today, we will see list of array methods which are very helpful and will improve your coding skills. Let’s dive into it.


  1. Array.of :

The Array.of has following syntax

There are two ways of declaring array in javascript, one with the array literal notation [] and other is using new keyword

The above code will create an array with two values 5 and 10. But if we pass only one value like

This will create an array of length 5 whose values are set to undefined which is not what is expected. But the new Array() syntax is useful in some cases so Array.of method fixes this issue.
Now,

This will create a numbers array containing the value 5 and not 5 undefined values which was the case with new Array(5).

Obviously, we can pass multiple values to the Array.of method like


2. Array.from :

The Array.from has following syntax

The method creates a new instance of array from an array-like or iterable object.

Example 1:

Take a look at the below code

Example 2:

Suppose, you want to iterate through all the scripts included in the page and print the src attribute value, you can use the document.scripts property which returns the list of the script elements in the document. But the returned object is a HTMLCollection which looks like array but its not actual array.

So when we try to apply any array method like forEach or map on it, it gives error. In order to convert such iterable objects like HTMLCollection or NodeList (which is returned when we use document.querySelectorAll method), we can use Array.from method.

Codepen Demo: https://codepen.io/myogeshchavan97/pen/rNNgMEj?editors=1012


3. Array.find :

The Array.find has following syntax

The method returns the value of the first element in the array that satisfies the provided test condition.

The find method takes a callback function as the first argument and execute the callback function for every element of the array. Each array element value is passed as the first parameter to callback function.

Suppose, we have list of employees

and we want to get the employee reocord whose name is John. In this case we can use array.find method

Even though, there is “John Carte” in the list, find method will stop when it finds first match. So it will not return the the object with name “John Carte”

Codepen Demo: https://codepen.io/myogeshchavan97/pen/wvvbPLm?editors=0011


4. Array.findIndex :

The Array.findIndex has following syntax

The method returns the index of the first element in the array that satisfies the provided test condition. Otherwise, it returns -1, indicating that no element passed the test.

Here we get the output as 1 which is the index of the first object with name John.

Codepen Demo: https://codepen.io/myogeshchavan97/pen/WNNBdxY?editors=0012


5. Array.filter :

The Array.filter has following syntax

The method creates a new array with all the elements that satisfies the provided test condition.

The filter method also takes a callback function as the first argument and execute the callback function for every element of the array. Each array element value is passed as the first parameter to callback function.

The filter method returns an array with all the elements which matches the test condition

Codepen Demo: https://codepen.io/myogeshchavan97/pen/ZEENvEd?editors=0011

Note that, filter method always returns the array, If no element passed the test condition, an empty array will be returned.


6. Array.fill :

The Array.fill has following syntax

The method fills (modifies) all the elements of an array from a start index (default zero) to an end index (default array length) with a static value.

The fill method is very useful, if we want to create an array pre-filled with some specific value.

Consider, we are making a shopping list and we have list of 5 items on the page and we want to store the state of the checkbox as checked or not. To do this, we can initialize an array which is of same length as the number of checkboxes and set its initial value to false.

So when we check any checkbox, we set that value to true.

To make it possible, we can use array.fill method as below

This will create an array of 5 elements with value set to false by default like

CodeSandbox (Using React): https://codesandbox.io/s/gracious-frost-sz5d9

Codepen (Using Jquery): https://codepen.io/myogeshchavan97/pen/Rwwmxgx?editors=1011


7. Array.forEach :

The Array.forEach has following syntax

The method executes a provided function once for every element in the array

Note that, forEach is only used to loop through the array and perform some processing or logging, it does not return any value, even if you explicitly return value from the callback function so the returnedValue is coming as undefined.

Codepen Demo: https://codepen.io/myogeshchavan97/pen/rNNgdBK?editors=0012


8. Array.map :

The Array.map has following syntax

The method executes a provided function once for every element in the array and returns a new transformed array

Codepen Demo: https://codepen.io/myogeshchavan97/pen/gOOJewM?editors=0012


9. Array.every :

The Array.every has following syntax

The method tests whether all elements in the array pass the provided test condition and returns a boolean true or false value.

Consider, you have a registration form, and you want to check if all of the required fields are entered or not before submitting the form. You can use the every method to check for each field value easily.

Codepen Demo: https://codepen.io/myogeshchavan97/pen/QWWRjEa?editors=1011


10. Array.some :

The Array.some has following syntax

The method tests whether at least one element in the array passes the test condition given by the provided function and returns a boolean true or false value.

It returns true, once it finds the first match and returns false if there is no match.

There are some useful scenarios of using this method.

Scenario 1:

Consider, we have list of employees and we want check if particular employee is present in that array or not and also get the index position of that employee if employee is found.

So instead of using find and findIndex methods separately, we can use some method to do both of these.

Codepen Demo: https://codepen.io/myogeshchavan97/pen/KKKLoZR?editors=0012

Scenario 2:

The array forEach and map method runs from start to finish until all of the elements of the array are not processed. There is no way of stopping the forEach or map method or breaking out of the loop, once particular element is found.

In such cases, we can use the array some method. The map, forEach and some method takes same parameters in the callback function.

1. First parameter is actual value

2. Second parameter is the index

3. Third parameter is the actual array

some() method stop looping through the array once it finds a particular match as can be seen in the above codepen example of scenario 1.


11. Array.reduce :

The Array.reduce has following syntax

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

The output of 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 its always a single value.

Suppose, you have an array of objects with x and y coordinates and you want to get the sum of x coordinates, you can use the reduce method.

Codepen Demo: https://codepen.io/myogeshchavan97/pen/Baaexjx?editors=0012

Hope, these methods will be helpful for you to improve your code.

Want to become an expert in Javascript? Download your free copy HERE

JavaScript in Plain English

Learn the web's most important programming language.

Yogesh Chavan

Written by

Full Stack Developer | Javascript | React | Nodejs. Subscribe to get weekly updates directly in your inbox https://subscribe-user.herokuapp.com/

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade