Top JavaScript Array Methods Explained

JavaScript is one of the most popular programming languages. Originally it was used as a scripting language, JavaScript is now used in a wide range of industries, such as web development, app development, machine learning, robotics, augmented reality and virtual reality, 3D modelling, game development, and more. 

According to the Stack Overflow survey 2023, JavaScript emerges as the most commonly used programming language. This powerful language encompasses many features and capabilities, spanning object-oriented programming, event-driven programming, and functional programming.

In this article, we’ll delve into some of the JavaScript array methods to make your life easier as a JavaScript developer. You will learn all the commonly used array methods, data handling, and more.

So let’s get started! 

Array forEach() method

The forEach() method is used to iterate over an array of elements. It accepts a callback function that executes for each array element and is a neat approach to array traversal.

Array map() method

The map() method in JavaScript is used for creating a new array by applying a provided function to each element in the original array.

Array filter() method

The filter() method in JavaScript is another array method that allows you to create a new array containing only elements that satisfy a certain condition. It doesn’t modify the original array; instead, it returns a new array that includes only the elements for which the provided function returns true.

Array reduce() Method

The reduce() method in JavaScript is an array method used to accumulate or reduce the elements of an array to a single value. It iterates over each element of the array, applying a callback function that you provide, and accumulates the results.

Array find() method

The find() method in JavaScript is an array method that is used to return the first element in an array that satisfies a given condition. It stops iterating once the first matching element is found.

Array some() method

The some() method in JavaScript is an array method that tests whether at least one element in the array passes a provided function’s test. It returns a boolean value indicating whether the condition is met by any of the array elements.

Array every() method

The every() method in JavaScript is an array method that tests whether all elements in the array pass a provided function’s test. It returns a boolean value indicating whether the specified condition is met by every element in the array.

Array sort() method

The sort() method in JavaScript is used to sort the elements of an array. By default, the sort method converts elements to strings and compares them based on their UTF-16 code units. However, you can provide a custom comparison function to determine the sorting order.

To perform custom sorting, you can provide a comparison function as an argument to the sort method. The function should return a negative, zero, or positive value, indicating the order of the elements.

Array indexOf() method

The indexOf() method in JavaScript is used to find the index of the first occurrence of a specified element in an array. If the element is not found in the array, it returns -1. You can provide a second parameter to indexOf to specify the starting index for the search.

Array lastIndexOf() method

The lastIndexOf() method in JavaScript is similar to indexOf, but it searches for the last occurrence of a specified element in an array, rather than the first. If the element is not found, it returns -1.

Array splice() method

The splice() method in JavaScript is used to change the contents of an array by removing or replacing existing elements and/or adding new elements in place.

Syntax

array.splice(startIndex, deleteCount, item1, item2, …);

• startIndex: The index at which to start changing the array. If negative, it will begin from the end of the array.
• deleteCount: The number of elements to remove from the array, starting at the startIndex. If set to 0, no elements are removed.
• item1, item2, …: elements to add to the array starting at the start index.

Array slice() method

The slice() method in JavaScript is used to extract a portion of an array and returns a new array containing the selected elements. It does not modify the original array. The slice method takes two arguments: the start index and the end index (exclusive), specifying the range of elements to be included in the new array.

Syntax:

array.slice(startIndex, endIndex);

• startIndex: The index at which to begin extraction.
• endIndex: The index before which to stop extraction. The element at this index will not be included in the new array.

Array concat() method

The concat() method in JavaScript is used to concatenate two or more arrays, creating a new array without modifying the existing arrays. It returns a new array that combines the elements of the arrays on which it is called.

Array reverse() method

The reverse() method in JavaScript is used to reverse the order of elements in an array. It modifies the original array in place, and no new array is created.

Keep in mind that reverse() is an in-place operation, meaning it directly modifies the array it is called on. If you need a reversed version without modifying the original array, creating a copy is a common approach.

Array includes() method

The includes() method in JavaScript is used to check whether an array contains a specific element. It returns a boolean value (true or `false) indicating whether the specified element is found in the array.

Array copyWithin() method

The copyWithin() method in JavaScript is used to copy a sequence of elements within an array to another location within the same array. It modifies the original array in place and does not create a new array. 

Syntax

array.copyWithin(target, start, end);

• target: The index at which to copy the sequence to.
• start: The index from which to start copying elements.
• end (optional): The index up to which to copy elements. If omitted, all elements from start to the end of the array will be copied.

Array toString() method

The toString() method in JavaScript is a method available on all objects, including arrays. When called on an array, it returns a string representing the array and its elements. The elements are converted to strings and separated by commas. The original array is not modified.

Array join() method

The join() method in JavaScript is used to join all elements of an array into a single string. It takes an optional parameter, the “separator,” which specifies how the array elements should be separated in the resulting string. If no separator is provided, a comma (,) is used as the default separator.

Array flat() method

The flat() method in JavaScript is used to flatten a nested array by removing sub-array nesting levels. It creates a new array with all the elements of the original array and its sub-arrays, recursively flattened to a specified depth. If no depth is provided, the default depth is 1.

array.flat([depth]);

• depth (optional): The depth level specifying how deep nested arrays should be flattened. The default value is 1.

Array pop() method

The pop() method in JavaScript is used to remove the last element from an array and returns that element. It also modifies the original array by removing the last element in place. If the array is empty, pop returns undefined, and the array remains unchanged.

Array push() method

The push() method in JavaScript is used to add one or more elements to the end of an array. It modifies the original array and returns the new length of the array after the elements have been added.

Array shift() method

The shift() method is used to remove the first element from an array and returns that removed element. It also modifies the original array by shifting all other elements to a lower index. If the array is empty, shift returns undefined, and the array remains unchanged.

Array unshift() method

The unshift() method in JavaScript is used to add one or more elements to the beginning of an array. It modifies the original array and returns the new length of the array after the elements have been added.

Syntax

array.unshift(element1, element2, …, elementN);

Array fill() method

The fill() method in JavaScript is used to fill all the elements of an array with a static value. It modifies the original array in place and returns the modified array.

Syntax

array.fill(value[, start[, end]]);

• value: The value to fill the array with.
• start (optional): The index at which to start filling. If omitted, the default is 0.
• end (optional): The index at which to stop filling (exclusive). If omitted, the default is the length of the array.

Wrapping it Up

Thank you for reading our blog! We’ve covered a bunch of important JavaScript array methods in detail, giving you a solid understanding of how to work with arrays effectively. 

From basic operations like adding and removing elements to more advanced techniques like mapping and reducing, you now have a powerful toolkit at your disposal. 

Keep Learning!