Group data by keys using JavaScript Array Grouping (Object.groupBy)

Find Items from the end of the JavaScript Array using at, findLast and findLastIndex

Perform Set Operations using JavaScript Set Methods

Make JavaScript computations lazy using Iterator Helpers

Simplify array immutable changes with the new array.with method

Simplify JavaScript code with Logical, Assignment and Optional Operators

Manually settle a promise using Promise.withResolvers

Manage Asynchronous JavaScript code with any, allSettled new Promise Methods

Make JavaScript Numbers more readable using Numeric Separators

Improve Application-wide Error Handling rethrowing JavaScript Error with the Error Cause

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

You no longer need to write generator functions to create basic lazy iterator functions.

Now, ECMAScript supports iterator helpers that you can call on `Array.values()`. With these helpers, the values of an array will be operated on lazily, and will only run when the values are needed.



[00:00] Create the new array with some example data and let's apply a example operation immediately which is going to calculate what is the square of each element of the array. When working with arrays, bear in mind that the original array first has to allocate all the memory in order
[00:19] to store all the values it possesses already, but also a newly created array via map or filter or other array methods also need to allocate all the memory required in order to create the new array. In some cases, we would immediately require
[00:39] all of the newly created elements. But in other cases, we don't immediately require all of them. We might need just some of them to be created. And this is where iterators kick in and generally lazy evaluation. So what we could do instead to make this computation lazy would
[00:59] be to create a lazy iterator, which is going to be the function with the asterisk. So this is a generator which is going to accept what is the iterable which we're going to iterate over. And since we are mapping, what is the mapper function? So what we're going to
[01:19] do is to iterate over the iterable, so that would be const item of iterable. And in each turn of the loop, we would know what is the item. And since we are inside a generator function, we're going to yield, but not just the items since we want
[01:39] to map the collection. We're going to pass the item into the mapper function, and this way we're creating a lazy map implementation. So if we have the map over here over an iterable, we can call it just r, then we
[01:59] get an iterator. And now there is no calculation that has been already provided here. Of course, we need to provide what is basically the callback over here. So there is no calculation that has been executed so far. Just for the testing purposes, we could also do a console
[02:19] log which would tell us that there is some calculation taking place over here and then we would return what is the result. So when we actually call this iterator, there is no calculation that takes place. And let's assign this iterator into a
[02:38] variable. So again, since this is lazy, nobody has asked this iterator to create anything. No calculation has been executed. However, when we want to consume this iterator, and one of the ways to consume the iterator is basically to spread it into an array, then this would basically start
[02:58] asking the iterator, hey, please give me another value, give me another value. And here we get all the calculations. So we did make it lazy using this function. But as you can see, this is quite a lot of code. So what JavaScript has introduced is that once
[03:18] we do have an array, there was the values method, which was returning the array iterator, which was basically lazily yielding all the values of the array. The new thing in JavaScript are the array iterator helpers, which is the map,
[03:37] the filter, find every flat map, for each drop, and many other functions, which are going to do exactly what you used to do with the arrays, but in a lazy manner. So instead of writing what we have written over here, what we have are methods which
[03:57] look exactly the same as they do with arrays. So again, we can assign it end to end iterator and there is no calculation. So let's just make sure that there is actually no calculation. So console log, there would be a calculation string, displayed
[04:17] over here, calculation. And we would return what is x squared. So again, no calculation log over here. But as we consume the content of the iterator, we would see, yeah, there is some calculation taking
[04:37] place. So what we can do is basically that instead of running array dot map, which is going to eagerly execute the operation that we have defined over here, which is going to immediately invoke all the calculations.
[04:57] Nevertheless, whether you need it or not, or your users, your application need it or not, the thing that you can replace it with is basically to put the dot values and dot map. So thanks to the iterator helpers, you can make it automatically lazy. And if the items are required,
[05:17] the all the calculations will get executed so there would be no difference. However, if all the elements are not yet required, JavaScript is not going to execute it because, well, because this is lazy. So all that you can do is is basically to think about whether you could put the dot values over
[05:37] here so many of the methods resemble their array corresponding methods.

Course

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

Make JavaScript computations lazy using Iterator Helpers

Share this video with your friends