Yogesh Chauhan's Blog

Advanced Array Methods in JavaScript (with examples)

in JavaScript on May 12, 2020

What are Advanced Array Methods?

JavaScript has built in functions for dealing with arrays that can simplify the code, make it easier to read and in the end, make it easier to debug.

These methods that allow arrow functions to be used when working with arrays.

Basically, these methods modify the array and we don’t need to write whole bunch of code which saves lots of time.

We saw Higher Order Functions earlier and we saw many of these array methods over there and how they helped us minimize our code. We will see some more examples in this article.

Examples

1. Array.prototype.pop()

The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

If you call pop() on an empty array, it returns undefined.

Syntax


arr.pop()
Advanced Array Methods in JavaScript

2. Array.prototype.sort()

The sort() method sorts the elements of an array in place and returns the sorted array.

The default sort order is ascending.

Syntax


arr.sort([compareFunction]) 

where

compareFunction Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character’s Unicode code point value.

Advanced Array Methods in JavaScript

Another Example: Sort numbers in an array in ascending order

Advanced Array Methods in JavaScript

3. Array.prototype.shift()

The shift() method removes the first element from an array and returns that removed element or it returns undefined if the array is empty.

Syntax


arr.shift()
Advanced Array Methods in JavaScript

4. Array.prototype.unshift()

The unshift() method adds new items to the beginning of an array, and returns the new length.

Syntax


array.unshift(item1, item2, ..., itemX)

At least one parameter is required.

Advanced Array Methods in JavaScript

5. Array.prototype.find()

The find() method returns the value of the first element in an array that pass a test (provided as a function).

The find() method executes the function once for each element present in the array and if it finds an array element where the function returns a true value, find() returns the value of that array element and does not check the remaining values. If it doesn’t find any matching element, then it returns undefined.

Syntax


array.find(function(currentValue, index, arr),thisValue) 

where

currentValue is Required which is the value of the current element,

index is optional which is the array index of the current element and arr is optional which is the array object the current element belongs to.

Lastly, thisValue is optional which is a value to be passed to the function to be used as its “this” value. If this parameter is empty, the value “undefined” will be passed as its “this” value.

Advanced Array Methods in JavaScript

6. Array.prototype.findIndex()

The findIndex() method returns the index of the first element in an array that pass a test (provided as a function).

The findIndex() method executes the function once for each element present in the array and if it finds an array element where the function returns a true value, findIndex() returns the value of that array element and does not check the remaining values. If it doesn’t find any matching element, then it returns -1.

Syntax


array.findIndex(function(currentValue, index, arr),thisValue)

where

currentValue is Required which is the value of the current element,

index is optional which is the array index of the current element and arr is optional which is the array object the current element belongs to.

Lastly, thisValue is optional which is a value to be passed to the function to be used as its “this” value. If this parameter is empty, the value “undefined” will be passed as its “this” value.

Advanced Array Methods in JavaScript

7. Array.prototype.flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Syntax


var newArray = arr.flat([depth]);

where

depth (optional) is the depth level specifying how deep a nested array structure should be flattened. Defaults to 1.

Advanced Array Methods in JavaScript

8. Array.prototype.flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array.

It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient.

Syntax


var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg])

Where

currentValue is the current element being processed in the array,

index (Optional) is the index of the current element being processed in the array,

array (Optional) is the array map was called upon,

thisArg (Optional) is the value to use as this when executing callback.

Advanced Array Methods in JavaScript

Sources


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to make HTML form interactive and using CSS?CSSWindow setInterval() Method in JavaScriptJavaScriptHow does AdSense calculate page loading time?JavaScriptHow to load a module with configuration in SCSS?SCSSfor @each loop in SCSSSCSSStyling Lists with CSSCSS