Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

List the new Array Methods Introduced in ES6

  • Last Updated : 21 Sep, 2021

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 –

1. 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. 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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






<script>
    const array = [6, 8, 78, 21, 5];
  
    const returnedElement = array.find((element) => {
        return element == 5;
    });
  
    console.log(returnedElement);
</script>

 

Output:

2. 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




<script>
    const array = [6, 8, 78, 21, 5];
  
    const returnedIndex = array.findIndex((element) => {
        return element == 5;
    });
  
    console.log(returnedIndex);
  
</script>

Output:



 

3. 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




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

Output:

4. fill() 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




<script>
    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));
</script>

Output:

5. 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




<script>
    const set = new Set(['foo', 'bar', 'baz', 'foo']);
    console.log(Array.from(set));
  
    const str = 'string';
    console.log(Array.from(str));
</script>

Output:

6. values() 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




<script>
    const arr = ['a', 'b', 'c', 'd'];
    const iterator = arr.values();
  
    for (const value of iterator) {
        console.log(value);
    }
</script>

Output:

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

Example:

Javascript




<script>
    const arr = ['a', 'b', 'c', 'd'];
    const iterator = arr.keys();
  
    for (const value of iterator) {
        console.log(value);
    }
</script>

Output:

8. 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




<script>
    const arr = ['a', 'b', 'c', 'd'];
    const iterator = arr.entries();
  
    for (const value of iterator) {
        console.log(value);
    }
</script>

Output:

9. copyWithin() Method: As the name is itself indicating, 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 trim 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 array from 4th index to 5th(exclusive) index at 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




<script>
    const arr = [1, 2, 3, 4, 5, 6];
  
    console.log(arr.copyWithin(0, 4, 5));
    console.log(arr.copyWithin(2, 3));
</script>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!