Array Methods in JavaScript

Last Updated: 25th April, 2024

Introduction

Arrays are an essential data structure in programming, and they allow developers to store and manipulate collections of values. JavaScript provides a variety of array methods that make it easy to perform operations on arrays.

Array methods are built-in functions in JavaScript that allow developers to perform operations on arrays. These methods are essential for manipulating arrays because they provide a simple and efficient way to modify, filter, and search through arrays.

One of the main benefits of using array methods is that they can help improve the performance of your code. Instead of writing complex loops and conditional statements to perform operations on arrays, you can use array methods that are optimized for these tasks. This can make your code more readable, maintainable, and efficient.

Common use cases for array methods

There are countless use cases for array methods, but here are a few common examples:

• Filtering: Array methods like filter() and find() allow you to search through an array and return elements that meet certain criteria. For example, you might use filter() to find all the items in a shopping cart that are on sale.
• Sorting: Array methods like sort() and reverse() allow you to rearrange the order of elements in an array. For example, you might use sort() to alphabetize a list of names.
• Mapping: Array methods like map() and reduce() allow you to transform the elements in an array. For example, you might use map() to convert a list of temperatures from Fahrenheit to Celsius.
• Aggregating: Array methods like reduce() and some() allow you to calculate statistics or perform checks on an array. For example, you might use reduce() to calculate the total price of all the items in a shopping cart.

Mutating Methods in JavaScript

Mutating methods in JavaScript are methods that modify the original array or object they are called upon. These methods change the underlying data structure, rather than creating a new one.

For example, the push() method adds one or more elements to the end of an array, increasing its length. The pop() method removes the last element of an array, decreasing its length. Similarly, the shift() method removes the first element of an array, and the unshift() method adds one or more elements to the beginning of an array, both also affecting the array's length.

It's important to note that when using mutating methods, the changes are applied directly to the original array. This means that any variables or references that point to the original array will reflect the changes made by these methods.

Using Mutating Methods to Add or Remove Elements from an Array

Let's explore how to use mutating methods to add or remove elements from an array.

push(): The push() method is used to add one or more elements to the end of an array. For example, consider the following code:

Loading...
 Run

In this code, we declare an array called arr with three elements. We then use the push() method to add the number 4 to the end of the array. When we log the array to the console, we can see that the push() method has modified the original array by adding the number 4 to the end.

pop(): The pop() method is used to remove the last element of an array. For example:

Loading...
 Run

In this code, we declare an array called arr with three elements. We then use the pop() method to remove the last element of the array. When we log the array to the console, we can see that the pop() method has modified the original array by removing the number 3 from the end.

shift(): The shift() method is used to remove the first element of an array. For example:

Loading...
 Run

In this code, we declare an array called arr with three elements. We then use the shift() method to remove the first element of the array. When we log the array to the console, we can see that the shift() method has modified the original array by removing the number 1 from the beginning.

unshift(): The unshift() method is used to add one or more elements to the beginning of an array. For example:

Loading...
 Run

In this code, we declare an array called arr with three elements. We then use the unshift() method to add the number 0 to the beginning of the array. When we log the array to the console, we can see that the unshift() method has modified the original array by adding the number 0 to the beginning.

splice(): This method can be used to add or remove elements from an array. It modifies the original array and returns an array of the removed elements.

Loading...
 Run

In this example, the splice() method is used twice on the fruits array. The first call to splice() removes two elements starting from index 2 ('cherry' and 'date'), and returns an array containing the removed elements (['cherry', 'date']). The second call to splice() inserts two new elements ('kiwi' and 'lemon') at index 2, without removing any elements. The resulting fruits array contains the original elements ('apple', 'banana', and 'elderberry'), along with the two new elements.

Note that the splice() method modifies the original array in place, rather than creating a new array. If you need to create a new array with some elements removed or added, you can use non-mutating array methods like slice() or concat().

While it is sometimes necessary to modify an array directly, it is often preferable to use non-mutating methods to create a new array based on the original array without modifying it.

Non-Mutating Methods in JavaScript

Non-mutating methods are functions that do not modify the original array, but instead return a new array. These methods are particularly useful when you want to perform an operation on an array without changing its contents. Some common non-mutating methods in JavaScript include:

1. slice(): This method creates a new array that contains a copy of a portion of the original array. The original array is not modified.
2. concat(): This method combines two or more arrays into a new array. The original arrays are not modified.
3. map(): This method creates a new array by calling a function on each element of the original array. The original array is not modified.

Examples

slice(): To create a new array that contains a copy of a portion of the original array, you can use the slice() method. For example:

Loading...
 Run

In this example, we are creating a new array that contains a copy of the elements between index 2 and index 4 of the original array.

concat(): To create a new array by combining two or more arrays, you can use the concat() method. For example:

Loading...
 Run

In this example, we are creating a new array that contains the elements of array1 followed by the elements of array2.

map(): To create a new array by applying a function to each element of the original array, you can use the map() method. For example:

Loading...
 Run

In this example, we are creating a new array that contains the result of multiplying each element of the original array by 2.

Difference between these Mutating and Non- mutating methods.

The key difference between non-mutating methods and mutating methods is that non-mutating methods do not modify the original array, while mutating methods do. Mutating methods directly modify the original array, which can have unintended consequences if you are not careful. For example, the push() method adds an element to the end of an array and modifies the original array directly. This means that any other code that references the original array will see the change.

In contrast, non-mutating methods like slice(), concat(), and map() do not modify the original array. Instead, they return a new array that contains the result of the operation. This means that any other code that references the original array will not be affected by the operation.

Another key difference between these methods is their purpose. Non-mutating methods are typically used when you want to perform an operation on an array without changing its contents. For example, if you want to create a copy of a portion of an array, you would use the slice() method. If you want to create a new array by combining two or more arrays, you would use the concat() method. If you want to create a new array by applying a function to each element of the original array, you would use the map() method.

Mutating methods, on the other hand, are typically used when you want to add, remove, or modify elements in an array directly. For example, if you want to add an element to the end of an array, you would use the push() method. If you want to remove an element from an array, you would use the splice() method. If you want to sort the elements of an array, you would use the sort() method.

Conclusion

JavaScript provides a variety of array methods that make it easy to perform operations on arrays. These methods can help improve the performance of your code, make it more readable, maintainable, and efficient. These methods are essential for manipulating arrays because they provide a simple and efficient way to modify, filter, and search through arrays. Common use cases for array methods include filtering, sorting, mapping, and aggregating.