ES6 Array methods

Some new array methods are introduced in ES6, such as Array.of(), Array.from(), and many more.

The array methods introduced in ES6 are tabulated below.

Let us understand these new array methods.

Array.from()

The general function of this method is to enable new array creation from an array-like object. It converts array-like values and iterable values (such as set and map) into arrays.

Syntax

Let’s understand the parameter values of this function.

object: This parameter value is always required. It is the object to convert to an array.

mapFunction: It is optional. It is a map function to call on each item of the array.

thisValue: It is also optional. It is a value to use as this when executing the mapFunction.

Example

Output

[    'j', 'a', 'v', 'a',    'T', 'p', 'o', 'i',    'n', 't'  ]  

Array.of()

In ES5, when a single numeric value gets passed in the array constructor, then it will create an array of that size. Array.of() is a new way of creating an array which fixes this behavior of ES5.

By using this method, if you are creating an array only with a single numeric value, then it will create an array only with that value instead of creating the array of that size.

Example

Output

[ 42 ]  1  

Array.prototype.copyWithin()

It is an interesting method that is added to the library of array methods in ES6. This method copies the part of an array to a different location within the same array.

It returns the modified array without any modification in its length.

Note: Instead of adding more items to the array, this method only overwrites the elements of the original array.

Syntax

Let’s understand the parameters of this method.

target: It is always required. It is the index position to copy the elements.

start: It is an optional parameter. It refers to the index position to start copying the elements. Its default value is 0. If the value of this parameter is negative, then start will be counted from the end.

end: It is also an optional parameter. It refers to the index position to stop copying the elements. Its default value is the length of the array.

Example

Let’s understand the example of this method with various possibilities.

Output

[    1, 4, 5, 4,  5,    6, 7, 8, 9, 10  ]  [    1, 4,  5, 6,  7,    8, 9, 10, 9, 10  ]  [    1, 1, 2, 3, 4,    5, 6, 7, 8, 9  ]  

Array.prototype.find()

It is another new function of ES6. It finds a value from an array, based on the specific criteria that are passed to this method. It returns the first element value that satisfies the given condition.

Syntax

Let’s understand the parameters of this method.

callback: It represents the function that executes every element.

currentValue:I t is the required parameter. It is the value of the current element.

index: it is an optional parameter. It is the array index of the current element.

arr: It is also an optional parameter. It is the array on which the find() operated.

thisValue: It is optional. It is a value that is used as this while using callback.

Example

Output

22  

Note: ES6 find() method is not similar to the ES5 filter() method because the filter() method always returns an array of matches (return multiple matches), but find() method always returns the actual statement.

Array.prototype.findIndex()

The Array.prototype.findIndex() method returns the index of the first element of the given array that satisfies the given condition. If no element satisfies the condition, then it returns -1.

Syntax

Example

Output

1  

Array.prototype.entries()

This method returns an array iterator object, which can be used to loop through keys and values of arrays.

Entries will return an array of arrays, in which every child array is an array of [index, value].

Syntax

Example

Output

[ 0, 'Red' ]  [ 1, 'Yellow' ]  [ 2, 'Blue' ]  [ 3, 'Black' ]  

In above example, we can also use the spread operator instead of for…of loop which will give you same result.

Output

[ 0, 'Red' ] [ 1, 'Yellow' ] [ 2, 'Blue' ] [ 3, 'Black' ]  

Array.prototype.keys()

This method works similarly to the Array.entries() method. As its name implies, it is used to return an array iterator object along with the keys of the array.

Syntax

Example

Output

0 1 2 3  

Array.prototype.values()

This method is similar to Array.keys() and Array.entries() except that it provides the value of each key.

Syntax

Example

Output

Red Yellow Blue Black  

Array.prototype.fill()

This method fills the specified array elements with a static value. The value can be used to fill a part of an array or to fill the entire array. It modifies the original array.

You can specify the position of the start and end the filling. If not specified, then all elements will be filled.

Syntax

Parameter Values

value: It is a static value to fill the array. It is always required.

start: It is the index to start filling the array. It is optional, and its default value is 0.

end: It is the index to stop filling the array. It is also optional, and its default value is the length of the array.

Example

Output

Red Yellow Green Green  

JavaScript Array Methods