YogeshChauhan . com

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

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to remove border from :visited image, link or button?CSSKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscHow to add a select dropdown in React?ReactHow to create a CSS full page background image?CSSCreate a menu with a curtain falling animation using CSS and JavaScriptCSSSorting Object Arrays in JavaScriptJavaScript