Essential JavaScript Array Methods for Beginners
By: Senada Kadric
Tags: Web Development, JavaScript, Javascript Development, Arrays, Array Methods

Storing data in a list is a common task that is done in every programming language. The ability to manipulate that data is also essential knowledge as a programmer. In JavaScript and many other languages, lists of data are stored in arrays. Luckily for us, arrays have built-in methods that can make manipulation of their stored data much easier if we know how to use them properly. This blog will walk you through how to use some of the most essential JavaScript array methods.

.every()

This method will return a boolean value, returning true only if EVERY element in the array satisfies the condition that you provide within the callback function.

The syntax for this method is: array.every(callback function => condition);

In the code above, you can see a simple application of this method. First, we initialize the variable “arr” to equal an array containing 3 elements, [1, 2, 3]. Next, we call the .every() method on that array, providing a callback function (using the JS arrow function) and a condition of “ele > 1”. The method will iterate through every element in the array, and for each element it will check if it satisfies the provided condition. Since the first element of this array is not greater than one, we get a return value of false. But if we change the condition to check whether each element (or “ele”, in this case) is greater than OR equal to 1, we can see that calling the .every() method will return true! This is a straightforward example, but having a good foundation in how to properly utilize this method will enhance your productivity as a developer.

.some()

Unlike the .every() method which only returns true if every element satisfies the provided condition, .some() will return true if ANY of the elements satisfy it.

The syntax for this method is: array.some(callback function => condition);

The code snippet above shows an example of the utilization of this method, where arr.some(ele => ele > 5) will return false because none of the elements in the array are greater than 5, and arr.some(ele => ele > 2) returns true because one of the elements (3) is greater than 2. In contrast, .every() would return false in both cases.

.filter()

Sometimes instead of returning a boolean, you want to return the elements themselves that meet a particular condition. This is where .filter() comes in handy. It returns a new array containing the elements of the original array which satisfied the condition provided.

The syntax for this method is: array.filter(callback function => condition);

Looking at the above code, .filter() iterates through every element of the array “arr” and checks whether that element is greater than 3. If it is, .filter() will take that element and store it in a separate array which will be returned once it has completed iterating. To be able to use this new array for further manipulation, you can store it in a variable like so:

.join()

Another method that is useful to be familiar with for JavaScript arrays is .join(). This method converts all of the elements in an array to a singular string, joined together by the separator that you provide.

The syntax for this method is: array.join(separator);

In the example above, we have two arrays that we call the .join() method on. For “arr” we provide a separator of a space “ ” and for “languages” we provide a comma followed by a space, although you could have provided any separator that you wanted, or no separator at all. You can save the resulting string into a variable, interpolate it, or manipulate it in any way you want/need afterward.

.reverse()

Another important JS array method is .reverse(). This method simply reverses the order of the elements in an array. The first becomes the last, the last becomes the first, and so on and so forth.

The syntax for this method is: array.reverse();

The code snippet above shows two arrays, one containing elements that are strings and the other containing integers, being reversed by the .reverse() method. This method will destructively reverse the arrays contents, meaning the original array will be modified.

Having knowledge of these methods, as well as being able to refer to the documentation (such as MDN) will increase your programming power and efficiency significantly. There are definitely more crucial array methods that you should familiarize yourself with, a great blog that discusses more of them can be found here. I hope you found this blog informative, good luck on your programming journey, remember to stay curious!