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