List the new Array Methods Introduced in ES6

ECMAScript 2015, also called ES6 is an enhancement revision to Javascript. With this update, some features were introduced and the methods that operate with the array are listed below –

JavaScript find() Method: This method returns the first appeared entity of the array which you are looking for, more syntactically we can say that it returns an element of an array according to the testing function provided as an argument. 

• It will return undefined if no such element is found according to a given condition.
• It will return the first occurrence if more than one element is satisfying the given condition.

Example: We are providing a simple function with fat arrow syntax inside the find method which checks whether the current element is equal to 5 or not, and it will going to return that element on which this condition yields truthy value.

JavaScript

const array = [6, 8, 78, 21, 5];

const returnedElement = array.find((element) => {
return element == 5;
});

console.log(returnedElement);

Output:

5

JavaScript findIndex() Method: It is similar to the find method described above, the difference is it returns the index of element instead of the actual value and returns -1 if that element is not found. Syntactically, it returns the index of elements for which the callback function yields a truthy value.

Example:

JavaScript

const array = [6, 8, 78, 21, 5];

const returnedIndex = array.findIndex((element) => {
return element == 5;
});

console.log(returnedIndex);

Output:

4  

JavaScript of() Method: This one will create the new Array instance according to the provided data. It is independent of the number and type of elements. 

Syntax:

Array.of(element0, element1, element2,......elementn)

Example: In the first one we have passed only an integer hence it will create an array with a single element, this is one of the features which makes it different from the Array constructor. In the second one, we have passed 4 values to create an array.

JavaScript

const arr1 = Array.of(2);
const arr2 = Array.of(7, 2, 3, 4);
console.log(arr1);
console.log(arr2);

Output:

[2]
(4) [7, 2, 3, 4]

fJavaScript ill() Method: As the name suggests, it is used to fill the array or certain portion with a single provided value. It returns the original array after some fill modification.

Syntax:

fill(value, start, end)

• You can omit the start and end argument, The default value is 0 and the length of the array respectively.
• It doesn’t copy the array but modifies the original one and return that.

Example: We have created an array in the starting. The 1st invocation to fill method is returning the array having element value as 1 from 3 to 5(exclusive) index. The 2nd one is returning the array filled with 7 from 2 to the last index. The 3rd one is returning the array filled with 3 everywhere.

Javascript

const arr = [8, 3, 11, 9, 6];
console.log(arr.fill(1, 3, 5));
console.log(arr.fill(7, 2));
console.log(arr.fill(3));

Output:

(5) [8, 3, 11, 1, 1]
(5) [8, 3, 7, 7, 7]
(5) [3, 3, 3, 3, 3]

JavaScript from() Method: It creates a shallow copied instance of an array according to the provided iterable object i.e. set, map, nodelist, string, etc. 

Example: In the first invocation to from method we are passing a set and it is returning an array instance and similarly in the second one there is a string.

Javascript

const set = new Set(['foo', 'bar', 'baz', 'foo']);
console.log(Array.from(set));

const str = 'string';
console.log(Array.from(str));

Output:

(3) ['foo', 'bar', 'baz']
(6) ['s', 't', 'r', 'i', 'n', 'g']

JavaScript alues() Method: This returns the iterable object of values of the provided array. 

Example: After we have declared the array there is a function call to values method which is returning the iterable object of values of the array.

Javascript

const arr = ['a', 'b', 'c', 'd'];
const iterator = arr.values();

for (const value of iterator) {
    console.log(value);
}

Output:

a
b
c
d

JavaScript keys() Method: It returns the iterable object which contains the keys of the elements of the array.

Example:

Javascript

const arr = ['a', 'b', 'c', 'd'];
const iterator = arr.keys();

for (const value of iterator) {
    console.log(value);
}

Output:

0
1
2
3

JavaScript entries() Method: It returns the iterable object which contains key, value pairs, where keys are the index of that element in the array.

Example:

Javascript

const arr = ['a', 'b', 'c', 'd'];
const iterator = arr.entries();

for (const value of iterator) {
    console.log(value);
}

Output:

(2) [0, 'a']
(2) [1, 'b']
(2) [2, 'c']
(2) [3, 'd']

JavaScript copyWithin() Method: As the name itself indicates, it is used to shallow copy the elements inside the same array from one location to another. The length of the array will remain unchanged. 

Syntax:

copyWithin(target, start, end);

• You can omit the start and end argument, The default value is 0 and the length of the array respectively.
• If the target is positioned after the start, the copied sequence will be trimmed to fit the length of the array

Example: First of all we have created an array and then the former call to copyWithin is copying the content of the array from the 4th index to the 5th(exclusive) index at the 0th target index. Later in the next call, it is copying the content of the array from the 3rd index to the last(because the end argument is not given) at the target of the 2nd index.

Javascript

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr.copyWithin(0, 4, 5));
console.log(arr.copyWithin(2, 3));

Output:

(6) [5, 2, 3, 4, 5, 6]
(6) [5, 2, 4, 5, 6, 6]