Functional-Light JavaScript, v3

Map Lazy & Lazy Array

Kyle Simpson

Kyle Simpson

You Don't Know JS
Functional-Light JavaScript, v3

Check out a free preview of the full Functional-Light JavaScript, v3 course

The "Map Lazy & Lazy Array" Lesson is part of the full, Functional-Light JavaScript, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle analyzes how lazy mapping functions and lazy arrays would work, and how functional principles could be adapted to asynchronous programming - turning synchronous and eager operations into asynchronous and lazy operations.


Transcript from the "Map Lazy & Lazy Array" Lesson

>> Kyle Simpson: So far in this course, we've looked at a whole bunch of different perspectives on how we can perform operations on values in a functionally consistent way. But all of the values that we've been performing them on have been values that are present at this exact moment. For example, we take the number 42 and we increment it to the number 43.

Or we take a list of these numbers and we turn them into a list of strings. These are all things that are present immediately right now. The great part about functional programming is that all of the concepts that we have learned extend not just to the values that are present now, but also to the values that will be present eventually.

So we wanna look at a way, a way, not the only way, but a way of adapting functional principles to asynchronous programming. I wanna motivate that by first saying, here's a synchronous version of a .map operation. We have an array called a with the values 1, 2, and 3 in it and we call, we're gonna get another array back b that has 2, 4, 6 in it.

We can only get that array 2, 4, 6 because the numbers 1, 2, 3 were in the array at the time of .map call. If I flipped this code around, if I said on an empty array and then after the .map call, I added the numbers 1, 2, 3 in it.

You're not gonna expect those numbers to have ended up in b, are you? So that's what we mean by it is synchronous and it is eager, it's gonna consume everything that it has available to it in that array and it's gonna do it right now. And if there's a value that comes later, if I later on line 8 said a.push 4.

A values is not gonna show up in b, is it? Only the values that show up in b are the values that were in a at the time of the map. That's what we call synchronous and eager operations. But how could we do that same sort of functional concept of mapping and do it lazily over time?

It seems like such a great concept, is there any way to adapt it over time? I'm gonna conceive of a hypothetical data structure. This isn't something that actually exists. But I want you to imagine if I had an operation called mapLazy, instead of map which we know is map eager, what if I had a mapLazy?

It doesn't matter that this doesn't exist, this is just a construct for us to consider. Imagine a mapLazy that creates some sort of a relationship between a and b. Where, at the moment, on line 6, b is empty but at some later time when I call a.push(1) and a has the value 1, guess what is gonna be in b?

It's gonna sort of retroactively run that map operation and show up in b. And then later I could do a.push again and the value will be not on the originally in a, but the mapped value will show up in b. Can you see why a lazy map like that would be a nice, cool tool if we had, it could create this sort of asynchronous relationship between a and b.

And it would solve a lot of our problems in terms of mapping, or in terms of annotating in our code, flows of data that are not synchronous, but asynchronous, right? Imagine a composition that was like an asynchronous composition. Where the thing was here, and then it was here, and then it was here, and then it was here, but there was time involved in between.

So mapLazy isn't a thing that exists, at least not in this particular formulation. Let's twist it around a little bit and instead of thinking about a mapLazy over regular arrays, maybe what we really need is a lazy array. What is I could construct a thing called a LazyArray, we'll call it a.

And then over time, I'm just gonna set up an interval and over time, once per second, I'm just gonna push a random number into a. That would be an interesting data structure because if I were then to set up a b, which was a mapping from a, over time I would see the value showing up in b, after they showed up in a.

And the value that would show up in b was the mapped value from what it was when it showed up in a. They've been instantaneous propagation from a over into b. Every time and he showed up, it would get mapped to a new value in b. In this b.forEach was sort of just be like an event handler that was just getting called every time a new value showed up, it invoked the forEach and in this case console logged it.

So it's sort of an event listener almost, lazyArray would be a pretty cool data structure, wouldn't it?

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now