Chaining the Array map and filter methods

Jafar Husain
InstructorJafar Husain
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 5 years ago

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.

[00:00] 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.

[00:21] 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.

[00:38] 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.

[00:59] 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.

[01:17] 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.

[01:45] 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.

[02:08] 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.

[02:22] 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.

[02:39] 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.

alfapagal
alfapagal
~ 8 years ago

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?

Ryan Huber
Ryan Huber
~ 8 years ago

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

Joel Hooks
Joel Hooks
~ 8 years ago

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.

Ryan Huber
Ryan Huber
~ 8 years ago

Thanks Joel!

Koombea
Koombea
~ 8 years ago

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

Jafar Husain
Jafar Husaininstructor
~ 8 years ago

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.

Kate
Kate
~ 7 years ago

This is simpler:

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

Jonathan
Jonathan
~ 7 years ago

I don't necessarily agree with what Jafar says, "write complex programs, all! without ever writting a loop" .... so what do you think the function is doing??? is looping over the elements in the array and at the end of the day is blocking io!

Markdown supported.
Become a member to join the discussionEnroll Today