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
Introduction to the ternary operator
Resources
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
The ternary operator a is a very compact,
0:00
two-way branch that many programmers
use to write very concise code.
0:03
The only problem is, is that it's so
compact it can be hard to read.
0:09
It's called ternary because it
involves three expressions.
0:13
The first is a boolean that determines
which of the next two expressions run.
0:17
The ternary operator uses two characters,
a question mark and a colon.
0:23
These two characters are markers for
our condition and our two branches.
0:29
Let's see how this works in
our two.js file from earlier.
0:35
First, let's write our ternary operator,
a question mark and a colon.
0:39
I'll show you how this works just
by copying/pasting from this
0:46
if statement above.
0:50
Let's take the condition,
which is stored in the variable isTrue,
0:53
and paste it before the question mark.
0:57
If isTrue evaluates to true, then the code
after the question mark will run.
1:00
If not, the code after the colon will run.
1:09
So let's copy and
paste the true branch, and
1:13
paste it just after
the question mark here.
1:19
And copy and
paste the full branch here at the end.
1:25
Don't forget to terminate your
statement with a semicolon.
1:30
Now, if we comment out
our if else statement,
1:34
we can see the ternary operator in action.
1:39
If we run node two.js in the command line,
we get yes log.
1:46
If we change isTrue to false and
1:53
run it again, we see no is logged.
1:56
You can see that the ternary
expression is almost exactly like
2:00
an if else statement, but
with a bare bones syntax.
2:05
But there is another way you're likely
to see a ternary pop up in the wild.
2:10
As an expression.
2:15
In JavaScript and expression is
something that resolves to a value.
2:16
You can assign an expression to a variable
and that variable will contain the value.
2:21
For example,
you can assign var x to equal 2 + 5.
2:26
2 + 5 is an expression that
resolves to the value of 7.
2:34
X isn't going to hold 2 + 5,
2:40
it's going to hold the value that
the expression returns, which is 7.
2:43
In the same way, a ternary
expression will return one of it's
2:47
two branches as a value, depending on
the truthiness of the first operand.
2:52
Let's see this in the code
to get a better idea.
2:58
Instead of logging yes or no to
the console directly from the ternary,
3:02
let's return one of those values and
store it in a variable called yesOrNo.
3:06
Then we can log that
variable to the console,
3:22
When the ternary is
a evaluated by the interpreter,
3:30
it examines the value of isTrue and
3:34
returns the first value of yes if
it's true, and no if it i not.
3:37
And it's choice will be stored in yesOrNo.
3:43
Let's save it and run it again.
3:48
Now let's change it to true and
run the script again.
3:52
Technically, you could use the ternary for
a multi-way branching while putting
4:00
one expression as the condition for
the larger ternary expression.
4:05
But this gets messy real quick, and
it's not a recommended practice.
4:10
If you ever use the ternary expression,
it should probably be for
4:15
very simple cases where the intent
is unmistakable and obvious.
4:20
For our last conditional,
let's have a look at short circuiting.
4:25
I'll see you in the next video.
4:29
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