10 Most array methods in JavaScript you must know

13 January, 2023

Contributors

Wyarej Ali

@wyarejali

1. Introduction

JavaScript is a versatile programming language that can be used for a variety of purposes, including web development and data manipulation. One of the most important features of JavaScript is its ability to work with arrays, which are collections of data that can be manipulated in a variety of ways. In this article, we will explore the top 10 array methods in JavaScript, which will allow you to work with arrays more efficiently and effectively.

These methods include popular functions like "map," "filter," and "reduce," as well as lesser-known but powerful methods like "find" and "some." Whether you are a beginner or an experienced developer, understanding these methods will help you take your JavaScript skills to the next level.

In this article, we are going to explain

filter()

map()

forEach()

splice()

reduce()

find()

flat()

concat()

sort()

10.

findIndex()

2. filter()

The `filter()` method is used to create a new array with all elements that pass a certain test implemented by a provided function. The function is called for each element in the original array, and if it returns `true`, the element is included in the new array.

Here is an example:

In this example, the `filter()` method is called on the `numbers` array and a function is passed as an argument. The function tests each element in the array to see if it is divisible by 2 with no remainder (i.e., if it is even). If the element is even, the function returns `true` and the element is included in the new `evenNumbers` array. The final result in the `evenNumbers` array contains only the even numbers from the original `numbers` array.

2. map()

The `map()` method is used to create a new array with the results of calling a provided function on every element in the original array. The new array will have the same number of elements as the original array. The provided function is called for each element in the original array, and the returned value is used to construct the new array.

Here is an example:

In this example, the `map()` method is called on the `numbers` array and a function is passed as an argument. The function takes each element in the array, multiplies it by 2, and returns the result. The returned value is used to construct the new `doubleNumbers` array. The final result is that the `doubleNumbers` array contains the double of each element of the original `number` array.

`map()` is commonly used to transform an array of data into a new array with a different shape, format, or data type. It allows you to apply a single function to all elements in an array, allowing for easy and efficient data manipulation.

3. forEach()

The `forEach()` method is used to execute a provided function once for each element in an array in ascending order. It does not return a new array and does not change the original array.

Here is an example:

In this example, the `forEach()` method is called on the `number` array and a function is passed as an argument. The function takes each element in the array, and logs it to the console. The function is called for each element in the array and performs the same action on each element.

`forEach()` is commonly used to perform an action or operation on each element in an array, without the need to create a new array or change the original array. This allows you to iterate over the elements in an array and perform a specific action on each one, without the need to create a new array or change the original array.

It is worth noting that, `forEach()` does not stop executing when it encounters a return statement or an exception, it will continue to execute the function for the remaining elements in the array.

4. splice()

The `splice()` method is used to change the contents of an array by adding or removing elements. It can be used to add new items to an array, remove items from an array, or both.

The `splice()` method takes three arguments: the index at which to start changing the array, the number of elements to remove, and the elements to add.

Here is an example:

In this example, the `splice()` method is called on the `number` array. The first argument is 2, which is the index at which to start changing the array. The second argument is 3, which is the number of elements to remove. The third argument is 8, 9, 10 which are the elements to add.

The result of this call is that the array `number` has 3 elements removed, starting from index 2, and added 3 new elements 8, 9, 10.

The `splice()` method modifies the original array, it is commonly used to add or remove elements from an array, and it can also be used to copy parts of an array. It is also important to mention that the `splice()` method returns an array containing the removed elements.

5. reduce()

The `reduce()` method is used to apply a function to each element in an array, in order to reduce the array to a single value. The function takes two arguments: an accumulator, which accumulates the callback's return values, and the current value, which is the current element being processed in the array.

The `reduce()`method can be used to perform a wide variety of operations on an array, such as summing the elements, finding the minimum or maximum value, or even flattening an array of arrays.

Here is an example:

In this example, the `reduce()` method is called on the `number` array and a function is passed as an argument. The function takes two arguments: an accumulator and the current value. The accumulator starts with the initial value of the first element in the array, and the currentValue is the second element in the array.

The function then adds the accumulator and the current value, and the result is stored in the accumulator. This process is repeated for each element in the array, and the final result is the sum of all the elements in the array.

The `reduce()` method is useful for performing operations on an array that return a single value, such as summing or averaging the elements, finding the minimum or maximum value, or flattening an array of arrays. It allows you to iterate over the elements in an array and perform a specific action on each one, and then combine the results in a single value.

6. find()

In JavaScript, the `find()` method is used to return the value of the first element in an array that satisfies a provided testing function. It returns the value of the first element in the array that passes the test, or `undefined` if no elements pass the test.

Here is an example:

