New ES5 methods
Let’s start with the basics: the
forEach method. A few years ago when we wanted to iterate through an array and perform some kind of action, we would probably just use a regular
for loop. Something as simple as this:
#protip: V8 and other JS engines nowadays are performing some optimizations on their own, therefore you’d not have to cache array length anymore.
But now, we’re able to simplify it even more and use our
forEach method instead:
We can think of
forEach as a base for every other method, as internally the concept of iterating over an array and performing some kind of action is exactly the same.
There’s no way to break
forEach iteration, therefore if you need that feature, you’ve to choose different approach.
But what if I want to immediately return a collection of those function calls?
map method is here to help. It applies the given function to every single element of an array and return new one with modified values.
Please keep in mind that all methods we’re going to talk about here are not mutating their input, therefore here,
foo is still equal to
[0, 1, 2, 3].
To transform an array into a single value, you can use
reduce method. Its signature has an additional argument after the function call, which is a starting accumulator value. If this value is not provided, then the first value of an array will be used and it will be skipped in an iteration process. Also arguments for a function itself are not in
value, index form, but
accumulator, value, index instead.
reduce in pair with
map is widely used in programming and referred to as a
mapReduce model, where given data set is first processed and only then generalized. You can find an example of similar usage in the next section.
A different common use case of the
reduce function is creating a recursive
flatten function, which can (as the name says), flatten a multidimensional array into a single-dimensional representation.
Here’s an implementation of the
It behaves exactly the same as
reduce function, with the only difference of iterating an array backwards, from right to the left side.
Returns a copy of an array, including only values that pass the given condition.
In all array methods, passed functions can be defined before as well, just like we did here.
true if any value passes the given condition, returns
true only if all values pass the given condition, returns
every function will help you get rid of redundant iteration flags, like the one in the example below:
An additional benefit of using those methods is that they will break the iteration immediately when they find the first matching/non-matching value. If we’d iterate over thousands of values, this might give us small performance gain.
Counting total number of votes
You’re working with an API that’s returning an array of movies objects and every movie has a ‘votes’ property. But of course that’d be too easy, so let’s assume that you don’t have a control over this API and ‘votes’ is provided as a string containing
votes prefix, eg.
48 votes and so on.
It all can be boiled down to two function calls,
map will get necessary data and modify it to our needs and
reduce will squeeze it down to a single value.
It’s very readable and descriptive approach. You can track data flow from the top to bottom, one call after another.
Get movies with rating over N
Similar scenario, but this time we want to create a function for our imaginary select box, which can filter down a displayed list of movies.
You could get even fancier by using partial function application (currying) and create predefined rating-based functions:
Making sure that user made choices for all select boxes from a form
Simple scenario. We have a form that the user has to fill in. There are 3 text inputs and 8 select boxes, and all of them are required. How can you quickly make sure that they’re all filled in?
Now if any of your
select boxes will have an no or
0 value, the function will return
false which will explicitly answer the given question
every method’s check is completely up to you and you can perform any validation methods in there.
Finding maximum string length with
Iterate through all values, get their lengths and compare to each other. Then return characters count of the longest one.
Cross-browser compatibility issues
If you’re still concerned about backward compatibility with browsers like IE8, there are plenty of options you can choose from. Amp, Lo-Dash, Underscore to just name a few. Utilities libraries are very popular lately, therefore you won’t have any problems with finding one that will suit your needs.
The only difference you’ll probably encounter is that those functions won’t be bound to array prototype, therefore you’ll have to call them as a regular functions, passing an array as the first argument eg.
If you want to read in depth about all available methods, their quirks, browser incompatibilities etc., go to Mozilla Developer Network, where you can find every piece of information you’ll need.