Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Introduction to the ternary operator
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 up