Short Circuit Evaluation

[00:00:00]
>> WebDevSimplified: Now another important thing to understand, luckily this is a much simpler concept than some of the stuff we've talked about before, is short circuit evaluation. Essentially inside of JavaScript, when you're doing these AND or OR checks, it is smart enough to know if you already are going to get into a failure state. For example, the AND operator, false AND anything will always be false because in order to have something returned true, they both must be true.

[00:00:23]
So in JavaScript, you can see here A is false AND B is true. So when JavaScript is evaluating this statement A AND B, what it does is it first looks at A and says, is this false or true? It is false. So JavaScript says, well, false AND anything is always false. So it doesn't even check what B is. Doesn't matter what happens on this B section, it completely ignores it. All it does is check A, sees that it's false, and continues on our code.

[00:00:47]
So now we have this section down here where we're doing A AND whatever this function is right here. You can see this is a function we call it an expensive function because it's just a function that does something really slow maybe. You can see here it doesn't matter if this return is true or false since A is false, we know no matter what this function does, the entire statement as a whole is always going to return false.

[00:01:07]
So JavaScript just skips this entire section right here and returns false automatically. To show you what that looks like, we'll just jump into our code and we will get rid of some of these comments. There we go, whoops. And if we just click save that, you'll notice nothing prints on the right hand side of my screen because JavaScript knows that A is false and false in anything always returns false.

[00:01:34]
I would instead need this to be true for JavaScript to continue executing because true AND something could be true or false. JavaScript doesn't know, so then it'll continue checking and actually run the code inside that function. So this short circuit evaluation is just a shortcut JavaScript takes that says, you know what, I already know this is going to be false. I'm not going to bother checking the second value.

[00:01:53]
And it's the exact same thing with the OR operator. We know that true OR anything is always true, no matter what that second value is, so we can just skip executing that second value. So in our case here, A is equal to true, so it doesn't matter if B is true or false, that entire statement here will always return true. So we just skip this entire second half. Same thing down here. A is true, so we can completely skip this entire second half of our input.

[00:02:18]
The main case where you may see this is when you want to provide a fallback value. So for example here, I want this display name to either be whatever the user types in as their name, or we're just going to default them to the name of guest. In our case, the user doesn't input anything. Empty strings evaluate to false, so false OR and then whatever it's over here is going to be guessed, this will evaluate to guest.

[00:02:40]
While if they typed in a name, for example, their name was Sally, Sally is a truthy value, so it'll just evaluate to Sally, skip this second section entirely, and set the display name to Sally. Now, this kind of ties into the fact that short circuit evaluation, they technically return a value. So when you're doing these types of evaluations with short circuit, we need to find the first place where JavaScript knows it can stop executing.

[00:03:05]
At that exact point, whatever that value is, that's what gets returned. So here we have a console.log with false AND hello. Well, false AND anything is always false, so JavaScript stops right here and returns the value of false. So this logs out false. While true AND anything, we don't know if it's true or false, so it keeps going and then it executes hello. So true AND hello, the last place we check is this hello statement.

[00:03:31]
So it returns the text, hello. Same thing here high AND by. This first one is a truthy value, so it doesn't know it could be true or false. So it goes to the next one, which is by. That's the last thing we see, so it returns by. That's the same thing for all the rest of these examples. Whenever we get to the first point where it doesn't have to check anymore, that's the value that returns, and it's the same exact thing with OR.

[00:03:50]
We come in here and we say false OR hello, well, it doesn't know when we get to false if it's true or false, so it checks hello, and now it knows what this value should be. It returns hello. When we get to true here though, true OR anything is always true, so you can see it just returns the value of true without even checking the second value here. So it essentially just cuts off all the stuff that it no longer needs to actually check.

[00:04:11]
Now there are some modern alternatives to doing some of these things such as setting default values and so on, and that is using nullish coalescing. So nullish coalescing is this idea of these double question mark syntax, and instead of checking for a falsy value, these check for only the values of null or undefined. So we take a look at their code here. I'll just copy this over. We'll just minimize this out a little bit.

[00:04:35]
There we go. So we have a configuration here with a timeout of zero and a debug that is set to null, and essentially any time we have a null value, we want to default that to a specific value. So inside of here our timeout 1 is going to be set equal to our timeout OR 5000, and here our debug is set to debug OR true. We should probably call this one debug 2. There we go. So in this first example, our timeout is being overridden to the value of 5000 because zero is falsy, so this evaluates to false, and then it's going to execute the second part, which is 5000, so it'll default timeout 1 to the value of 5000.

[00:05:11]
Nullish coalescing makes sure it only overrides value if there are null or undefined. So here, if we do timeout double question mark 5000, as long as our timeout is not null or undefined, it'll use whatever this value is. If our timeout is null or undefined, it'll fall back to this fallback value, which in our case debug is null, so it skips this and runs the second section instead. So it works very similarly to this double OR syntax, but instead it only checks null and undefined and doesn't care about falsy related values.

[00:05:42]
Now another thing is optional chaining. Oftentimes if you want to access deeply nested properties inside of an object, you would need to do a bunch of AND checks to make sure they exist. So for example, first we check the user if that's true, then we check the user profile. If that exists, we check the settings, and if that exists, we finally get the theme. This is a lot of really complicated code to write to make sure everything exists where we expect it to.

[00:06:05]
Instead, we can use optional chaining instead. So essentially just like you would use normal dot notation, if you put a question mark before your period syntax, what that'll do is it'll first check does this user object exist. If it does, find access to profile property. If the user does not exist, instead it just returns null and skips everything else that goes on. So it allows you to kind of short circuit out of here.

[00:06:28]
So either we'll get the user's profile settings theme if all of those things exist, or if they don't exist, this will just return to us undefined since it can't actually find what we expect it to. You can even do this with methods as well to check to see if this notified method exists, and then we call that function if it actually does exist on the object.