In this example, the `find()` method is called on the `numbers` array and a function is passed as an argument. The function tests each element in the array to see if it is divisible by 2 with no remainder (i.e., if it is even). The first element that returns `true` is 2, and it is returned by the `find()` method.

The `find()` method is useful when you want to find a single element that meets a certain condition in an array, without having to iterate through the entire array. It's a useful method for searching for a single element that meets a certain condition, without having to iterate over the entire array.

It's worth noting that, `find()` method stops executing the callback function, as soon as it finds the first element that passes the test, it doesn't check any other elements even if they pass the test.

7. flat()

In JavaScript, the `flat()` method is used to create a new array with all sub-array elements concatenated into it recursively up to the specified depth. This method can flatten an array of arrays into a single, one-dimensional array.

The `flat()` method is introduced in ECMAScript 2019, so it is not available in all JavaScript environments.

Here is an example:

In this example, the `flat()` method is called on the `nestedArray` which is a 2-dimensional array, with no arguments passed in. The result is a new array that concatenates all the sub-arrays into a single one-dimensional array.

You can also specify the depth of flattening, for example:

In this example, the `flat()` method is called on the `nestedArray` which is a multidimensional array, with the argument passed in as 2. The result is a new array that concatenates all the sub-arrays into a single one-dimensional array up to 2 levels deep.

The `flat()` method can be very useful when working with multidimensional arrays and needing to flatten them into a single, one-dimensional array, it saves time and lines of code compared to manual flattening methods.

8. concat()

In JavaScript, the `concat()` method is used to merge two or more arrays together into a new array. It creates a new array that includes values from the original arrays, and does not modify the original arrays.

Here is an example:

In this example, the `concat()` method is called on the `numbers1` array, and `numbers2` and `numbers3` arrays are passed as arguments. The result is a new array that includes all the values from the original arrays in the order they were passed as arguments.

You can also pass individual elements as well along with arrays, for example:

In this example, the `concat()` method is called on the `numbers1` array, and individual elements 4, [5,6], 7, 8 are passed as arguments. The result is a new array that includes all the values from the original arrays along with the individual elements in the order they were passed as arguments.

The `concat()` method can be useful when you want to merge multiple arrays or individual elements together into a single, new array without modifying the original arrays.

9. sort()

In JavaScript, the `sort()` method is used to sort the elements of an array in place and returns the sorted array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

Here is an examp

In this example, the `sort()` method is called on the `numbers` array and no arguments are passed. The result is the array `numbers` sorted in ascending order.

You can also pass a comparison function as an argument to sort the array in a custom order, for example:

In this example, the `sort()` method is called on the `words` array and a comparison function is passed as an argument. The comparison function compares the length of two elements, if the length of the first element is less than the second, it returns a negative value, if the length of the first element is equal to the second, it returns zero and if the length of the first element is greater than the second, it returns a positive value.

It's worth noting that the `sort()` method modifies the original array, it doesn't create a new one.

The `sort()` method can be useful when you want to sort the elements of an array, it can be used to sort arrays of numbers, strings, or any other type of data. It's a powerful tool for sorting arrays in place in a variety of ways, either in ascending or descending order, or custom order.

10. indexOf()

The `indexOf()` method is used to find the first occurrence of an element in an array and returns its index. If the element is not found in the array, it returns -1.

Here is an example:

In this example, the `indexOf()` method is called on the `numbers` array and the element 7 is passed as an argument. The result is 4, which is the index of the first occurrence of the element 7 in the array.

You can also pass a second argument to the `indexOf()` method to specify the starting position to search from:

In this example, the `indexOf()` method is called on the `numbers` array, the element 7 is passed as an argument, and 5 is passed as the second argument. The result is 9, which is the index of the first occurrence of the element 7 in the array, starting from position 5.

The `indexOf()` method can be useful when you want to find the first occurrence of an element in an array and get its position, it can be helpful when you're working with arrays and need to check if an element is present or not.

Conclusion

Understanding the top 10 array methods in JavaScript is essential for working with arrays effectively. By mastering these methods, you can manipulate arrays in a variety of ways, from sorting and reversing elements to adding and removing elements. The knowledge of these methods will make you confident in your ability to work with arrays in JavaScript, which will open up a whole new world of possibilities for your programming projects. It's always a good idea to continue exploring more array methods as well as other features of JavaScript to enhance your skills. Remember, practice makes perfect, so don't be afraid to experiment with these methods and see what you can create.

Happy learning. :)

10 Most array methods in JavaScript you must know

1. Introduction

2. filter()

2. map()

3. forEach()

4. splice()

5. reduce()

6. find()

7. flat()

8. concat()

9. sort()

10. indexOf()

Conclusion

More Articles