Short Circuit Evaluation

Boolean operators like and and or are very useful for 0:00 testing multiple conditions in one statement. 0:04 For example, in a browser based game, 0:07 you could test if the time had run out or the player had to use all their lives. 0:10 If either were true the game would end. 0:15 Likewise with the and operator. 0:19 It makes sure that multiple conditions are true before 0:21 evaluating the entire conditional statement to be true. 0:24 Some programmers use boolean operators to perform what's 0:28 called the Short Circuit. 0:31 It's basically a way to optimize code by stopping the evaluation of an expression 0:34 as soon as an outcome is known. 0:39 It's often used to quickly assign a value or execute code. 0:42 Let's take a look at some examples. 0:47 Open up the workspace on this page to follow along or 0:49 feel free to follow along in your local environment. 0:53 Lets start by looking out the result of a boolean and operates its of the console. 0:57 This will log out to be true, because both expressions evaluate to true. 1:16 Let's run this to be sure. 1:24 Great, now let's replace the second expression with the string. 1:29 For example, cow. 1:33 Now what do you think will happen? 1:36 A string with a length greater than zero can evaluate to true because it's truthy. 1:39 So will this print true? 1:45 Let's try it. 1:47 It printed cow. 1:51 That's because the operator actually returns 1:53 a second value if the first one is truthy. 1:57 Let’s add another boolean and with the string chicken. 2:00 Running that, we get chicken, because all operants 2:11 are truthy. 2:15 Now let’s change cow to false. 2:20 If we run that, we get false back, that's because the JavaScript's 2:25 interpreter starts with the leftmost expression and then moves right. 2:30 If any of the operands are falsey the first falsey operant is returned. 2:39 And any operants that follow aren’t considered. 2:45 So the interpreter never even considers this string chicken in this case. 2:50 Everything after the false is short-circuited. 2:55 We can see this By putting a statement as one of the operants. 2:58 Let's remove consul.log at the beginning and 3:03 instead use it in the final operand logging chicken from that. 3:09 When we're on this now, false is returned and the log method is never called. 3:16 This behavior allows us to check a condition and then run code only if it's 3:23 true, replicating an if block in one concise line of code. 3:28 Let's just replace false with cow again. 3:36 And let's make sure, we'll run, both the preceding operands are truthy. 3:41 Now when we want it again, the log method is executed and 3:47 this string chicken appears. 3:52 Let's look at the boolean or operator now. 3:55 It returns the first truth value it finds as it reads from left to right. 3:59 Let's replace our two && operators with | |. 4:05 And let's look the expression. 4:13 In this case, the first expression is truthy because three is equal to three and 4:20 the equality operator returns a boolean value. 4:28 So we see true is logged. 4:33 If we change one of the threes to four what do you think will happen? 4:36 Cow is the first truth value that the interpreter 4:42 comes to so it's returned is an important note however 4:47 if all of the values of falsely the last one is still returned. 4:52 If we change cow to false, and chicken to zero, and 4:58 run it, zero is logged. 5:03 You wouldn't want to replicate a complex branching condition 5:08 using logical operators in this way. 5:12 If else and switch statements are better for 5:15 multiple branches, but let me show you a few ways short circuiting can be useful. 5:19 For example, let's say we have a function named is adult, 5:25 that we want to use to return true or 5:30 false Based on a number passed into the function. 5:34 If the number represents an age, and is greater than or 6:03 equal to 18, we want to return true. 6:08 If no number is passed into the function, 6:12 the number is less than 18 we want it to return false. 6:15 You could write the function with an if else statement like this. 6:19 The condition here is checking both the age exists of the first part before the && 6:23 and that the age is equal to or greater than 18. 6:29 You could rewrite this much more concisely using short circuiting. 6:37 Let me run this in the console and 6:52 to see will get a false value undefined when none number is past in. 6:54 Let's change it to 15 now, which is less than 18. 7:03 So false is returned. 7:09 33 Which is greater than 18 and true is logged. 7:14 A common way you will see short circuiting done is to assign a default value. 7:24 Let's write a simple function to illustrate this called count to 5. 7:30 It takes a single argument called start. 7:39 This will be the starting value, then we'll create a loop for counting up to 5. 7:45 And it logs out the value of i each time it goes through the loop. 8:00 Let's run this with 2 to see it in action. 8:09 it works as expected. 8:17 Now what if we call this function with no arguments. 8:21 It prints nothing, because dots isn't defined and 8:27 then the loop condition is false at the beginning. 8:31 What if we want to set a default value for start so 8:36 it still counts from say one even if it's called without an argument. 8:39 We can do this by short circuiting. 8:45 Now if start is undefined it will be falsey. 8:50 Say the second value will be assigned to starts. 8:55 Otherwise starts will be assigned the value it already contains. 9:00 Let's run this function once again with two. 9:07 And it works. 9:12 And then again with no arguments. 9:14 This seems to work well. 9:21 However there is a problem. 9:24 What if we want to start at zero? 9:26 If we pass this in, it will be falsey. 9:28 And one will be assigned to starts. 9:33 So it's impossible to start the count at zero. 9:37 This is why you have to be careful when you use the or 9:41 operator to assign a default value. 9:45 While it can be used in a lot of circumstances, 9:48 it can't really be used when a valid value can be considered falsey. 9:51 You'll probably see the or operator a lot 9:57 being used to assign a default value in older code. 10:01 EXMAScript 2015 introduced default parameters to functions 10:06 making using short circuiting less useful. 10:11 The new 2015 syntax also 10:14 doesn't suffer from the issue of evaluating zero as a false value. 10:18 To assign a default value in 2015 you can just assign the value. 10:24 To the parameter in the function declaration. 10:33 If you're interested in default parameters, 10:37 check out the teacher's notes for further reading. 10:39 We've now seen how to use short circuiting to assign values. 10:47 Let see a quick example of one using a statement. 10:51 Lets say we have a function that greets someone if the name is provided. 10:55 If name is provided the second operant will be evaluated, 11:28 printing the greeting to the console. 11:33 Let's run this now to see if nothing happens. 11:38 Good, it doesn't. 11:44 Now let's apply a name say, Sam. 11:46 [SOUND] Now the second operant is evaluated and 11:49 the message is printed to the console. 11:55 Short circuit evaluation is not as good as replicating if else as it is 12:00 with just plain old if statements. 12:04 And like the ternary operator, you'll want to reserve its use to times when 12:08 it's very easy to tell what your code is trying to accomplish for 12:13 someone arriving fresh to the project. 12:17 Generally, you'll probably want to avoid this in favor of the if statement 12:20 which is usually much easier to read and understand. 12:25 Now you know a little bit more about the options 12:29 that you have when adding logic to your programs. 12:32 Have fun programming! 12:35