JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Learn how the latest JavaScript features can help you improve your codebase. 

[Array Grouping](https://github.com/tc39/proposal-array-grouping) is the new feature of JavaScript/ECMAScript, which splits an array (or, generally, an iterable), into smaller sub-arrays. Grouping is different than other JS array methods - it's *not* a part of the array prototype, but a static method.

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

Finding elements starting from the end of an array has gotten a lot easier with the introduction of the `at`, `findLast`, and `findLastIndex` methods!

With `at` you no longer need to remember to access the end of the array like `array[array.length - 1]` trick. You can just call `.at[-1]` to get the last element!

`findLast` and `findLastIndex` work the same as their `find` and `findIndex` counterparts. But, they work backwards from the end of the array. This is useful if you know what you're accessing is going to be closer to the end.

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

The ["Set Methods"](https://github.com/tc39/proposal-set-methods) proposal introduces 7 new methods to JavaScript/ECMAScript:
- `union`
- `intersection`,
- `difference`,
- `symmetricDifference`,
- `isSubsetOf`
- `isSupersetOf`
- `isDisjointFrom`

Thanks to them, complex operations using JavaScript sets will become much easier.

Perform Set Operations using JavaScript Set Methods

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.



Make JavaScript computations lazy using Iterator Helpers

The new [Array.with](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with) method gives you an immutable syntax for changing values of an array at a specified index. 

Sometimes `.map` will be more efficient. So, in this lesson we'll compare both methods while replacing an object at a specific index.


Simplify array immutable changes with the new array.with method

The [Logical Assignment Operators](https://github.com/tc39/proposal-logical-assignment) bring syntactic sugar over verbose syntax which enforced us to write explicit `if` statements. Thanks to the new operators `||=`, `&&=` and `??=` we can express the conditional logic in a more concise way.

Simplify JavaScript code with Logical, Assignment and Optional Operators

If we want to be able to modify the state of a promise from outside the constructor, we can use the [Promise.withResolvers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers) method to get access to the promise, and its `resolve` and `reject ` functions. 



Manually settle a promise using Promise.withResolvers

[Promise.any](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any) takes an iterable of promises and returns a promise that fulfills with the first promise that fulfills, and rejects when ALL of the promises in the iterable reject. 

[Promise.allSettled](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) takes an iterable of promises, and returns an array of objects. The objects have a `status` property which is a string that is either `"fulfilled"` or `"rejected"`. If the `status` is `"fulfilled"` the object will contain a `value` property with the resolved value of the promise, and if the `status` is `"rejected"` the object will have a `reason` property with the reason for the promise's rejection. 

Manage Asynchronous JavaScript code with any, allSettled new Promise Methods

You can finally make your numbers more readable in JavaScript. Add underscores in all types of numbers including BigInt, floats, hexes, octals, and binary to improve their readability. 

Just don't add the underscores to the beginning or end!

Make JavaScript Numbers more readable using Numeric Separators

The new [cause](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause) data property that you can add to a thrown `Error` can be used to retain access to the original error caught in a promise rejection. 

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

Take an in-depth look at how to use promises to model various kinds of asynchronous operations.


JavaScript Promises in Depth

Explore JavaScript (es6) array methods. We will slice, join, map, and reduce our way to better understanding of the powerful array methods that modern JavaScript delivers.

Understand JavaScript Arrays

JavaScript ES2019 in Practice

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

https://app.egghead.io/api/v1/lessons/javascript-group-data-by-keys-using-javascript-array-grouping-object-groupby/subtitles

[00:00] Use the object dot group by static method on the object prototype in JavaScript. So in this example, we're going to work on the people array, which includes a couple of objects. Each of them includes the name attribute, the specialization attribute, and the boolean active attribute. So
[00:19] let's group this array items by, let's say, the specialization key as for now. Note that the group by method doesn't exist on the JavaScript array prototype. It exists just as a static method on JavaScript object. So we need to pass what is the collection that we want to group. So
[00:39] in our case, this is going to basically be the people. And now we're going to pass a key selector. So key selector is basically a callback, that for a given item returns what is the key that we want to generate. This can be any expression that we want to create the key out of. So
[00:59] if we just stick to what is the value of the specialization property, then we can just group all the elements by the specialization property. So let's just make it slightly more idiomatic and destructure the specialization, property from within the object. So we can see that there
[01:19] is a front end group, including Alice and Dan, which are front end developers. Let's say DevOps, which is basically Cecile and the back end folks, which is, Bob and Elia. So here we are using the existing property, the specialization 1, which
[01:39] does exist on each of these objects. But we can also generate a key dynamically. We can use whatever we want within this callback over here. If we have an item, we could, for instance, group them by what is the value of the active property. We can create a dynamic expression using
[01:59] the values that are available within the item variable. So we have the item dot active, and let's just also write it that this is active, and here is the value. So active false is basically, Dan and Bob and the other three ones are going to be
[02:18] active true. What is also important is that the object dot group by method doesn't necessarily have to accept an array, but the items parameter, which we can see over here, could be any iterable. So an array is automatically an iterable in JavaScript, but other collections or
[02:38] our custom iterators can also be iterables. So let's take a look at the people set. So I have modified the array to become just a set over here so that we have exactly the same data, just it is not an array. It is just a set. And both arrays and sets are iterables. So
[02:58] we can check whether something is an iterable by checking whether the symbol dot iterator property is implemented. So iterator is defined, and we can actually call it so that this is the iterator. So every iterable implements the iterator.
[03:19] Object dot group by using the people send variable. And we're going to run the very same selector key, which is going to grab the specialization over here and return it. And we have exactly the same result as we've had with the array. We could also create a manual
[03:39] generator. So if we cannot use an array or a set or a ECMA script map or anything that is a built in iterable, we can also create a generator function, which is going to be the people generator. In our case, it's going to yield the same values that we've had before. So this implements
[03:59] the iteration protocol. Once we know that we do have something that is going to be iterable and generator itself is not yet iterable, but if we call it, then it becomes an iterator and it is iterable. So let's just make sure that object dot group by is going to work with an iterator.
[04:19] And here, we're just going to pass the very same key selector over here. And here we get the very same result as before. So what is important here is that whether it's an array, a set, or map, or even our custom iterators, object dot group by is going to work well.
[04:39] Also, instead of just object dot group by, there is a group by, method which does exactly the same on the map prototype in JavaScript.

https://app.egghead.io/api/v1/lessons/javascript-group-data-by-keys-using-javascript-array-grouping-object-groupby/transcript

https://app.egghead.io/api/v1/lessons/javascript-find-items-from-the-end-of-the-javascript-array-using-at-findlast-and-findlastindex/subtitles

[00:00] Let's create an array with some example elements. When we want to reach an array item, counting from the beginning of the array, counting from the left hand side, there is nothing interesting. It's very simple. We're just passing what is the index within the square brackets, which is the index access. However, this notation is not really convenient if we want to
[00:20] reach an element somewhere from the right hand side, from the end of the array. And that's because first, we have to grab what is the length of the array and then not to forget about subtracting the value 1 because arrays are being index from 0 and a length of the array is a positive number. So failing to
[00:39] remember about this can lead to pretty simple to fix, though maybe not very simple to spot, bugs in our code base. So just to make things simpler and just not to being forced to remember about these things, JavaScript has introduced a new at method, which is certainly not the
[00:59] array index access, so not the square brackets. It is just a method, which is going to work exactly the same when we're accessing the values from the beginning, from the left hand side of the array. So nothing changes here. However, if we want to reach the elements from the end, we just need to pass a negative
[01:20] index. So passing minus 1 is simply going to reach the last element. Then if we want to reach one element before. So second from the last, this is going to be minus 2. And the same way, we can basically calculate whatever the index is just counting from the very end.
[01:40] Let's clear the console and reintroduce the array back again for clarity. When we want to grab the first element of the array which meets a condition, we can use the array dot find method, which is going to traverse the array from the left hand side and simply return the first item that meets the condition. So let's just create an
[02:00] example. So we're going to return the fairest element which is going to be bigger or equal than 9. So that's very clear what is going on here. However, if we take a look what is going on underneath, let's just introduce a console log statement inside.
[02:20] We're just going to console log that there has been a check and we will see that there has been 9 checks before the first item has been found. So what JavaScript has introduced recently is the find last method, which is doing the very similar thing.
[02:39] However, it's traversing not from the left hand side, but from the right hand side, which can improve the performance when we need to traverse the list. And we know that this is going to be somewhere near the end and not near the beginning. And similar, as we have the find index method, which is
[02:59] again, traversing the array from the left hand side. We have an analogic method, which is finding the index from the end of the array. So we can see that instead of 9 checks, we have only one check.

https://app.egghead.io/api/v1/lessons/javascript-find-items-from-the-end-of-the-javascript-array-using-at-findlast-and-findlastindex/transcript

https://app.egghead.io/api/v1/lessons/javascript-perform-set-operations-using-javascript-set-methods/subtitles

[00:00] First, create a set with some example values. So here we've got set a, b, c which includes 3 string primitive values a, b, and c and let's create another set so that we can perform the operations c d e So we have some items which are exclusive for the sets and the c value, which is
[00:19] included in both of the sets. So the first new operation which we can execute is to create a union, on the 2 sets. So a union is basically going to be a new set, which includes the values from either the set on the left hand side or the set on the right
[00:39] hand side. Another operation which is possible is to create an intersection. So when we write s dot a b c and we run an intersection, we're going to, have a new set, which is going to include only the elements that are common, which exist in both of the sets.
[00:59] So the elements which are being members of both set a and set b. Another operation which we've got is the difference of the sets. So s a b c dot difference, set c d e is going to get all the items which are included
[01:19] within a but are not included within set b. So in our case, this is the string a and string b. The string c is excluded because this is a part of the the other set, which we're, making the difference from. Another one is the symmetric difference. So we want to have the elements
[01:39] which are part of the first set or the other set, but which are not part of both sets at the same time. So what we're doing is basically set number 1 dot symmetric difference, set number 2 with s c d e in our case, and what we'll have is, basically
[01:59] all the elements without the common part over here. So these 4 operations, union, intersection, difference, and symmetric difference, return a new set. There are more operations which will return a bullion value for us. So the disjoint or actually is disjoint
[02:18] from is going to return whether the 2 sets have any, overlap or actually if there are disjoint meaning there is no overlap. So is disjoint from s c d e. Now there is some overlap between them. So this is going to return false, obviously.
[02:38] Now if we return a different set which would include basically, this is a b c so let's make it only, d e. In this case, that would be true because there are no values which are included in both of the sets. In our
[02:58] case, we are, comparing only primitive values. We'll get back to object values in just a while. So that was disjoint. Now, one of the most fundamental operation is checking what is whether a set is a subset of another one. So here, we're checking whether a is included within b, which
[03:18] means whether each element of a is also an element of b, which in our case is going to be false. So s a b c dot is subset of s c d e, which is going to be obviously false. I forgot to write a subset of.
[03:38] So this is obviously false since in our case, the a b c includes a and b and c, and a and b are not parts of the CD, so this is false in this case. And there is finally the last operation that is available that is s dot a b c dot is superset, which
[03:58] basically checks whether the set includes another set which is its own subset. This basically checks whether all elements within the c d e one are included within the one that we're running the method on. So if it was the case that c d e was also included in a b c that would return
[04:17] true, obviously, that is false. But if we change it to new set, which would include basically, let's say, a, now the question is, are they also a part of the a b c? The answer is obviously true. So here we've got true. Now in all the examples that we've seen so far, we have seen that the compared
[04:37] values were primitives. So primitives values in JavaScript are compared by just their values in line. This is going to be slightly different when we're speaking about objects. So let's create just OBG 1, and let's create OBG 2. So they have the same value, but they are obviously
[04:57] different references. And since JavaScript compares objects by references, sets, maps, and different JavaScript data structures are also going to compare objects by references, not just by their values. So if we create a new set, let, set which includes object 1 and we would
[05:17] create that this is new set which includes OBG 1. Oh, sorry. So here we've got set, o one. So this is basically a set which includes 1 object. This is just an empty object. If we want to check what is its intersection with a new
[05:37] set, which includes basically an empty object, the reference to this object and the reference to this object are going to be different. Hence, what we've got here is basically an empty set. However, if we grab the same original reference, now this would be treated as
[05:56] if there was some element that was common in both sets. Just remember that objects are compared by reference in JavaScript.

https://app.egghead.io/api/v1/lessons/javascript-perform-set-operations-using-javascript-set-methods/transcript

https://app.egghead.io/api/v1/lessons/javascript-make-javascript-computations-lazy-using-iterator-helpers/subtitles

[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.

https://app.egghead.io/api/v1/lessons/javascript-make-javascript-computations-lazy-using-iterator-helpers/transcript

https://app.egghead.io/api/v1/lessons/javascript-simplify-array-immutable-changes-with-the-new-array-with-method/subtitles

[00:00] Let's create an array with some example data using the famous to do's example where every item is an object having 3 properties. The to do ID, the to do itself, and the boolean property that are minding whether the to do has been completed or not yet. Our task is to modify a given to do
[00:19] object and switch the completed boolean property from false to true or from true to false. Let's say that in our case, that would be to do ID 1, whatever. And let's say that there would be way, way, way more to dos than the 2 that we can see over here. So in the
[00:39] simplest scenario, we could basically mutate the array. So in this case, we would run the to do's dot find where we want to find the to do with a certain ID. So that would be the to do ID 1. And we could change the value of the completed property over here by
[00:59] assigning that it would be a negation of what the original value of the completed property was. This would work in some scenarios. However, it could be troublesome if our JavaScript framework or library require immutable changes. So some frameworks and libraries require us
[01:19] to create new objects whenever we want to change anything. And we need to create a new object, not only for the object that we're modifying, like creating the clone for, but also to all the parent objects that include it until the very root of the state object. So if we want to create this
[01:39] change in an immutable fashion, what we could do would be to use the to dos dot map, the array dot map method so that we would create an array having exactly the same items, but we would basically replace only one of the items over here. So for each to do, we would need to check whether
[01:59] the to do ID is the one that we want to modify, the one that we want to create a clone for. And if it's the one that we would create a new object, however, if it's not the one, then we would basically pass it through. So let's start with, pass it through scenario so that if this is not the one that
[02:19] we are interested in, basically, leave it as it is because there is no reason for us to create a new object to clone it. However, if this is the one that we want to change, let's create a new object where we are going to start with spreading what is the content of the original one. And
[02:39] we would like to modify what is the value of the completed property. So the completed property, the new value is going to be the negation of what it used to be before. And in the scenario where our framework or library requires us to create a new state object in
[02:59] an immutable fashion, this could do the trick. However, in some scenarios, this might not be very convenient and it could get slightly simplified. So what JavaScript has introduced recently is the array dot with method, which accepts the index which
[03:19] we index of the element that we want to replace and the value that we want to replace over here. So in our case, the ID, the index would be 0 and the value would be basically the new object. So in some scenarios, the map with the if statement inside would be simpler and in some other cases,
[03:39] array dot width would be simpler. So let's see how would it work in this example. So let's start with what is the index of the element that we want to find. So that would be basically the to do's dot find. And here, since we want to get the index, let's basically find the index. So
[03:58] this is basically index 0. And what we're going to do is the array dot with where the index is the index itself. And the value that we want to replace is going to be a new object where we are going to spread what was the value of the object
[04:18] that we've had using the add method. And we want to override what is the value of the completed property. So we want to reach what is the value of the completed on the original object. So let's use the same one. And here we're just going to negate it.
[04:39] And we've got the very same result. So in some cases, map with the condition inside would be simpler. And in some other cases, for instance, when we know what the index is, the array dot width would be also simpler. So remember that array dot width is creating a new
[04:58] array. It doesn't mutate the existing array.

https://app.egghead.io/api/v1/lessons/javascript-simplify-array-immutable-changes-with-the-new-array-with-method/transcript

https://app.egghead.io/api/v1/lessons/javascript-simplify-javascript-code-with-logical-assignment-and-optional-operators/subtitles

[00:00] We can use shorthand syntax to express operations such as this if statement. In our example, we've got the type stuff which includes some number types and, an empty string, the value string, a bullion, null and undefined, basically, some primitive values. And we've got the let variable of the
[00:19] type stuff. Now we want to display what is going on here using basically a very simple console log over here. The console log before and the console log after, I'm just going to paste what is going on here. So when we start with the let arc, which is false, and we run the console log, we'll see basically
[00:39] that the operation before the if statement, we've got the value which is false. Now since this is falsy, JavaScript is going to execute what is inside the if statement. And after the if statement, the value of arc is certainly value. So the shorthand syntax here is that we want to
[00:59] apply what is basically going to be the operation here. So if argument is falsy, then please assign it to value. So this looks like an assignment operator, but actually, it behaves as a conditional assignment. So let's
[01:19] see how is this going to, work. So let's start with let arc false. And here we've got that this is exactly the same thing. So if we take a look what arc here in TypeScript used to be before this if statement, we can see basically that it could be any of the stuff. Now what could the
[01:39] arc be after the if statement? We can see that it could be only the truth values. Now why is that? Because if the value was 0 or the empty string or false itself or null or undefined, and that was basically all the falsy values, then if
[01:58] they were falsy, they would get replaced with value. So arc is not going to get replaced with value only if it was 1 or value itself or true. And this is what we see. So TypeScript is aware of how all these things work, although this is basically a JavaScript
[02:18] runtime operator. We can also see how does TypeScript interpret it. Is that if this was truthy, then there is no need to execute the statement. The same way, we can also see the end and equal, which is going to execute the assignment only if arc was truthy. So that arc gets removed all
[02:38] the truthy values. So let's just see, what would happen if we have the let arc false. And now let's just execute it with this one. So this is false false, so let's just replace it with true. So if it used to be true, then we are going to replace it with a value. And let's just quickly
[02:58] write the equivalent so that we would have if arc was truthy, then replace arc with what it would be. And that would be value. So that we can see that these 2 are pretty much equivalent. And finally, there is one more, That
[03:18] is the nullish coalescing operator, which basically checks whether something is a null or undefined. So what arc used to be before the operation could be any of the stuff. But what it can be after the operation is it could be any of the numbers, any of the strings
[03:38] that we have included, and any of the boolean values. But it could not be null and undefined because this operator only cares about null and undefined itself. So that's basically it. Let's just put an undefined value over here as the starting one. So we can see that if it was undefined, then it's going
[03:57] to be a value now a equivalent, which would be anything that is basically not a null or undefined. This is basically left untouched.

https://app.egghead.io/api/v1/lessons/javascript-simplify-javascript-code-with-logical-assignment-and-optional-operators/transcript

https://app.egghead.io/api/v1/lessons/javascript-manually-settle-a-promise-using-promise-withresolvers/subtitles

[00:00] Create a new promise using the promise constructor. The promise constructor accepts one parameter which is a callback which will be executed synchronously, and the callback would get injected to other callbacks, which is the resolve and the reject
[00:19] function. A newly created promise is in pending state, which means it's neither fulfilled nor rejected yet. And the first function out of these 2 to be called would settle down the state of the promise. So if resolve was called, then the promise would fulfill unless it was called with
[00:39] an error, then it would reject. Or if reject was called, then the promise would get rejected. So in some situations, especially in tests, what we would like to do is to modify the state of the promise from outside of the constructor. For instance, when an event took place such as there was
[00:59] a user interaction like a button on click, whatever. And we would like the promise to get resolved or to fulfill, reject, or to settle in any other way. The problem, however, is that we don't have access to the resolve callback from within the constructor. So the only hack
[01:19] to achieve this goal so far was to create 2 additional variables which would basically get the reference to what resolve and reject were inside the constructor. So what people used to do would basically assign to res what resolve used to be and assign to reg what reject used
[01:39] to be, which is clearly a abstraction leak. So this would work in this case. However, the new approach is that we can use a slightly different approach to create a new promise, and that would be to use the promise dot with resolvers.
[01:58] So a new promise which we're going to create is a promise dot with resolvers function which is going to return us what is the promise itself but also what is the resolve and the reject callback. And this way, we don't need to do any dirty
[02:18] workarounds. We have immediately the access to the resolve and reject callbacks of the promise.

https://app.egghead.io/api/v1/lessons/javascript-manually-settle-a-promise-using-promise-withresolvers/transcript

https://app.egghead.io/api/v1/lessons/javascript-manage-asynchronous-javascript-code-with-any-allsettled-new-promise-methods/subtitles

[00:00] Create a new promise using the static methods of the promise constructor. In this case, promise dot any. It accepts an iterable of promises which most of the times is going to be simply an array of promises. And let's pass a promise that is immediately fulfilled with an
[00:19] example value 125, and let's await the promise aggregate any. So promise dot any is waiting for any of the promises to fulfill. So waiting for the first one to fulfill. Let's also create another promise, which is going to be
[00:39] promise dot all settled, which we're going to pass again and iterable of promises and promise dot resolve with 125. So this one is going to resolve when all of the promises passed as the array parameters will
[00:59] settle. So no matter what is their status, whether they are fulfilled or rejected. So if we have immediately resolved or rejected promises, we won't see the differences in how they work. So let's introduce a utility functions. So the fulfill function is going to create a
[01:18] promise which will fulfill after a time out of after some time has passed, And it's going to fulfill with the value that we pass over here. And the rejected function is going to create a new promise that would reject again after some time has passed with the reason that has been
[01:38] passed as the parameter. So let's see how does both fulfill and reject work in practice. So let's pass the success string into the fulfill. And let's fulfill the promise after one second. So after one second has passed, we're expecting a
[01:58] wait to grab and show what is the success value of the fulfilled promise. And again, await, reject, and let's pass kaboom string after 2 seconds. So we're expecting a string to be thrown after exactly 2 seconds, and this is what we
[02:18] get. So let's also create the const. I promise 1p 1, which is again the fulfilled promise. And let's create also the const p 2, which is a newly rejected promise. And let's see how do different
[02:38] promise aggregates work. So when we use the promise dot all, it means that this one will fulfill when all of these fulfill. So in our case, the first promise will fulfill. The second will reject. So the whole thing will reject with the reason of the
[02:58] first promise that has failed. So the first to fail will also fail the promise dot all aggregate. So the reason for the first failure is also the reason for the failure of the whole aggregate. The other aggregate that we have known for a couple of years was promised not race,
[03:18] which is going to figure out the first one to settle. So it could also be called first settled. So the first settled by the meaning of the passage of time would be the first fulfillment of p one. So this is basically going to be success only because it was the
[03:38] first one. So the new aggregates, in this case, any, this is going to wait for the first to fulfill. So in this case, this is going to be a success after one second. However, if we switched what is the order over here, so the first one to settle at all would be kaboom, but we're
[03:58] waiting for the 1st to succeed. And after 2 seconds, it does take place. So this was promised dot any and promised dot all settled is going to wait for all of the promises to settle no matter what is their status. So once all of them settle, we're going to
[04:17] get both the status and the value or the reason, depending whether a promise has been fulfilled or rejected. So promise dot all settled might not fulfill if any of the promises remain pending forever.

https://app.egghead.io/api/v1/lessons/javascript-manage-asynchronous-javascript-code-with-any-allsettled-new-promise-methods/transcript

https://app.egghead.io/api/v1/lessons/javascript-make-javascript-numbers-more-readable-using-numeric-separators/subtitles

[00:00] Use the underscore character to separate certain digits in a way we write certain numbers. So here we've got a bunch of example numerical values. Here are some decimal values. Here we've got a binary representation. Here we've got an octa and a hexadecimal
[00:21] representation. And finally, we've got a big end value. So all of them are valid JavaScript numbers. So let's take a look at how we can make these more readable. So the whole thing is that we put an underscore in between the 2 digits somewhere in the number literal. So
[00:41] it's very useful and convenient for us to put the underscore when having big numbers, each 3 digits so that we can quickly see what is the order of magnitude of a certain number. The same way here, we can put every, underscore between every 3 digits. So we don't need to put it every
[01:01] 3 digits. It basically depends on what is convenient for us in a certain use case. So we could put it this way, though, that would not be very useful. But if we move away from decimal representation into, let's say, a binary representation, that would be way more useful. Let's put a separation each 4 bits
[01:21] like this one so that we can quickly see that here we've got 4 bits and 4 bits. So this is 1 byte. Again, this is 1 byte. So this is a 2 byte value, 2 byte representation. Or if somebody would basically like to have 8 digits, we can quickly see that this is basically being a 2 byte
[01:41] value. Whatever is convenient for you, we can also put the separation in the octa representation or in a hexadecimal representation so that we can separate certain digits over here. And the same way, we can also put the separation within a big int value over
[02:00] here. So these are all valid values as well. Let me just put the underscore in the fraction and in the exponential part of the values. These are all valid. So we can take a look at what is the binary, what is the octa value, what is the big int, what
[02:20] is the hexa value, as well as what is the 1 millionth. So there is, actually no difference between the values. Underscore is being purely ignored. So one thing that you could, pay attention to is that this underscore cannot be anywhere.
[02:40] It has to be between any of the digits of the literal. So for instance, if this is a bigint value, basically one as a big int, we cannot put it over here because the underscore cannot be at the very end. So basically, this is a syntactic limitation.
[03:00] In the same way, it cannot be at the very beginning because underscore is treated as the character that is a part of the identifier. So in this case, JavaScript is trying to look for, variable or for any token that has this exact name.

https://app.egghead.io/api/v1/lessons/javascript-make-javascript-numbers-more-readable-using-numeric-separators/transcript

https://app.egghead.io/api/v1/lessons/javascript-improve-application-wide-error-handling-rethrowing-javascript-error-with-the-error-cause/subtitles

[00:00] Create an async function, which will load some external data. In our case, we're going to use the fetch API, but if you want to use a different API for ATP requests, it does make a big difference. So we're pretending that we would run a request against a URL that doesn't
[00:19] exist, and that's because we want to trigger a situation where the request fails and we want to process the error handling. So in some situations, you would like to catch the error, send it to an external monitoring service, whether it's in your infrastructure or an external
[00:39] paid infrastructure. You would like to send it to the monitoring and then rethrow the error so that your application layer, whether it's framework a or framework b, would process it further. So let's catch our error. And when the error is here, what we would like to do is to send this
[00:59] log to this monitoring service, whatever that is. And for this reason, let's create this function, const send log. Most probably in most production applications, this would be a function which comes from some SDK coming from the external vendor. In our case, what we're going
[01:19] to mock here is basically a function that basically runs a console log. So let's imagine that this is basically a function from an external vendor SDK. So what we're doing is first we want to send this error to the external service And what we want to do now
[01:39] is to rethrow the error so that our application could proceed with error handling just as this catch would not exist here. So we could just rethrow the error with some custom message and that is loading stuff failed or whatever the message is. And using
[01:58] the error cause, which is the new thing in JavaScript, we can pass the second parameter, which is an option back where the cause property accepts what is the error over here. So let's create this function and let's run this function actually. So what we see is that, first of
[02:18] all, this is the original error and this is the error that has been re thrown but hasn't been processed further. And this is, of course, our external monitoring, this mocked function, this send log. So how we can actually make use of this cause is when we would run
[02:38] this fetch stuff function again. So let's try to run this function. And here, using a catch, we would catch this error, of course. And what we can see here is that we can console log or use it in any other way. What is the error itself, but we can also
[02:58] see what is the cause of this error. So that we have both access to what was our custom message, but also what was the original message in the original error being thrown by fetch or other HTTP API.

https://app.egghead.io/api/v1/lessons/javascript-improve-application-wide-error-handling-rethrowing-javascript-error-with-the-error-cause/transcript

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

Tomasz Ducin

Free Community Resource

You might also like these resources:

JavaScript Promises in Depth

Understand JavaScript Arrays

JavaScript ES2019 in Practice

Free Community Resource

Course Content

You might also like these resources:

JavaScript Promises in Depth

Understand JavaScript Arrays

JavaScript ES2019 in Practice