- Use
map
to transform anArray
- Use
reduce
to reduce anArray
to a value - Use JavaScript documentation to learn more about other variations on
map
andreduce
- Use
filter
to filter anArray
Now that you have written map
and reduce
, here's the big reveal: JavaScript
already has these methods built into its Array
data type!
[10, 20, 30, 40].map(function(a) {
return a * 2;
}); //=> [20, 40, 60, 80]
[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }) //=> 100
[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }, 100) //=> 200
Remember, JavaScript loves functions. By being able to pass functions
around comfortably, we can take advantage of methods that JavaScript gives us!
Given what you know about writing your own map
and reduce
functions,
read the JavaScript documentation and make sure you know how to use the
versions JavaScript provides you:
Now that we understand the "Character of Collection Processing" we are
ready to unleash the full power of this module! Instead of merely repeating
the documentation, we're going to help you apply your understanding to the
filter
method, and then we're going to give you a list of document resources
you should look up and master.
Look at the documentation for filter. The syntax snippet is provided as:
let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
Here, we're told that on an Array
(arr
), we add a .filter
and then,
between ()
, we provide a callback
and a thisArg
.
REMEMBER Because of JavaScript's non-enforcement of arity, we don't have to provide all the arguments.
We'll talk a lot more about this
and thisArg
shortly, but for the moment,
we can leave it out.
Let's learn some more about the callback
. The documentation tells us what
parameters it supports.
// ... callback(element[, index[, array]]) ...)
Possible parameters:
element
index
(optional)array
(optional)
JavaScript will move through the Array
that filter()
was invoked on and
pass the element
, the index
of that element, and the whole darn array
to the callback (called in the documentation, "callback
").
Yet again, because of arity non-enforcement, we don't have to add
parameters for index
or array
, or element
even. Furthermore, in our
callbacks, we can name our parameters whatever we like. JavaScript always
makes those 3 arguments available to our callback. What to call them and
whether to use them is entirely up to us. See examples below to see how we
can play with this.
Now, what happens in callback
? The documentation tells us:
Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise. It accepts three arguments:
This function runs and has access to the parameters we just explained.
If the call to callback
returns true
, that element will be added to an
invisible "keeper" Array
; else, it's left out.
We can use the element
or the array
or the index
or (more typically)
some interaction between them to create an expression that return
s a
Boolean value from callback
.
PRO-TIP: After reading our description above, look at MDN's and make sure you know how to explain filter in your own words. Being able to learn from MDN is a core skill we must continually develop!
[10, 20, 30, 40].filter(function() {
return true;
}) //=> [10, 20, 30, 40] (map, basically)
[10, 20, 30, 40].filter(function(e) {
return e < 30;
}) //=> [10, 20]
[10, 20, 30, 40].filter(function(e, index) {
return index % 2 === 0;
}) //=> [10, 30] (elements with an even-numbered index)
- Map a collection
- Only accumulate the elements that return a truthy value from the callback. The callback's mechanics are described above
Obviously, how we adjust the return value of the callback will decide whether data we want is preserved or data we don't want is rejected.
These are the collection-processing methods you should memorize and practice heavily. They're going to be your friends every day in JavaScript-land. There are other collection-processing methods that you might not memorize, but it's pretty common for a developer to realize that they're working in the "Character of Collection Processing" and think, "Hm, maybe there's a collection-processing method for that...." When that moment hits, the developer comes back to the documentation and look for that "just-right" collection-processing method.
every
: Did all elements satisfy the callback?find
: Find the first element that satisfies the callbackfindIndex
: Find the first element that satisfies the callback's indexmap
: Transform every element and create a new arrayreduce
: Reduce every element into a new valuesome
: Did any element satisfy the callback?
Your programming power just increased by at least ten-fold. With these methods and others provided in the documentation, you can tear through datasets efficiently and flexibly. Enjoy the power!