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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
Killing A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousWhat does Containment mean in React?ReactHow to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresIs PHP still good for back-end programming?PHPHow to redirect or load a new document using JavaScript?JavaScript@use rule in SCSS (Sass)SCSS