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 917 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Using the map method with Observable

3:45 JavaScript lesson by

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

Avatar
Dougal

Super excited to see all these new tutorials

In reply to egghead.io
Avatar
Jafar

Just wait. Soon we're going to get into the really fun stuff!

In reply to Dougal
Avatar
Mark

Really great series - I'm learning a terrific amount. I've known about filters/maps etc but never really quite understood their true value.

On thing tho, in the video above you comment out code to show that observables are lazy. But you comment out the alert too so of course nothing happens - lazy or not.... Took me a while to realise what I was supposed to (not) see :)

Avatar
Jafar

Thanks for pointing that out. Sorry about that.

In reply to Mark
Avatar
Ian Poston

Hi Jafar. Nice lesson so far. I was wondering how does onCompleted get called. What purpose does onCompleted have?

In reply to Jafar

Now that we've explained how you get data out of an Observable and how you can convert a DOM event into an Observable, let's take a look at how we can use the map function and the other functions to transform Observables into other Observables the same way we use map to transform Arrays into other Arrays.

What if I want to take this click stream and create a point stream? What I want to do is I want to take each one of the event objects that comes out of our click stream. I want to map it into the point, the (x, y) point at which the button was clicked.

If I want to take each item in that collection and I want to transform it into another item, I'm going to use the map method, just like I would if I was taking an Array of numbers and then map them and add one to each of them.

I'm going to map over this. I'm going to get out an event object. I'm going to return an object with an x that's equal to clientX and a y that's equal to the clientY property on the event object. That is going to create me another Observable.

I'm now going to change clicks to be points. I'm just going to subscribe to points instead of clicks. I'm going to alert. I'm going to change this now. It's no longer an event object. It's a point object. I'm going to now change my clicked message so we print out the point.

Now it should only print one point because we're still disposing of our subscription object as soon as the first one is clicked. As I click this, now we see the point on the screen where that button was clicked.

If I attempt to click more, nothing happens because after the first click, we unsubscribed. Just to drive the point home, if I delete this, it will just keep on printing out clicks. What I'll do is I'll put it back in here.

There's one more thing you need to understand about an Observable. An Observable is lazy. What do I mean when I say "Lazy"? Here, notice we created the points Observable by mapping over the clicks Observable. This is just one thing I want to drive home here.

When we map over Arrays, we get Arrays. When we filter Arrays, we get Arrays. When we concatAll Arrays, we get Arrays. When we map over Observables, we get Observables. When we filter Observables, we get Observables and so on and so forth.

As soon as you start with an Observable, you know you're going to have only Observables. As you call map and filter on that Observable, you're just going to create new Observables.

Having made that point, the other point that I want to make is that Observables are lazy. If I comment out...Notice I'm no longer forEach'ing over these points Observable. If I call "Click me," I want you to notice that nothing happens. As a matter of fact, addEventListener, under the hood, has not even been called by Observable.fromEvent.

The way Observable works is it waits until you call forEach to have any side effects, to carry out any side effects whatsoever. What we've done is we've really just built an Observable that promises that when you will call forEach on it, it will hook up an event listener.

When we map over that Observable, we've created another Observable that promises that when we forEach over it, it will forEach over the underlying data source, clicks, and then, as data arrives, will transform that data, using a projection function, into new data. Just simply creating Observables causes nothing to happen.

We have to forEach over the Observable in order for something to happen. That'll become clear, how that mechanism works, because later on, we're actually going to write our own Observable, from scratch, around a simple library. Once again, to drive the point home, I'll run this. We get the points that are clicked.


Featured course:

Create an SVG Icon System

Create an SVG Icon System

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