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, ...)

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.

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.

Simplify JavaScript code with Logical, Assignment and Optional Operators

Share this video with your friends

Course

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