Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,080 --> 00:00:03,140
So, we already saw two ways
2
2
00:00:03,140 --> 00:00:05,060
of writing conditionals.
3
3
00:00:05,060 --> 00:00:09,290
The regular if/else statement and the switch statement.
4
4
00:00:09,290 --> 00:00:11,150
But there is another one.
5
5
00:00:11,150 --> 00:00:13,660
And that is the conditional operator.
6
6
00:00:13,660 --> 00:00:16,120
And this one is actually really nice.
7
7
00:00:16,120 --> 00:00:17,823
So let's check it out.
8
8
00:00:19,300 --> 00:00:21,490
So the conditional operator allows us
9
9
00:00:21,490 --> 00:00:24,630
to write something similar to an if/else statement
10
10
00:00:24,630 --> 00:00:26,660
but all in one line.
11
11
00:00:26,660 --> 00:00:30,980
So let's again start by defining an age variable.
12
12
00:00:30,980 --> 00:00:34,530
And this time I'm saying it to 23.
13
13
00:00:34,530 --> 00:00:39,530
And now, let's write, age, greater or equal 18.
14
14
00:00:40,700 --> 00:00:45,700
So this is your or test to check whether the age is
15
15
00:00:46,000 --> 00:00:47,400
at least 18.
16
16
00:00:47,400 --> 00:00:49,920
So basically if the person is of full age.
17
17
00:00:49,920 --> 00:00:52,580
And then after this condition,
18
18
00:00:52,580 --> 00:00:54,800
we use a question mark.
19
19
00:00:54,800 --> 00:00:58,400
And then here we write essentially or if block.
20
20
00:00:58,400 --> 00:01:01,220
So that's the code that we want to be executed
21
21
00:01:01,220 --> 00:01:04,443
in case that disc condition here is true.
22
22
00:01:06,130 --> 00:01:08,767
So let's say console dot log,
23
23
00:01:08,767 --> 00:01:13,767
"I like to drink wine."
24
24
00:01:14,110 --> 00:01:16,623
Let's again add a nice emoji here.
25
25
00:01:18,870 --> 00:01:20,834
So basically if the person is of full age,
26
26
00:01:20,834 --> 00:01:23,533
they are allowed to drink wine.
27
27
00:01:24,930 --> 00:01:27,040
In this if blog, so to say,
28
28
00:01:27,040 --> 00:01:30,380
we can only have essentially one line of code.
29
29
00:01:30,380 --> 00:01:34,490
So only one thing can be done if this condition is true.
30
30
00:01:34,490 --> 00:01:37,890
Then we also need basically a mandatory else block.
31
31
00:01:37,890 --> 00:01:40,543
And that goes after this colon.
32
32
00:01:41,476 --> 00:01:43,203
Let's just copy,
33
33
00:01:44,940 --> 00:01:45,773
this code,
34
34
00:01:47,650 --> 00:01:50,667
and say, "I like to drink water."
35
35
00:01:55,180 --> 00:01:57,930
Okay, and that's actually it.
36
36
00:01:57,930 --> 00:02:02,570
So let's check the result and then analyze this a bit more.
37
37
00:02:02,570 --> 00:02:05,227
So in fact what gets logged to the console is,
38
38
00:02:05,227 --> 00:02:07,160
"I like to drink wine."
39
39
00:02:07,160 --> 00:02:09,530
And that's because the age is 23.
40
40
00:02:09,530 --> 00:02:11,793
And so this condition is true.
41
41
00:02:13,330 --> 00:02:14,490
Right.
42
42
00:02:14,490 --> 00:02:18,230
And this means that this code here is gonna be executed
43
43
00:02:18,230 --> 00:02:19,730
and this one is not.
44
44
00:02:19,730 --> 00:02:21,280
So the second part here,
45
45
00:02:21,280 --> 00:02:24,320
which is essentially the else part.
46
46
00:02:24,320 --> 00:02:26,113
Now if we were 15,
47
47
00:02:26,980 --> 00:02:30,763
then of course the second part is executed.
48
48
00:02:33,440 --> 00:02:34,570
Okay.
49
49
00:02:34,570 --> 00:02:37,310
So that's essentially writing an if/else statement
50
50
00:02:37,310 --> 00:02:38,800
all in one line.
51
51
00:02:38,800 --> 00:02:40,680
But instead of using a statement,
52
52
00:02:40,680 --> 00:02:43,150
we use this conditional operator.
53
53
00:02:43,150 --> 00:02:45,460
And the conditional operator is also called
54
54
00:02:45,460 --> 00:02:47,100
the ternary operator.
55
55
00:02:47,100 --> 00:02:49,010
Because it has three parts.
56
56
00:02:49,010 --> 00:02:50,990
Unlike other operators.
57
57
00:02:50,990 --> 00:02:53,980
For example the plus operator has only two parts.
58
58
00:02:53,980 --> 00:02:56,050
For example, one plus two.
59
59
00:02:56,050 --> 00:02:58,530
But this one has three parts,
60
60
00:02:58,530 --> 00:03:00,170
so the condition,
61
61
00:03:00,170 --> 00:03:01,610
then the if part,
62
62
00:03:01,610 --> 00:03:03,343
and then the else part.
63
63
00:03:04,560 --> 00:03:09,460
Okay, now the conditional operator is in fact an operator,
64
64
00:03:09,460 --> 00:03:11,840
just as the name says.
65
65
00:03:11,840 --> 00:03:16,100
And remember that an operator always produces a value.
66
66
00:03:16,100 --> 00:03:20,637
So in other words an operator is an expression, right.
67
67
00:03:20,637 --> 00:03:24,500
So what this means is that if we have a value,
68
68
00:03:24,500 --> 00:03:27,780
we can then assign that value to a variable.
69
69
00:03:27,780 --> 00:03:31,720
So with this we can make the ternary operator really useful
70
70
00:03:31,720 --> 00:03:36,110
to basically conditionally declare variables.
71
71
00:03:36,110 --> 00:03:40,030
So, what we did here is not so much used indeed.
72
72
00:03:40,030 --> 00:03:43,120
Instead we do it more like this.
73
73
00:03:43,120 --> 00:03:45,543
So we would still test for this condition.
74
74
00:03:47,189 --> 00:03:49,680
So checking if the person is of full age.
75
75
00:03:49,680 --> 00:03:53,210
And if that's true then all we want is essentially
76
76
00:03:53,210 --> 00:03:55,713
to return this.
77
77
00:03:58,000 --> 00:04:02,253
And if not we, only want this.
78
78
00:04:03,820 --> 00:04:04,653
Okay.
79
79
00:04:04,653 --> 00:04:09,653
And so again, this whole operator here is now an expression.
80
80
00:04:09,850 --> 00:04:12,080
And an expression produces a value.
81
81
00:04:12,080 --> 00:04:15,230
And so now, we can go ahead and store that value
82
82
00:04:15,230 --> 00:04:16,343
into a variable.
83
83
00:04:18,240 --> 00:04:19,900
So let's call that "Drink"
84
84
00:04:19,900 --> 00:04:24,230
and then we can log this drink
85
85
00:04:25,850 --> 00:04:26,683
to the console.
86
86
00:04:28,110 --> 00:04:29,960
And let's comment out this part here.
87
87
00:04:31,840 --> 00:04:33,910
And check.
88
88
00:04:33,910 --> 00:04:38,540
And indeed we get wine as we declared up here.
89
89
00:04:38,540 --> 00:04:39,373
Great.
90
90
00:04:39,373 --> 00:04:42,730
So drink is now really defined conditionally,
91
91
00:04:42,730 --> 00:04:44,830
based on this condition.
92
92
00:04:44,830 --> 00:04:47,150
And all in one simple line.
93
93
00:04:47,150 --> 00:04:49,800
So without the conditional operator,
94
94
00:04:49,800 --> 00:04:52,700
we would have to use and if/else statement
95
95
00:04:52,700 --> 00:04:55,410
and with that this wouldn't be so easy.
96
96
00:04:55,410 --> 00:04:58,040
Remember, when we want to declare a variable
97
97
00:04:58,040 --> 00:05:00,850
inside of an if or an else blog,
98
98
00:05:00,850 --> 00:05:03,383
we need to first declare that variable outside.
99
99
00:05:05,060 --> 00:05:06,663
Let's actually do that.
100
100
00:05:07,920 --> 00:05:09,730
So simply call it "drink2"
101
101
00:05:11,330 --> 00:05:16,213
and then we would say, if the age is at least 18,
102
102
00:05:18,320 --> 00:05:19,590
then "drink2"...
103
103
00:05:21,060 --> 00:05:22,683
is gonna be wine.
104
104
00:05:23,600 --> 00:05:25,343
Just grab that here.
105
105
00:05:29,220 --> 00:05:30,200
Or else...
106
106
00:05:32,797 --> 00:05:35,823
"drink2" is gonna be this water here.
107
107
00:05:38,520 --> 00:05:39,353
Okay.
108
108
00:05:39,353 --> 00:05:42,550
And again we need to define a "drink2" variable
109
109
00:05:42,550 --> 00:05:45,970
outside of the if and the else blogs,
110
110
00:05:45,970 --> 00:05:49,200
because any variable that we define inside of a blog,
111
111
00:05:49,200 --> 00:05:51,500
is not available outside.
112
112
00:05:51,500 --> 00:05:53,420
So we declared a variable here
113
113
00:05:53,420 --> 00:05:56,233
and then reassign it inside of the blogs.
114
114
00:05:59,340 --> 00:06:01,583
So just to make sure it worked,
115
115
00:06:03,590 --> 00:06:05,930
let's log this one here as well.
116
116
00:06:05,930 --> 00:06:09,453
We really just did this for the sake of comparison.
117
117
00:06:11,300 --> 00:06:14,810
Okay, just so you can see the tremendous difference
118
118
00:06:14,810 --> 00:06:18,530
that the ternary operator introduces here in our code.
119
119
00:06:18,530 --> 00:06:19,410
So if you ask me,
120
120
00:06:19,410 --> 00:06:22,090
this one here is a lot easier to understand
121
121
00:06:22,090 --> 00:06:24,270
and a lot easier to write.
122
122
00:06:24,270 --> 00:06:25,860
Right.
123
123
00:06:25,860 --> 00:06:28,193
So just changing this to something else here.
124
124
00:06:29,340 --> 00:06:33,620
And yeah, in both cases we get water back.
125
125
00:06:33,620 --> 00:06:36,860
So using the ternary operator we were really able
126
126
00:06:36,860 --> 00:06:40,330
to transform this big block of code
127
127
00:06:40,330 --> 00:06:43,070
all into one small operation like this.
128
128
00:06:43,070 --> 00:06:45,990
And this is gonna be useful in so many cases.
129
129
00:06:45,990 --> 00:06:48,270
And we will really take advantage of this
130
130
00:06:48,270 --> 00:06:51,370
throughout the rest of the entire course.
131
131
00:06:51,370 --> 00:06:53,933
And now we can take it even further.
132
132
00:06:54,810 --> 00:06:59,170
Because since the ternary operator is really an expression,
133
133
00:06:59,170 --> 00:07:02,490
we can now use it, for example, in a template literal.
134
134
00:07:02,490 --> 00:07:05,330
So unlike a normal if/else statement,
135
135
00:07:05,330 --> 00:07:08,470
like we tried and failed in the last lecture.
136
136
00:07:08,470 --> 00:07:09,303
Remember?
137
137
00:07:10,310 --> 00:07:14,660
It was here where I tried to insert the if statement here
138
138
00:07:14,660 --> 00:07:16,350
and of course it didn't work.
139
139
00:07:16,350 --> 00:07:20,030
But using the ternary operator, which produces a value,
140
140
00:07:20,030 --> 00:07:22,300
we can actually have conditionals
141
141
00:07:22,300 --> 00:07:24,223
inside of a template literal.
142
142
00:07:25,190 --> 00:07:29,283
So let's simply try that.
143
143
00:07:30,190 --> 00:07:34,610
And so I can now say, "I like to drink"
144
144
00:07:34,610 --> 00:07:38,920
and then based on the age, I can say if I like to drink wine
145
145
00:07:38,920 --> 00:07:39,753
or water.
146
146
00:07:40,960 --> 00:07:43,430
So, here in this placeholder, remember,
147
147
00:07:43,430 --> 00:07:46,220
I can put any expression that I want.
148
148
00:07:46,220 --> 00:07:48,920
And this here is an expression.
149
149
00:07:48,920 --> 00:07:51,320
Again because it produces a value.
150
150
00:07:51,320 --> 00:07:53,310
So I grab it from here.
151
151
00:07:53,310 --> 00:07:54,283
Paste it here,
152
152
00:07:55,860 --> 00:07:56,817
and that's it.
153
153
00:07:56,817 --> 00:08:00,520
The template literal will now use whatever result we get
154
154
00:08:00,520 --> 00:08:02,570
from this operator.
155
155
00:08:02,570 --> 00:08:06,010
So that's either gonna be wine or water.
156
156
00:08:06,010 --> 00:08:09,763
And then it assembles that result into the final string.
157
157
00:08:11,010 --> 00:08:12,193
So let's check.
158
158
00:08:13,330 --> 00:08:15,110
And indeed, once more,
159
159
00:08:15,110 --> 00:08:17,393
the conditional operator works just fine.
160
160
00:08:19,020 --> 00:08:21,393
And with our age back to 23,
161
161
00:08:22,300 --> 00:08:25,510
then we got, "I like to drink wine."
162
162
00:08:25,510 --> 00:08:29,420
Great, so I hope that this makes sense.
163
163
00:08:29,420 --> 00:08:31,690
I know that especially this part here
164
164
00:08:31,690 --> 00:08:34,550
can be a little bit confusing for beginners.
165
165
00:08:34,550 --> 00:08:38,350
So take a minute to really understand what happens here.
166
166
00:08:38,350 --> 00:08:41,660
And always keep in mind the concept of operator
167
167
00:08:41,660 --> 00:08:42,980
and of expression.
168
168
00:08:42,980 --> 00:08:45,780
Which is something that produces a value.
169
169
00:08:45,780 --> 00:08:49,010
And thanks to that we can then put that value
170
170
00:08:49,010 --> 00:08:52,370
here in this placeholder in the template literal.
171
171
00:08:52,370 --> 00:08:53,203
All right.
172
172
00:08:54,100 --> 00:08:56,300
Now to finish, I just wanted to mention
173
173
00:08:56,300 --> 00:09:00,750
that the ternary operator is not thought as a replacement
174
174
00:09:00,750 --> 00:09:03,250
of if/else statements.
175
175
00:09:03,250 --> 00:09:05,700
We still need if/else all the time.
176
176
00:09:05,700 --> 00:09:08,200
For example when we have bigger blocks of code
177
177
00:09:08,200 --> 00:09:11,180
that we need to execute based on a condition.
178
178
00:09:11,180 --> 00:09:14,690
In that case the ternary operator is not gonna work.
179
179
00:09:14,690 --> 00:09:16,950
But the ternary operator is perfect
180
180
00:09:16,950 --> 00:09:20,170
when we just need to take a quick decision,
181
181
00:09:20,170 --> 00:09:22,900
for example, like this one.
182
182
00:09:22,900 --> 00:09:25,040
And that's especially true in places
183
183
00:09:25,040 --> 00:09:28,050
where JavaScript really expects an expression,
184
184
00:09:28,050 --> 00:09:30,600
just like here in this template literal.
185
185
00:09:30,600 --> 00:09:33,400
So here we could not use an if/else statement
186
186
00:09:33,400 --> 00:09:37,660
and so the ternary operator really comes to our rescue here.
187
187
00:09:37,660 --> 00:09:39,520
So I think you can understand
188
188
00:09:39,520 --> 00:09:41,760
that this one is really, really important.
189
189
00:09:41,760 --> 00:09:45,740
So make sure that you absolutely understand how it works.
190
190
00:09:45,740 --> 00:09:47,360
And once you do understand,
191
191
00:09:47,360 --> 00:09:50,781
then let's move on to the final lecture of this section,
192
192
00:09:50,781 --> 00:09:54,190
which is yet another coding challenge for you to see
193
193
00:09:54,190 --> 00:09:57,640
if you did actually understand how the conditional
194
194
00:09:57,640 --> 00:09:59,703
or ternary operator works.
16147
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.