This course has been updated! We now recommend you take the Functional-Light JavaScript, v3 course.

Check out a free preview of the full Functional-Light JavaScript, v2 course:
The "Lazy Arrays" Lesson is part of the full, Functional-Light JavaScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle illustrates that "eager" and "lazy" are ways to describe whether an operation will finish right away or progress over time. A "lazy array" is an array where the values will come in over time.

Get Unlimited Access Now

Transcript from the "Lazy Arrays" Lesson

>> Kyle Simpson: Our last unit of discussion for the course is asynchronous programming. Now I wanna clearly state, we are not doing even a remotely an exhaustive discussion of asynchronous programming. I have a whole day and half long course here on Frontend Masters about asynchronous programming. What I wanna do specifically is narrow in on how everything that we've learned up to this point in this course, converts to talking about values not that are just immediately present but rather values that are present over time.

[00:00:34] So here's the synchronous version of what we've been doing, an example. We start out with a list and the values are already here. And I can map over those values because they are already present and I get an immediate b list back that has the immediately transformed values in it.

[00:00:51] That works really well when the data is already present. But what about if the data is gonna come to you over time? If the data is coming to you from network responses. Or the data is a set of mouse clicks. Or it's a set of WebSocket events. Or it's stuff from a web worker or who knows?

[00:01:07] Any possible source of a-synchrony that's in your application can have data coming to you over time. So harkening back to something that we talked about earlier in the course. The difference between eager and lazy. This is the eager approach to data operations. Eager meaning we have it right now, we're gonna do it right now.

[00:01:31] The lazy approach is essentially to say I'll do it whenever it shows up. That's cool, take your time. Whenever that data shows up I'll perform the operation. That's essentially how we take everything that we've learned in this course about functional programming and extend it over time. Functional programming over time, that's basically what functional async sometimes as referred to as reactive programming it has a lot of different names.

[00:02:02] Basically what it is is taking functional programming techniques and extending them over time. FRP functional reactive programming. That is another term. A lot of different terms that refer to the same concept. So it really is about eager versus lazy. So I want you to imagine just for a moment that I had a utility called map lazy.

[00:02:23] This is a special kind of utility and let's look at what it does. I make an a Array that's empty. And then I make a b that is the lazy mapping of a. That means that right now both a and b are completely empty. But what I've said is If this mapLazy utility were to exist.

[00:02:46] I've said that at any point in the future, if I push a value into a, I want that mapper to run across that same value and stick it into b. So as soon as I call a.push(1), that 1 is in a of 0. But it's also been transformed into the value 2 at b


[00:03:08] So it almost sort of magically propagated itself to this other array. Do we see how that's taking functional concepts and extending them over time? This lazy mapping is just one example that I'm using. Later, we can call, a.push(2), same thing happens: two shows up in the second position of a, the doubling of that shows up in the second position of b.

[00:03:33] So it's almost like these arrays are like streams of values. These lazy arrays are basically just streams of values. Whenever one piece of date comes into this stream, it gets transformed and sent along this stream. If the regular array is the eager version. The lazy array would be the lazy version of the same concept.

[00:03:58] And all the operations that you can think of like map and filter and reduce and 100 others they can all be modeled either eagerly or lazily. So just like I showed you how we could take map and we could adapt it from a list to an object to any other kind of a data structure.

[00:04:20] You can also left map to work all the time and that's what mapLazy would be doing. Now that's just an ad hoc invention of mine and I want to move the discussion from the operator itself to the data structure because we really want to use the appropriate data structure for this so let's now think about what if I could create a lazy array.

[00:04:44] A LazyArray would automatically have map, filter and reduce functions on it that just knew what to do over time. We don't need separate utilities for it, we can just deal with it on the data structure. So, here is a LazyArray. Essentially the top of this is the producer.

[00:05:02] This is the source of data. We've got a set interval that's gonna run once a second and push a random number into the a LazyAarray, aka the a stream. And on the bottom, starting with line 9, I've got an observer. This observer is observing that a stream and every time a piece of data comes into the a stream it gets mapped, it gets transformed and put into the b stream.

[00:05:32] And so on line 13 I just call.4 each essentially. And I want this function to be called, this on value function to be called every time there's a new piece of data. So once a second we generate a random number, and then that would double in the b array and be exposed by calling the on value with that new mapped value.

[00:05:53] Everything we just talked about with eager functional programming, but now we've extended it lazily over time.
>> Kyle Simpson: That's actually one of my favorite and most exciting parts of functional programming, that all of these concepts that we've learned that work synchronously eagerly, they all work exactly the same. Or not exactly, but they all work conceptually similarly when we extend them over time.

[00:06:20] That's really powerful. Analyses the model of the entirety of our application using the same co-set of principles. Now, LazyArray is an invention of mind for the purposes of illustration. What we really mean, what we really need is an observable. LazyArray here is otherwise known as, aka, observables. Any of your heard of observables?

[00:06:48] Maybe you've read some blog post about them. They're certainly hot these days. There's some fantastic courses here on Frontend Masters about asynchronous programming talking about Observables. I cover observables in my course as well. So I just wanna briefly show you an example of using observables with a library that implements them.

[00:07:09] There's tons of power there that we're not even remotely gonna scratch the surface with. The RXJX library, it's a port of the RX library to the JavaScript language. And, we can create a stream if you will. In this case they call it a subject. But I can create a stream by saying new Rx.Subject.

[00:07:28] And then, every once a second, I can just call which pushes a value into that subject. And then down on line nine, I can subscribed to that subject, that observable, that stream, whatever term you wanna use. And then line 13, I called .subscribe on it. So that's basically the exact same as the previous snippet, the LazyArray that I made up except this isn't real existent thing.

[00:07:55] And we use .subscribe instead of .foreach But this exists. This library's been around for a number of years. There's a giant community around it. It's a great place to get started. There are other observables libraries if you're interested. I've got one, but RXJX is by far the one with the most documentation and community support.

[00:08:18] It just can be a very daunting set of documentation to go up against. So, make sure you allot plenty of time if you want to start learning Rx.