This course has been updated! We now recommend you take the Functional-Light JavaScript, v3 course.
Transcript from the "Challenge 9: Solution" Lesson
[00:00:00]
>> Kyle Simpson: As it mentions in the read me, you wanna come run the fixed version of it in your browser and watch what it does in the Console. It prints out once per second a count down timer till it gets to zero and then it prints out the complete message.
[00:00:14] So,
>> Kyle Simpson: What we want to do is look at what the code is currently doing for us. So I'm gonna run with the code currently does and that's can give us a clue as to what we need to fix. If I ran the current code without the fix in it, you notice it's printing out these numbers.
[00:00:41] Basically, what I set it up to do was to, once a second, give us a different incrementing number starting with -1. I'll explain why that in just a moment. But, starting with a different number. We'll take that number, and subtract it from our countdown timer number. And, that'll let us know what to print.
[00:01:01] So if our,
>> Kyle Simpson: Format countdown is what's being called here, or we want our format countdown to be called, we could say what value am I going to receive, I'll just print the v, and I wanna console.log that.
>> Kyle Simpson: How can I get format countdown to be called for each value in the countdown stream?
[00:01:33]
>> Speaker 2: Map it.
>> Kyle Simpson: Dot map. There we go. I like that you said it with some fire in your bones. That's good. That's good. Yeah we wanna map it. We wanna call dot map because, this is just a lazy array, right? So to transform that operation over time we're just gonna call map, so I'm gonna say formatCountdown.
[00:01:54]
>> Kyle Simpson: And,
>> Kyle Simpson: When I run the fixed version, you noticed that it is printing undefined in between each of those because the format count down as it currently stand is not returning any value. So if I did return v and ran it and then we would expect that to print each number twice, which is now what it's doing.
[00:02:32] We're printing each number in the format countdown. And now we're also printing it in a subscribe method that's being called, the subscribe method up here. So, essentially, what we want to do is take that number and turn it into the nicely printed out string. And we have that format time that can do that for us.
[00:02:52] So if I just call format time if I return, formatTime and pass in the (v). Actually I'm gonna change this (v) to be a little bit better name. I'm gonna call it the counter number. So let's see what that does for us.
>> Kyle Simpson: That's not quite right cuz it's counting upwards.
[00:03:14] That's not exactly what we want. So why don't we start by saying, we have the countdown lengths, so why don't we subtract counter from the countdownLength?
>> Kyle Simpson: Let's see what it does. It started at 6, which is a little bizarre. Then it ended with zero one. We want to shift this all by one.
[00:03:40] We have a classic off by one error. So, we just add in one more minus one and now it prints five, four, three, two, one.
>> Kyle Simpson: Key takeaway here is not exactly that you need to understand what RX is doing, although there's some really cool stuff happening. This merge is a stream operation, it takes two different streams.
[00:04:12] One of them is the initial value I wanted to provide right away. And the other one is this timer, which is gonna be receiving values once every second from the Rx library. It's gonna be receiving that counter value, but it sends it to us as an object. So then we call another functional utility called pluck which takes an object that you receive and returns the value of just that property off the object.
[00:04:38] So we pluck the value property off of the object being passed through, and that's how we're getting that number coming through. So there is some cool stuff happening with Rx. The main point of this is if Rx is set up, how do I extend what I know about functional programming into those streams.
[00:04:55] Hopefully that was a brief glimpse for you. What questions can I answer about exercise nine?
>> Speaker 3: What would happen if you changed the -1 and the Rx.Observable of -1?
>> Kyle Simpson: So if we start this at (0) for example, and then take the minus one out.
>> Kyle Simpson: It repeated it.
[00:05:26]
>> Speaker 3: Yep, yep, yep.
>> Kyle Simpson: Now there are, I'm certain, ways to tweak the behaviors of Rx I didn't spend a lot of time digging through the documentation. I'm sure an Rx expert is looking at this like, my god, why aren't you passing that one thing? There's somewhere in the documentation I'm sure it says it.
[00:05:44] Given what I know about Rx, it's a daunting set of material, I just make sure that I printed and immediate started the counter rather than waiting a full second. I wanted to print right away. But I couldn't figure out how to tell it where to start its counting.
[00:06:00] It always started at zero instead of at negative one.