A JavaScript Array Method Cheat Sheet

Introduction

In programming, an array is a collection of elements, items, objects, etc. The array data structure is widely used in all programming languages as a basic element.

In this article, I would like to show you some secret methods for working with JavaScript arrays, and how you can dodge some array-related bugs.

Just your regular objects

In JavaScript, there are only 6 defined data types – the primitives (boolean, number, string, null, undefined) and object (the only reference type). Arrays do not belong to this list because they are objects as well. This is a common confusion among developers who assume that arrays are a special data type in JavaScript.

An array is an ordered list of values with the following characteristics:

• holds values of mixed types, e.g. an array can store elements in number, string, and boolean type
• is dynamic-sized and auto-growing, which means you don’t have to specify the array size upfront

Now let’s dive into our array method cheat sheet. Here is our code example:

Note: We will use DATA for all the following examples

The array method cheat sheet

The some() method

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn’t modify the array.

If we want to check the array has at least one element that passes the test function, we should use the some() method:

The every() method

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

If we want to check the array has all elements that passed our test function, we should use the every() method. Or we can use NOT with some. Let’s see the following example:

The find() method

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

From the some() method - we will check the array has an element that passes our test function, and if we want to get this element, we can use find():

The filter() method

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

The find() method will get the first element it meets. So if we want to get all elements that pass our test function, we should use filter()

The map() method

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Sometime, we need to transform our array to another array with new value, or just add more fields into each object inside array. We should use map() to avoid modify the original array:

The reduce() method

The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, to pass in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no “return value of the previous calculation”. If supplied, an initial value may be used in its place. Otherwise, the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of 0).

Instead of using for to loop each element and calculate with one variable, we can use reduce() and pass the calculation function to get the same result:

Bugs be at bay, array is here to save the day

Here are some of the array-based solutions you can implement to save yourself from potential code smells.

Use some() for better code clarity and code conciseness

The code above works fine, however, we can use some() to handle this logic for better clarity. With just less than 3 lines of code, and the logic is clearer:

Here is another code example:

If we don’t use result from find(), or filter() and just want to check whether the array has our valid element, some() is a better option. The result will return in boolean (true OR false).

Use map() to shorten the code

In this case, we can use map() instead:

map() is similar to the forEach() as it executes the provided function once for each element in an array. But unlike the forEach() method, it creates a new array with the results of calling a function for every array element. In this case, we don’t need to define array ids first, all we need is to map from item to item.id with item.id is the data we want.

Closing

And that is it for our JS Array cheat sheet. We hope that this article has provided you with some more clarity on this subject. If you want to learn more about different functions, check out these two articles:

1. The JavaScript Array Handbook – JS Array Methods Explained with Examples
2. Array

Until next time, happy coding, folks!