JavaScript Array Methods

JavaScript has its own set of methods built into the language that allow developers to efficiently interact with arrays. JavaScript allows you to do such operations as adding, removing, updating, or getting elements, transforming or iterating through arrays.

What do you understand by Array?

In JS, the array is a special kind of variable which can store multiple values at a time. You use arrays to be able to efficiently and effectively work with lists of data. An array consists of elements, and each element has a number, an index starting at 0. The array is a special type of variable which can hold any kind of data such as number, string, object or even another array present inside it. They are mostly used for collection management, iteration, sorting/filtering, etc.

Array Basic Methods

1. Array toString() in JavaScript

This method fabricates an array in a string form separated by comma. This approach does not alter the initial array and is significant for representing the content of the array in form of a string.

Output:

 Array to String is Yashraj, Thomas, Kate 

2. Array at() in JavaScript

It returns the element at a specified index in an array. It can be constructed for both positive indices comprising negative indices. Indices can be positive which begins from the start (0-based) and can be negative which counts from the end of the array.

3. Array forEach() in JavaScript

The forEach() method is a built-in method that is utilized to call a function for each element present in the array. It neither returns a new array nor modifies the original array but it is utilized for iteration.

Output:

 spring summer winter autumn 

4. Array join() in JavaScript

It joins all elements of an array to form a single string. The second parameter is an optional custom separator otherwise it is by default a comma. It's helpful for making formatted strings out of array items.

Output:

 Joined Elements are Yashraj - Thomas - Kate 

5. Array pop() in JavaScript

It eliminates the last element from the array. It will modify the length of the array. You will see that it changes the given array. Utilizing pop() on an empty array returns undefined.

Output:

 Removed Element is Kate Updated Array is [ 'Yashraj', 'Thomas' ] 

6. Array push() in JavaScript

The push() method is utilized to add one or more elements to the end of an array and then return the new array with a different length. It appends these new elements to the end of the old array.

Output:

 New length of the array is 3 Updated array is [ 'Yashraj', 'Thomas', 'Kate' ] 

7. Array shift() in JavaScript

This array shift() method simply pops the first element of the array. It is done by mutating the original array and moving each element to left after shift. If the array has no elements then it returns nothing.

Output:

 Removed element: Yashraj Updated array: [ 'Thomas', 'Kate' ] 

8. Array unshift() in JavaScript

The unshift() method is utilized to add new items to the starting of the array and then return the new array with a different length. It just moves everything to the right of where you want to insert the new elements.

Output:

 New length of the array: 3 Updated array: [ 'Yashraj', 'Thomas', 'Kate' ] 

9. Array concat() in JavaScript

The concat() method is used to concatenate or join two or multiple arrays inside & represented in a new array. It does not modify the original array.

Output:

 Combined Names are [ 'Yashraj', 'Thomas', 'Kate', 'Kartik' ] 

10. Array copyWithin() in JavaScript

This method shallow copies the specified part of an array to another location within same array followed by the return of the original array without modifications in the size of the original array. The arguments are target index and start index.

Output:

 [ 'Yashraj', 'Kate', 'Kartik', 'Kartik' ] 

11. Array flat() in JavaScript

This method returns a new array with a given depth of sub-array elements collapsed so that they all fit into a single array. The default depth is 1.

Output:

 Array Flat: [ 'Yashraj', 'Thomas', 'Kate' ] 

12. Array splice() in JavaScript

The splice() can change the contents of an array by eliminating existing elements and/or adding new elements in place. It returns a new, shallow copy array of the portion of the array from start up to (but not including) end.

Output:

 Removed elements: [ 'Thomas' ] Updated array: [ 'Yashraj', 'Kartik', 'Kate' ] 

13. Array toSpliced() in JavaScript

The toSpliced() method returns a new array with the defined changes like adding element or deleting element without mutating the source array.

Output:

 New array: [ 'Yashraj', 'Kartik', 'Kate' ] Original array: [ 'Yashraj', 'Thomas', 'Kate' ] 

14. Array slice() in JavaScript

