Simplify JavaScript code with Logical, Assignment and Optional Operators

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 7 months ago
Updated 2 months ago

The Logical Assignment Operators 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.

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

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today