ECMAScript 6, also called ES6 or ECMAScript 2015, is a specification standard that introduced some new exciting features to the JavaScript programming language intended to make your code more modern, readable, and versatile—especially when building large-scale applications.

Apart from ES6, which was introduced in 2015, other specifications of the standard have continuously been released to enhance the features of JavaScript. In fact, the tenth edition, ES10, was released in June 2019.

One of the significant enhancements that ES6 introduced to JavaScript is how developers interact with arrays. Although these new features are designed to make our lives easier, they may be a little bit perplexing and difficult to grasp.

Therefore, in this article, we’re going to talk about seven of the new JavaScript ES6+ array methods that every developer should know.

By the way, when describing them, we’ll use Array.method() to refer to a “class” method and Array.prototype.method() to refer to an “instance” method.

Find open JavaScript developer jobs on our website

Here are the methods we’ll be demonstrating how they work:

  • from()
  • prototype.find()
  • prototype.findIndex()
  • prototype.fill()
  • prototype.copyWithin()
  • prototype.values()
  • prototype.keys()

Let’s now set the ball rolling…

  1. Array.from()

Previously, converting objects to arrays was complicated and involved writing many lines of code. However, the Array.from() method in ES6 has made this process a lot easier.

The Array.from() method lets you create a new array instance from an array-like object or an iterable object without many complications.

Here is its syntax:

Array.from(arrayLike [, mapFn[, thisArg]])

Here is the meaning of its parameters:

  • arrayLike: an array-like object or an iterable object to be transformed into an array.
  • mapFn: a map function that can be called on every element of the array being generated (it’s an optional parameter).
  • thisArg: a parameter to be used as the context (this) value when running the mapFn function (it’s an optional parameter).

The method returns a new Array instance that comprises of all the elements of the arrayLike object.

Let’s now see how the method works.

Here is an example that converts a string to an array:

let arr = Array.from(“Hello”); console.log(arr); //output is [“H”, “e”, “l”, “l”, “o”]

 

If we use the method’s second parameter, we can push it to its limits. Since it accepts a callback function as a second parameter, we can run a mapping function that iterates on each element of the newly created array and returns the results.

Here is an example:

let values = [10,20,30]; let newValues = Array.from(values, val => val * 10); console.log(newValues); //output is [100, 200, 300]

 

As you can see on the code above, the Array.from() method generates a new array based on values. Then, the arrow function is executed for every element in that array, leading to a multiplication of every value by 10.

  • Array.prototype.find()

 

The find() method allows you to iterate through an array and find the value of the first element that satisfies the stipulated criteria.

Here is its syntax:

arr.find(callback(element[, index[, array]])[, thisArg])

Here is the meaning of its parameters:

  • callback: this is the function applied against every element in the array. It receives the following three arguments: element (the current element in the array), index (the position of the current element in the array), and array (the array used to invoke the find method). The index and array arguments are optional.
  • thisArg: this is the object used to set the context (this value) when executing the callback It’s an optional parameter.

Although the find() method cannot mutate an array, the callback function can mutate the elements in the array.

If the find() method finds a value that meets the given criteria, it immediately returns that value—and stops the rest of the execution. Otherwise, it returns undefined.

It is a very efficient method when you want to query a large array of information within your codebase and return a specific result.

Here is an example:

let values = [10,20,30]; let findValue = values.find(val => val > 10); console.log(findValue); //output is 20

 

As you can see on the code above, the find() method retrieved the first value in the array greater than 10. So, 20, which is the first element that meets the criteria, is returned.

  1. Array.prototype.findIndex()

The findIndex() method works just like the find() method; however, instead of returning the matched value, it returns its index position.

Here is its syntax:

arr.findIndex(callback(element[, index[, array]])[, thisArg])

As you can see on the syntax above, the findIndex() method accepts the same arguments as the previously described find() method.

The only difference is that it returns the index of the first element in the array that meets the stipulated criteria. Otherwise, it returns -1, signifying that no element satisfied the condition.

Here is an example:

let values = [10,20,30]; let index = values.findIndex(val => val > 10); console.log(index); //output is 1

 

As you can see on the output above, the index of the first element that is greater than 10 is 1. Remember that array indexes are counted from zero.

  1. Array.prototype.fill()

ES6 now allows you to easily fill up the elements of an array using the fill() method. With this method, you can overwrite all the existing values in an array to a static value, beginning and ending at the specified index. It returns the altered array.

Here is its syntax:

