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