Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Exploring JavaScript Conditionals!
You have completed Exploring JavaScript Conditionals!
Preview
Logical operators can be used to control program flow directly. In this video we'll see how.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up