In ES6, we get a bunch of new native methods for Arrays that are super useful! This is a short blog post that goes over each of the new methods - .from(), .of(), .find(), .findIndex(), .some(), and .every() - and how they work.
We're definitely familiar with Arrays as a kind of data structure which can hold a collection. But in Javascript, there are array-ish objects. These are objects that have a length and look like an array, but we don't get all of our array methods, like map, reduce, or the rest of the ones we are about to go through in this blog post! This is one of the weird parts about Javascript. Some examples are the arguments parameter which can be used in a function (that holds a collection of all the arguments given) and collections of DOM nodes that a function like document.getElementsBy...() returns.
Prior to ES6, we would have to use one of our for loops which can be used on a non-array type, and transform each element into an array manually. But now we get these handy class methods that can create new arrays!
Array.from() takes in a parameter, which is usually one of those array-ish objects, and turns it into an array. Some interesting use cases include... calling reduce on a function that sums up any given number of arguments (using the arguments parameter) or manipulating specific DOM elements like adding styles or events.
function sumAll() {
const numbers = Array.from(arguments);
return numbers.reduce((prev, next) => prev + next, 0));
}
Array.of() can take several parameters and uses them to create an array. When I first learned about this method, I wondered what was the difference between using Array.of() and new Array(). Why not use the constructor if we know what we want the Array to be created of?
new Array() has some inconsistent behavior depending on the number of arguments you pass to it. If we take a look at an example comparing new Array() and Array.of(), this becomes a bit more clear.
Passing a single value:
new Array(2)
Returns a new two element Array that is unpopulated:
[ , ]
Passing more than a single value:
new Array(1,2)
Returns a new two element Array that is populated with those values:
[1, 2]
Array.of() , however, will always behave in the same way and create a new Array of the elements that you pass it.
Array.of(2) returns [2]
Array.of(1, 2) returns [1, 2]
Check out this interesting explanation and code example on Github: https://gist.github.com/rwaldron/1074126#arrayof--variable-arity-
ES6 introduces some new filtering methods that allow us to more easily find elements and indexes of those elements within arrays. It's useful for when we need to find an element within an array that can't be looked up solely by value. For example, if we are working with an array of objects like so:
const produce = [
{
name: 'apple',
color: 'red',
type: 'fruit',
stocked: true
},
{
name: 'banana',
color: 'yellow',
type: 'fruit',
stocked: false
},
{
name: 'carrot',
color: 'orange',
type: 'vegetable',
stocked: true
}
]
If we want to get one of those objects out of the array, it's difficult without reaching into each object and looping through. With the .find() method, we can specify exactly what we want more easily! Let's say we want the first stocked item in produce. We can pass the method a function parameter: produce.find(item => { item.stocked }); and we'll get back the entire object:
{name: 'apple', color: 'red', type: 'fruit', stocked: true}
The same goes for .findIndex() , but instead of being returned the entire object or element, we will get the index of that element. In this case, produce.findIndex(item => { item.stocked }); we would get the index 0 .
You may be thinking, "Hey! I know another function that can do this already: .indexOf()!" This also returns us the index of the element we are looking for. The difference lies in the parameters we pass to either function. .indexOf() takes a value as a parameter, and is more suited for the use case of looking for an element in a collection of all primitive types. .findIndex() takes a function as a parameter, and is better for when you need to find an element that fulfills a condition. It's useful for non-primitive types like objects and when you are looking for a match that is more significant than just a value.
These two methods are pretty straightforward and they are a great fit for some specific use cases. Both the .some() and .every() methods take in functions which return booleans as parameters, and check if either some of the elements in the array cause the function to return true or if every element in the array returns true.
Let's say we have an array of numbers, and we want to know if some of the numbers are even. This is easy to write with the new .some() method!
const nums = [2, 3, 4, 5, 6]
nums.some(num => { num % 2 === 0 });
This will return true, because some of our elements (2, 4, 6) will return true. However, since not all of the elements return true for that function, nums.every(num => { num % 2 === 0 }); returns false.
The function that you pass to .some() and .every() gets access to three parameters. The only mandatory parameter is the element itself (in our example, we are using num). You can also use two optional parameters - the index of that element and the entire array. This allows us to write more complex functions to use with these new Array methods.
In our discussion, everyone agreed that these new methods will be useful. It removes some of the needs to use jQuery, which can be a bigger package than you need in your project. We all thought that the Array.from method was very practical especially since Javascript has these weird array-ish objects. I really like how semantic these methods are; so many of the new ES6 features improve readability of your code - a great added benefit, especially with Javascript which can be a little crazy sometimes. It's good to see that some of the "bad parts" of Javascript are being combatted with new methods that make our code more maintainable and understandable. To me, it definitely feels like Javascript is heading in the right direction. How do you feel about Javascript's future? Which of these new Array methods is your favorite? What else would you like to see be added to Javascript?
Thanks for reading!