Let's take a look at how the array.slice() method works. It returns a new array but it does not change the original array. This method takes two optional parameters which are the start index (inclusive) and end index (exclusive). If no end index is passed, slicing will go until the end of the array. Negative indices count from the end.

Code:

Output:

 Extracted portion: [ 'Thomas', 'Kate' ] Original array: [ 'Yashraj', 'Thomas', 'Kate', 'Kartik' ] 

Searching Methods

1. Array indexOf() in JavaScript

The indexOf() method is used to return the first index where a provided element can be found in the array or -1 if it is not found. It uses strict equality (===) to test for a found element.

Code:

Output:

 First occurrence: 1 Index of not present element: -1 

2. Array lastIndexOf() in JavaScript

The lastIndexOf() method is utilized to return the last index of an array at which a provided element can be found. If the one element is not found then it returns -1. It checks for strict equality.

Code:

Output:

 First occurrence: 3 Index of not present element: -1 

3. Array includes() in JavaScript

The includes() method is utilized to check whether the array holds a particular element. It returns true if found and false otherwise. This is a form of a strict equality check.

Code:

Output:

 Include's Thomas: true Include's Rahul: false 

4. Array find() in JavaScript

The find() method is used to retrieve the first element from the array that passes a testing function. It returns undefined if no element satisfies the condition.

Code:

Output:

 First matching element: Kate 

5. Array findIndex() in JavaScript

Similarly, the findIndex() method is utilized to return the index of the first element in the provided array that fulfils a filter testing function. -1 is returned if no element fulfils the condition.

Code:

Output:

 Index of the matching element: 2 

6. Array findLast() in JavaScript

The findLast() method is utilized to return the last array element that fulfils a testing function. If no element fulfils the condition then it will return undefined.

Code:

Output:

 Last matching element: Kartik 

7. Array findLastIndex() in JavaScript

The findLastIndex() method is used to return the index of the last element in the array which passes the test provided by the testing function. It returns -1 if no element meets the condition.

Code:

Output:

 Index of the last matching element: 3 

Sorting Methods

1. Array sort() in JavaScript

The sort() method is utilized to sort the elements of an array and returns the sorted Array. By default, it will sort as strings in ascending order which will return unpredictable results when sorting numbers. For more complex sorting, a custom compare function can be provided.

Code:

Output:

 Sorted alphabetically: [ 'Kate', 'Thomas', 'Yashraj' ] Numeric sort: [ 1, 2, 5, 10 ] 

2. Array reverse() in JavaScript

The reverse() method gets the order of the elements of an array reversed and it modifies the same original array. In that case, It is mostly used in conjunction with sort() to get descending order.

Code:

Output:

 Reversed order: [ 'Kate', 'Thomas', 'Yashraj' ] 

3. Array toSorted() in JavaScript

The reverse() method gets the order of the elements of an array reversed and it modifies the same original array. It has the same functionality as sort() but does not change the original array.

Code:

Output:

 Sorted array: [ 'Kate', 'Thomas', 'Yashraj' ] Original array: [ 'Yashraj', 'Thomas', 'Kate' ] 

4. Array toReversed() in JavaScript

The toReversed() method is used to return an array with the elements in the reverse order but does not change the original. This is nice for reversing arrays without actual data mutation.

Code:

Output:

 Reversed array: [ 'Kate', 'Thomas', 'Yashraj' ] Original array: [ 'Yashraj', 'Thomas', 'Kate' ] 

5. Sorting Objects

To sort objects in an array you need a custom compare function that gets passed to sort(). The sorting logic works by defining this function based on object properties.

Code:

Output:

 After ascending sorting: [ { name: 'Thomas', age: 22 }, { name: 'Kate', age: 23 }, { name: 'Yashraj', age: 24 } ] After alphabetically sorting: [ { name: 'Kate', age: 23 }, { name: 'Thomas', age: 22 }, { name: 'Yashraj', age: 24 } ] 

Conclusion:

These JavaScript array methods allow us to sort arrays effectively and manipulate data no matter if we are dealing with simple values or complex objects.