1 00:00:00,480 --> 00:00:04,190 Boolean operators like and and or are very useful for 2 00:00:04,190 --> 00:00:07,710 testing multiple conditions in one statement. 3 00:00:07,710 --> 00:00:10,300 For example, in a browser based game, 4 00:00:10,300 --> 00:00:15,300 you could test if the time had run out or the player had to use all their lives. 5 00:00:15,300 --> 00:00:17,470 If either were true the game would end. 6 00:00:19,360 --> 00:00:21,580 Likewise with the and operator. 7 00:00:21,580 --> 00:00:24,340 It makes sure that multiple conditions are true before 8 00:00:24,340 --> 00:00:27,400 evaluating the entire conditional statement to be true. 9 00:00:28,540 --> 00:00:31,600 Simple programmers use boolean operators to perform what's 10 00:00:31,600 --> 00:00:32,830 called the Short Circuit. 11 00:00:34,120 --> 00:00:39,410 It's basically a way to optimize code by stopping the evaluation of an expression 12 00:00:39,410 --> 00:00:41,030 as soon as an outcome is known. 13 00:00:42,280 --> 00:00:46,090 It's often used to quickly assign a value or execute code. 14 00:00:47,110 --> 00:00:49,690 Let's take a look at some examples. 15 00:00:49,690 --> 00:00:53,210 Open up the workspace on this page to follow along or 16 00:00:53,210 --> 00:00:56,160 feel free to follow along in your local environment. 17 00:00:57,650 --> 00:01:02,174 Lets start by looking out the result of a boolean and operates its of the console. 18 00:01:16,936 --> 00:01:24,237 This will log out to be true, because both expressions evaluate to true. 19 00:01:24,237 --> 00:01:25,289 Let's run this to be sure. 20 00:01:29,140 --> 00:01:33,530 Great, now let's replace the second expression with the string. 21 00:01:33,530 --> 00:01:34,640 For example, cow. 22 00:01:36,080 --> 00:01:38,260 Now what do you think will happen? 23 00:01:39,820 --> 00:01:45,620 A string with a length greater than zero can evaluate to true because it's truthy. 24 00:01:45,620 --> 00:01:47,830 So will this print true? 25 00:01:47,830 --> 00:01:48,470 Let's try it. 26 00:01:51,690 --> 00:01:53,500 It printed cow. 27 00:01:53,500 --> 00:01:57,120 That's because the operator actually returns 28 00:01:57,120 --> 00:02:00,360 a second value if the first one is truthy. 29 00:02:00,360 --> 00:02:07,260 Let’s add another boolean and with the string chicken. 30 00:02:11,160 --> 00:02:15,480 Running that, we get chicken, because all operants 31 00:02:15,480 --> 00:02:20,090 are truthy. 32 00:02:20,090 --> 00:02:21,589 Now let’s change cow to false. 33 00:02:25,130 --> 00:02:30,974 If we run that, we get false back, that's because the JavaScript's 34 00:02:30,974 --> 00:02:37,028 interpreter starts with the leftmost expression and then moves right. 35 00:02:39,411 --> 00:02:45,260 If any of the operands are falsey the first falsey operant is returned. 36 00:02:45,260 --> 00:02:48,360 And any operants that follow aren’t considered. 37 00:02:50,680 --> 00:02:55,420 So the interpreter never even considers this string chicken in this case. 38 00:02:55,420 --> 00:02:58,920 Everything after the false is short-circuited. 39 00:02:58,920 --> 00:03:03,648 We can see this By putting a statement as one of the operants. 40 00:03:03,648 --> 00:03:09,300 Let's remove consul.log at the beginning and 41 00:03:09,300 --> 00:03:14,900 instead use it in the final operand logging chicken from that. 42 00:03:16,260 --> 00:03:22,180 When we're on this now, false is returned and the log method is never called. 43 00:03:23,440 --> 00:03:28,030 This behavior allows us to check a condition and then run code only if it's 44 00:03:28,030 --> 00:03:32,700 true, replicating an if block in one concise line of code. 45 00:03:36,530 --> 00:03:38,790 Let's just replace false with cow again. 46 00:03:41,940 --> 00:03:47,630 And let's make sure, we'll run, both the preceding operands are truthy. 47 00:03:47,630 --> 00:03:52,640 Now when we want it again, the log method is executed and 48 00:03:52,640 --> 00:03:55,890 this string chicken appears. 49 00:03:55,890 --> 00:03:58,420 Let's look at the boolean or operator now. 50 00:03:59,890 --> 00:04:05,680 It returns the first truth value it finds as it reads from left to right. 51 00:04:05,680 --> 00:04:13,180 Let's replace our two && operators with | |. 52 00:04:13,180 --> 00:04:15,538 And let's look the expression. 53 00:04:20,441 --> 00:04:28,481 In this case, the first expression is truthy because three is equal to three and 54 00:04:28,481 --> 00:04:33,410 the equality operator returns a boolean value. 55 00:04:33,410 --> 00:04:35,050 So we see true is logged. 56 00:04:36,820 --> 00:04:42,070 If we change one of the threes to four what do you think will happen? 57 00:04:42,070 --> 00:04:47,400 Cow is the first truth value that the interpreter 58 00:04:47,400 --> 00:04:52,790 comes to so it's returned is an important note however 59 00:04:52,790 --> 00:04:57,080 if all of the values of falsely the last one is still returned. 60 00:04:58,910 --> 00:05:03,900 If we change cow to false, and chicken to zero, and 61 00:05:03,900 --> 00:05:07,790 run it, zero is logged. 62 00:05:08,990 --> 00:05:12,710 You wouldn't want to replicate a complex branching condition 63 00:05:12,710 --> 00:05:14,840 using logical operators in this way. 64 00:05:15,890 --> 00:05:19,320 If else and switch statements are better for 65 00:05:19,320 --> 00:05:25,220 multiple branches, but let me show you a few ways short circuiting can be useful. 66 00:05:25,220 --> 00:05:30,975 For example, let's say we have a function named is adult, 67 00:05:30,975 --> 00:05:34,311 that we want to use to return true or 68 00:05:34,311 --> 00:05:39,162 false Based on a number passed into the function. 69 00:06:03,802 --> 00:06:08,638 If the number represents an age, and is greater than or 70 00:06:08,638 --> 00:06:12,790 equal to 18, we want to return true. 71 00:06:12,790 --> 00:06:15,500 If no number is passed into the function, 72 00:06:15,500 --> 00:06:19,670 the number is less than 18 we want it to return false. 73 00:06:19,670 --> 00:06:23,580 You could write the function with an if else statement like this. 74 00:06:23,580 --> 00:06:29,400 The condition here is checking both the age exists of the first part before the && 75 00:06:29,400 --> 00:06:36,199 and that the age is equal to or greater than 18. 76 00:06:37,430 --> 00:06:41,873 You could rewrite this much more concisely using short circuiting. 77 00:06:52,156 --> 00:06:54,247 Let me run this in the console and 78 00:06:54,247 --> 00:06:58,600 to see will get a false value undefined when none number is past in. 79 00:07:03,982 --> 00:07:09,185 Let's change it to 15 now, which is less than 18. 80 00:07:09,185 --> 00:07:10,584 So false is returned. 81 00:07:14,971 --> 00:07:21,070 33 Which is greater than 18 and true is logged. 82 00:07:24,080 --> 00:07:29,100 A common way you will see short circuiting done is to assign a default value. 83 00:07:30,210 --> 00:07:33,793 Let's write a simple function to illustrate this called count to 5. 84 00:07:39,048 --> 00:07:45,016 It takes a single argument called start. 85 00:07:45,016 --> 00:07:51,183 This will be the starting value, then we'll create a loop for counting up to 5. 86 00:08:00,736 --> 00:08:04,319 And it logs out the value of i each time it goes through the loop. 87 00:08:09,973 --> 00:08:12,650 Let's run this with 2 to see it in action. 88 00:08:17,470 --> 00:08:18,940 it works as expected. 89 00:08:21,170 --> 00:08:24,260 Now what if we call this function with no arguments. 90 00:08:27,020 --> 00:08:31,730 It prints nothing, because dots isn't defined and 91 00:08:31,730 --> 00:08:34,670 then the loop condition is false at the beginning. 92 00:08:36,250 --> 00:08:39,850 What if we want to set a default value for start so 93 00:08:39,850 --> 00:08:45,100 it still counts from say one even if it's called without an argument. 94 00:08:45,100 --> 00:08:47,048 We can do this by short circuiting. 95 00:08:50,316 --> 00:08:55,390 Now if start is undefined it will be falsey. 96 00:08:55,390 --> 00:09:00,550 Say the second value will be assigned to starts. 97 00:09:00,550 --> 00:09:07,190 Otherwise starts will be assigned the value it already contains. 98 00:09:07,190 --> 00:09:09,301 Let's run this function once again with two. 99 00:09:12,608 --> 00:09:14,420 And it works. 100 00:09:14,420 --> 00:09:15,461 And then again with no arguments. 101 00:09:21,963 --> 00:09:24,060 This seems to work well. 102 00:09:24,060 --> 00:09:25,330 However there is a problem. 103 00:09:26,330 --> 00:09:28,890 What if we want to start at zero? 104 00:09:28,890 --> 00:09:32,115 If we pass this in, it will be falsey. 105 00:09:33,610 --> 00:09:35,233 And one will be assigned to starts. 106 00:09:37,807 --> 00:09:41,930 So it's impossible to start the count at zero. 107 00:09:41,930 --> 00:09:45,580 This is why you have to be careful when you use the or 108 00:09:45,580 --> 00:09:48,900 operator to assign a default value. 109 00:09:48,900 --> 00:09:51,700 While it can be used in a lot of circumstances, 110 00:09:51,700 --> 00:09:56,435 it can't really be used when a valid value can be considered falsey. 111 00:09:57,790 --> 00:10:01,560 You'll probably see the or operator a lot 112 00:10:01,560 --> 00:10:05,190 being used to assign a default value in older code. 113 00:10:06,300 --> 00:10:10,270 EXMAScript 2015 introduced default parameters to functions 114 00:10:11,290 --> 00:10:14,226 making using short circuiting less useful. 115 00:10:14,226 --> 00:10:18,840 The new 2015 syntax also 116 00:10:18,840 --> 00:10:24,400 doesn't suffer from the issue of evaluating zero as a false value. 117 00:10:24,400 --> 00:10:31,330 To assign a default value in 2015 you can just assign the value. 118 00:10:33,160 --> 00:10:35,590 To the parameter in the function declaration. 119 00:10:37,430 --> 00:10:39,983 If you're interested in default parameters, 120 00:10:39,983 --> 00:10:42,869 check out the teacher's notes for further reading. 121 00:10:47,001 --> 00:10:51,470 We've now seen how to use short circuiting to assign values. 122 00:10:51,470 --> 00:10:55,550 Let see a quick example of one using a statement. 123 00:10:55,550 --> 00:11:00,279 Lets say we have a function that greets someone if the name is provided. 124 00:11:28,162 --> 00:11:33,051 If name is provided the second operant will be evaluated, 125 00:11:33,051 --> 00:11:36,360 printing the greeting to the console. 126 00:11:38,040 --> 00:11:42,100 Let's run this now to see if nothing happens. 127 00:11:44,330 --> 00:11:45,270 Good, it doesn't. 128 00:11:46,870 --> 00:11:49,650 Now let's apply a name say, Sam. 129 00:11:49,650 --> 00:11:55,253 [SOUND] Now the second operant is evaluated and 130 00:11:55,253 --> 00:12:00,127 the message is printed to the console. 131 00:12:00,127 --> 00:12:04,979 Short circuit evaluation is not as good as replicating if else as it is 132 00:12:04,979 --> 00:12:08,390 with just plain old if statements. 133 00:12:08,390 --> 00:12:13,320 And like the ternary operator, you'll want to reserve its use to times when 134 00:12:13,320 --> 00:12:17,670 it's very easy to tell what your code is trying to accomplish for 135 00:12:17,670 --> 00:12:20,520 someone arriving fresh to the project. 136 00:12:20,520 --> 00:12:25,790 Generally, you'll probably want to avoid this in favor of the if statement 137 00:12:25,790 --> 00:12:29,660 which is usually much easier to read and understand. 138 00:12:29,660 --> 00:12:32,600 Now you know a little bit more about the options 139 00:12:32,600 --> 00:12:35,970 that you have when adding logic to your programs. 140 00:12:35,970 --> 00:12:36,800 Have fun programming!