Original subtitles

1 1

So, we already saw two ways 2

2

of writing conditionals. 3

3

The regular if/else statement and the switch statement. 4

4

But there is another one. 5

5

And that is the conditional operator. 6

6

And this one is actually really nice. 7

7

So let's check it out. 8

8

So the conditional operator allows us 9

9

to write something similar to an if/else statement 10

10

but all in one line. 11

11

So let's again start by defining an age variable. 12

12

And this time I'm saying it to 23. 13

13

And now, let's write, age, greater or equal 18. 14

14

So this is your or test to check whether the age is 15

15

at least 18. 16

16

So basically if the person is of full age. 17

17

And then after this condition, 18

18

we use a question mark. 19

19

And then here we write essentially or if block. 20

20

So that's the code that we want to be executed 21

21

in case that disc condition here is true. 22

22

So let's say console dot log, 23

23

"I like to drink wine." 24

24

Let's again add a nice emoji here. 25

25

So basically if the person is of full age, 26

26

they are allowed to drink wine. 27

27

In this if blog, so to say, 28

28

we can only have essentially one line of code. 29

29

So only one thing can be done if this condition is true. 30

30

Then we also need basically a mandatory else block. 31

31

And that goes after this colon. 32

32

Let's just copy, 33

33

this code, 34

34

and say, "I like to drink water." 35

35

Okay, and that's actually it. 36

36

So let's check the result and then analyze this a bit more. 37

37

So in fact what gets logged to the console is, 38

38

"I like to drink wine." 39

39

And that's because the age is 23. 40

40

And so this condition is true. 41

41

Right. 42

42

And this means that this code here is gonna be executed 43

43

and this one is not. 44

44

So the second part here, 45

45

which is essentially the else part. 46

46

Now if we were 15, 47

47

then of course the second part is executed. 48

48

Okay. 49

49

So that's essentially writing an if/else statement 50

50

all in one line. 51

51

But instead of using a statement, 52

52

we use this conditional operator. 53

53

And the conditional operator is also called 54

54

the ternary operator. 55

55

Because it has three parts. 56

56

Unlike other operators. 57

57

For example the plus operator has only two parts. 58

58

For example, one plus two. 59

59

But this one has three parts, 60

60

so the condition, 61

61

then the if part, 62

62

and then the else part. 63

63

Okay, now the conditional operator is in fact an operator, 64

64

just as the name says. 65

65

And remember that an operator always produces a value. 66

66

So in other words an operator is an expression, right. 67

67

So what this means is that if we have a value, 68

68

we can then assign that value to a variable. 69

69

So with this we can make the ternary operator really useful 70

70

to basically conditionally declare variables. 71

71

So, what we did here is not so much used indeed. 72

72

Instead we do it more like this. 73

73

So we would still test for this condition. 74

74

So checking if the person is of full age. 75

75

And if that's true then all we want is essentially 76

76

to return this. 77

77

And if not we, only want this. 78

78

Okay. 79

79

And so again, this whole operator here is now an expression. 80

80

And an expression produces a value. 81

81

And so now, we can go ahead and store that value 82

82

into a variable. 83

83

So let's call that "Drink" 84

84

and then we can log this drink 85

85

to the console. 86

86

And let's comment out this part here. 87

87

And check. 88

88

And indeed we get wine as we declared up here. 89

89

Great. 90

90

So drink is now really defined conditionally, 91

91

based on this condition. 92

92

And all in one simple line. 93

93

So without the conditional operator, 94

94

we would have to use and if/else statement 95

95

and with that this wouldn't be so easy. 96

96

Remember, when we want to declare a variable 97

97

inside of an if or an else blog, 98

98

we need to first declare that variable outside. 99

99

Let's actually do that. 100

100

So simply call it "drink2" 101

101

and then we would say, if the age is at least 18, 102

102

then "drink2"... 103

103

is gonna be wine. 104

104

Just grab that here. 105

105

Or else... 106

106

"drink2" is gonna be this water here. 107

107

Okay. 108

108

And again we need to define a "drink2" variable 109

109

outside of the if and the else blogs, 110

110

because any variable that we define inside of a blog, 111

111

is not available outside. 112

112

So we declared a variable here 113

113

and then reassign it inside of the blogs. 114

114

So just to make sure it worked, 115

115

let's log this one here as well. 116

116

We really just did this for the sake of comparison. 117

117

Okay, just so you can see the tremendous difference 118

118

that the ternary operator introduces here in our code. 119

119

So if you ask me, 120

120

this one here is a lot easier to understand 121

121

and a lot easier to write. 122

122

Right. 123

123

So just changing this to something else here. 124

124

And yeah, in both cases we get water back. 125

125

So using the ternary operator we were really able 126

126

to transform this big block of code 127

127

all into one small operation like this. 128

128

And this is gonna be useful in so many cases. 129

129

And we will really take advantage of this 130

130

throughout the rest of the entire course. 131

131

And now we can take it even further. 132

132

Because since the ternary operator is really an expression, 133

133

we can now use it, for example, in a template literal. 134

134

So unlike a normal if/else statement, 135

135

like we tried and failed in the last lecture. 136

136

Remember? 137

137

It was here where I tried to insert the if statement here 138

138

and of course it didn't work. 139

139

But using the ternary operator, which produces a value, 140

140

we can actually have conditionals 141

141

inside of a template literal. 142

142

So let's simply try that. 143

143

And so I can now say, "I like to drink" 144

144

and then based on the age, I can say if I like to drink wine 145

145

or water. 146

146

So, here in this placeholder, remember, 147

147

I can put any expression that I want. 148

148

And this here is an expression. 149

149

Again because it produces a value. 150

150

So I grab it from here. 151

151

Paste it here, 152

152

and that's it. 153

153

The template literal will now use whatever result we get 154

154

from this operator. 155

155

So that's either gonna be wine or water. 156

156

And then it assembles that result into the final string. 157

157

So let's check. 158

158

And indeed, once more, 159

159

the conditional operator works just fine. 160

160

And with our age back to 23, 161

161

then we got, "I like to drink wine." 162

162

Great, so I hope that this makes sense. 163

163

I know that especially this part here 164

164

can be a little bit confusing for beginners. 165

165

So take a minute to really understand what happens here. 166

166

And always keep in mind the concept of operator 167

167

and of expression. 168

168

Which is something that produces a value. 169

169

And thanks to that we can then put that value 170

170

here in this placeholder in the template literal. 171

171

All right. 172

172

Now to finish, I just wanted to mention 173

173

that the ternary operator is not thought as a replacement 174

174

of if/else statements. 175

175

We still need if/else all the time. 176

176

For example when we have bigger blocks of code 177

177

that we need to execute based on a condition. 178

178

In that case the ternary operator is not gonna work. 179

179

But the ternary operator is perfect 180

180

when we just need to take a quick decision, 181

181

for example, like this one. 182

182

And that's especially true in places 183

183

where JavaScript really expects an expression, 184

184

just like here in this template literal. 185

185

So here we could not use an if/else statement 186

186

and so the ternary operator really comes to our rescue here. 187

187

So I think you can understand 188

188

that this one is really, really important. 189

189

So make sure that you absolutely understand how it works. 190

190

And once you do understand, 191

191

then let's move on to the final lecture of this section, 192

192

which is yet another coding challenge for you to see 193

193

if you did actually understand how the conditional 194

194

or ternary operator works.