Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1013 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Chaining the Array map and filter methods

3:05 JavaScript lesson by

Both map and filter do not modify the array. Instead they return a new array of the results. Because both map and filter return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using forEach. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Both map and filter do not modify the array. Instead they return a new array of the results. Because both map and filter return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using forEach. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

Avatar
suresh

thanks for this series .

In reply to egghead.io
Avatar
alfapagal

Hi Jafar,

Great tutorial, Now I am eager to replace my loops with these functions in my code.
Two questions for you :
1 ) What will be the performance ramifications of chaining Array map and filter methods when compared to a single loop or a single forEach?
2) You mentioned looping is not an option when the data is coming asynchronously. I didn't understand this point. Why will looping not be an option in such scenarios?

Avatar
Ryan

When would you use forEach over .map as they both seem to do the same thing to me.

Avatar
Joel

When would you use forEach over .map as they both seem to do the same thing to me.

Hey Ryan, they seem similar for sure, but map always produces a new collection and forEach simply iterates over a collection. Map is going to be the goto preference, in general.

In reply to Ryan
Avatar
Koombea

First that all, thas for this series.
I have a question: wht do you mean by "However, loops are no good to us when we're trying to work with data that's arriving asynchronously like with events." Would you mind sharing a fiddle? Thanks in advance

Avatar
Jafar

I mean that you can't wait for an event in a loop. You have to attach an event handler. Furthermore you cannot repeat an asynchronous operation in a loop, because loops run their body immediately whereas async operations are resumed in a callback.

In reply to Koombea
Avatar
Kate

This is simpler:

function getStockSymbols(stocks, minPrice) {
return stocks
.filter((stock)=> stock.price>= minPrice)
.map((stock)=>stock.symbol)
}

...learned about the arrays for each method, map method, and filter method, we can see that we can combine these methods together to write some pretty complex programs, all without ever using a loop. Just as a reminder, the reason why we're learning to build complex programs without loops is that loops only work on data that is synchronously available, like, for example, data sitting somewhere in memory.

However, loops are no good to us when we're trying to work with data that's arriving asynchronously like with events. By learning the for each, map, and filter method we're going to learn how we can build programs that work regardless of whether the data is arriving asynchronously like from event or we're pulling it out of an in-memory data structure like an array.

Now that we know these three methods we can learn how to combine them together to write some pretty complex programs. First I'm going to start by creating an array of stocks. What I'd like to do is print the symbols of those stocks with a price larger than or equal to 150.

Both map and filter would be ideal for this. First we can use filter to create a new collection containing only those stocks with a price larger than or equal to 150. Then we're going to follow up by using a map operation to pull out the symbols from each of those stocks with a price larger than or equal to 150.

Both map and filter don't change arrays. They create new arrays. We're going to create a new list of filtered stock symbols. We are going to start with stocks. First we're going to run the filter operation. Now filter accepts a predicate function. The whole idea, remember, a predicate function is just a test function. It's just a function that accepts an item and returns true or false.

If a function returns true for a given item, filter will put it into the list of new filtered results. We'd like to keep this stock in the new list of filtered results if the stock's price is larger than or equal to 150. Now instead of just filtering the collection of stocks, we'd also like to pull out only the symbols from each of those stocks.

Map is great for translating each item into an array into a new value and then creating a collection of just those values. Here in this function this is called a projection function because it transforms a value that comes in into a new value.

What we're going to do is pull out the symbol for that given stock. If we go ahead and consume each of the items in this new filtered stock symbols using for each, what we'd like is for each one of the new symbols in the filtered stock symbols array, we'd like to just print it to the console.

We're going to use filtered stock symbols for each method. It will accept the stock symbol. We'll go ahead and log that out to the console and run it. We should see only XFX and TNZ because those are the two symbols of the only stocks with prices larger than or equal to 150.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?