arr.fill(value[, start[, end]])

Here is the meaning of its parameters:

  • value: the value to use for filling the array.
  • start: the index to start filling the array (default is 0). It’s an optional parameter.
  • end: the index to end filling the array, without including the ending element itself (default is length). It’s an optional parameter.

If you do not specify the starting and the ending index, the method will populate the entire array with the provided value. If you specify only one index position, the method will take it as the beginning index, and populate the rest of the array.

If you provide negative values for the starting and the ending index, the positions will be counted beginning from the end of the array.

Here are some examples:

let arr = [10,20,30,40]; //fill with 50 from position 1 to position 3 console.log(arr.fill(50,1,3)); //output is [10, 50, 50, 40] //fill with 50 from position 2 console.log(arr.fill(50,2)); //output is [10, 50, 50, 50] //fill with 50 from position -1 console.log(arr.fill(50,-1)); //output is [10, 50, 50, 50] //overwrite entire array console.log(arr.fill(50)); //output is [50, 50, 50, 50]

 

The fill() method is important when you want to overwrite an array with default values. You can also use it to update specific values in an array according to the user input.

  1. 5.prototype.copyWithin()

The copyWithin() method allows you to shift the data of an array by copying values from one position to another position within the array—just as the name suggests. It overwrites the existing values and returns the modified array without changing its length.

Here is its syntax:

arr.copyWithin(target[, start[, end]])

Here is the meaning of its parameters:

  • target: the index position for copying the array elements to.
  • start: the index position to begin copying the array elements from. If it’s not specified, copying will start from index 0. It’s an optional parameter.
  • end: the index position to halt copying the array elements, without including the ending element itself. If it’s not specified, it will default to length. It’s an optional parameter.

If target, start and end are negative, the index positions will be counted starting from the end of the array.

Here are some examples:

let arr = [10,20,30,40,50]; //element at index 3 copied to index 0 console.log(arr.copyWithin(0,3,4)); //output is [40, 20, 30, 40, 50] //all elements from index 3 to end copied to index 1 console.log(arr.copyWithin(1,3)); //output is [40, 40, 50, 40, 50]

 

  1. Array.prototype.values()

The values() method is an interesting addition to arrays in ES6. It’s a bit different from the methods discussed previously.

Instead of returning a specific value like most of the other array methods, it returns a new Array Iterator object that has the values for each index in the given array.

To loop through this iterable object, you can use the for. . .of statement.

Here is the syntax for the values() method:

arr.values()

Here is an example:

const arr = [10,20,30,40]; const iterator = arr.values(); //output values all at once for(const value of iterator){ console.log(value); } //output is 10 //output is 20 //output is 30 //output is 40

 

To retrieve the values individually, instead of all at once, you can call the next method together with value:

const arr = [10,20,30,40]; const iterator = arr.values(); //output values individually console.log(iterator.next().value); //output is 10 console.log(iterator.next().value); //output is 20 console.log(iterator.next().value); //output is 30 console.log(iterator.next().value); //output is 40

 

  1. Array.prototype.keys()

The keys() method works just like the values() method; however, the only difference is that it returns a new Array Iterator object that has the keys for every index in the array.

Here is its syntax:

arr.keys()

To see how it works, let’s use the previous example and just substitute arr.values() with arr.keys():


const arr = [10,20,30,40]; const iterator = arr.keys(); //output keys all at once for(const value of iterator){ console.log(value); } //output is 0 //output is 1 //output is 2 //output is 3

 

const arr = [10,20,30,40]; const iterator = arr.keys(); //output keys individually console.log(iterator.next().value); //output is 0 console.log(iterator.next().value); //output is 1 console.log(iterator.next().value); //output is 2 console.log(iterator.next().value); //output is 3

 

Conclusion

In this article, we illustrated seven of the new array methods introduced in ES6+. With these methods, you’ll no longer be restricted to writing lengthy and boring lines of code when trying to make the most of JavaScript arrays.

They’ve got you covered!

Furthermore, with the continuous advancements of the ECMAScript specification standard, we’re likely to see more, and better, methods that make working with arrays easy and exciting. We’ll be on the lookout for them.

Out of the above array methods, which one(s) do you find more useful?

Is there any interesting ES6+ array method we’ve missed in this post?

Or, do you have any comments or questions?

Please post them below.

 

************************

 

Find open JavaScript developer jobs on our website

Categories: Tech Corner

Leave a Reply

Your email address will not be published. Required fields are marked *