Preview
Video Player
00:00
00:00
Short Circuit Evaluation
12:37Logical operators can be used to control program flow directly. In this video we'll see how.
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