All language subtitles for 8. [Dart] Ternary Operator

Now in the last lesson we learn all about Dart enums. And our enums are making our code a lot easier
1

to read and it's starting to make a lot more sense.
2

But there's still so much code for achieving some functionality that's actually really simple which
3

is toggling a card's color.
4

Why do we need so much code? In order to reduce the amount of code but still have the same logic and
5

have the same behavior,
6

we need to learn about something else
7

that Dart gives us, which is the ternary operator.
8

Now previously we saw that we could use the IF, ELSE IF, ELSE statements to be able to perform a different
9

behavior depending on what the condition was.
10

And we talked about it in terms of a rail track right? Deciding which way to go depending on which conditions
11

were currently in play.
12

Now the Dart ternary operator is actually just a bit of what we call syntactic sugar to make something
13

that's actually very long and very wordy, say an if condition is true then do this else do this.
14

And there's a lot of brackets, there's a lot of keywords and there's a lot of lines of code to achieve
15

this. But if we used a Dart ternary operator instead, then it simplifies that into a single line where
16

we check the condition, if that condition is true then we carry out this.
17

And if the condition was false then we carry out this. And all that we need here is a question mark and
18

a colon. If that seems a little bit magical don't worry because we're going to head over to our trusty
19

DartPad to flesh it out and see how it works.
20

So let's say that in our main function we have a new variable and it's of type boolean, so it can be
21

true or false.
22

And let's give it a name.
23

Let's say that we're trying to track to see if jackBauerIsAwesome, which obviously is true.
24

So if anybody doesn't watch the show 24 then just ignore me.
25

Just pretend that this is a normal boolean variable. So you can just change this to a different variable
26

if you want,
27

say durianIsAwesome.
28

It doesn't really matter.
29

It's simply just a variable that can be true or false.
30

Now at some point in our program maybe this gets changed to false or maybe it gets changed true,
31

so we need to check for it using an IF statement,
32

right?
33

We might say something like if jackBauerIsAwesome
34

then if that's equal to true, then maybe we would want to print
35

'That's great.'
36

Or else if that's not true maybe we want to print
37

'Oh no.'
38

And let me just make sure I've got all the quotation marks where it's needed and escape that quotation
39

mark there.
40

So now if we run our code, it will print
41

that's great because jackBauerIsAwesome is equal to true.
42

And we check to see if that is indeed the case.
43

And so it falls into these brackets and it prints
44

'That's great.'
45

So this is classic
46

IF ELSE statement behavior. Now we can cut down all of these lines of code into a single line just by
47

using a ternary operator. And in order to do that the first part that comes is the condition that we're
48

checking for.
49

So we're saying jackBauerIsAwesome is equal to so double equals remember checks to see if the left
50

hand side is equal to the right hand side.
51

And if this is true, then what we'll do is print
52

that's great.
53

And we add a question mark to say that this is what we're checking for.
54

Well if that is true then we're going to print that is great.
55

But if that is false, then we're going to add a colon to say this is what we should do
56

if it was false.
57

So we're going to print oh no. This line of code does exactly the same thing as all of these lines of
58

code.
59

And I can comment that out and hit run to just confirm to you that it's exactly what happens.
60

And if I change this to false, then we should now be triggering this part and it will print 'Oh no'. Pretty
61

cool right?
62

Cutting down on a lot of code.
63

Now the first time when you see this in the wild, it can be a little bit confusing because it's not quite
64

as laid out as all of this. Now,
65

we can also cut down this line even further because the computer will look for all the parts before
66

the question mark to see if it's equal to true.
67

So we don't actually have to check if it's equal to true.
68

It's the same as in here in the IF statement.
69

We don't actually need that equality check. As long as this has a value of true, then it will trigger
70

this part, but if it has a value of false it will trigger this part. Now you always want to avoid playing
71

code golf where the only goal is to cut down on the number of lines of code and to make things as short
72

in the number of characters as physically possible.
73

This is an actual game, code golf, but that's not really the goal.
74

Most cases you want to make sure that your code is succinct but it's still expressive.
75

It still shows what's actually going on.
76

So whenever you're choosing between whether if I want to just cut down the lines of code or whether
77

if I can cut it down and make it clearer and easier to read and less confusing, then that's always what
78

you want to choose.
79

So we're not just doing it to cut down on the number of lines of code.
80

Now what we can also do is use the same comparatives that we can use in our IF statement using our ternary
81

operator.
82

So let's say that we create integer called myAge and let's say it's 12.
83

Don't worry I'm not 12.
84

It's fine. But if we wanted to say create a boolean that is called canBuyAlcohol, and we want to assign
85

it a value of true or false, depending on the value of my age then we can also use a ternary operator
86

here on the right hand side.
87

So we could say something like if myAge is greater than 21 ?
88

So we're going to check to see if this condition is true.
89

Well if that is the case, then we're going to set canBuyAcohol to true.
90

But if that is not the case, then we're gonna set it to false. This is something that the IF and ELSE statements
91

can't do. We can't put down multiple lines of code on the right hand side of an equal sign.
92

But because a ternary operator is simply just a one line expression, then we can in this case.
93

So if I go ahead and print canBuyAlcohol, then you can see that while my age is equal to 12 we will
94

get false and if I change this to a little bit larger, then you can see that we get true.
95

So we're basically assigning this value to this variable depending on this condition.
96

And we're doing this all by using our ternary operator.
97

So in most cases, this is what you will see happen.
98

So this is super useful when we need to check something
99

and depending on that check, we give our variables a different value to work on. Back to our code,
100

it's again challenge time. And this challenge is a little bit harder but essentially I want you to apply what
101

you've just learned about the ternary operator and I want you to get rid of this function. Instead simply
102

use a ternary operator to check in place right here where we have our color and to check if the condition
103

is that the maleCard is selected then we should give it an active color but if the female card was
104

selected, then the color should be an inactive color and it should be the opposite over here.
105

So we should have exactly the same functionality as what we've got right now
106

but without the need for this function. And you might need to add some custom variables you might need
107

to change the set state a little bit and you definitely need to use a ternary operator here to check
108

for which value color should be.
109

So it's a little bit of a harder challenge but I think you can do it. Pause a video and give it a go.
110

All right.
111

So first things first.
112

I said we're going to delete this function.
113

I'm just going to comment it out for now. And we won't really need this,
114

but instead we're going to create a new variable that's going to hold a gender and it's going to be
115

called selectedGender.
116

And it's going to start out being null, because no gender is selected to begin with.
117

But when the male card is pressed or when the female card is pressed, we're going to change the value
118

of the selected gender. When this card is selected, the select agenda is going to be equal to gender.
119

male.
120

And when this card is selected, the selected gender is going to be gender.female. And we're able to
121

write this expressive really clear code all because of our enum that we have.
122

And that's how we're able to have this property that's holding a gender value rather than just an integer
123

or something arbitrary.
124

So now that we're able to set which gender was selected and keep track of that value using our variable
125

called selectGender, then we can now address how we change the color of the card.
126

So we know that we can use our ternary operator as a way of evaluating a condition and assigning a value.
127

In this case for our male card,
128

we could check to see if the selectedGender is equal to gender.male. Then in that case the color of
129

our reusableCard should be the activeCardColor.
130

But if this was not the case i.e. if selectedGender equals male is false, then we should change it to
131

the inactiveCardColor. And in our reusableCard for our female card,
132

the opposite is true.
133

So we're going to check to see if the selectedGender is equal to female. Then in this case, we're going
134

to change this reusable card to have a color of the activeCardColor but otherwise i.e. if the male
135

gender was selected and this was false, then we would change it to the inactiveCardColor.
136

Now this also has the benefit when our app first starts out,
137

gender has no value.
138

So both of these statements will evaluate to false. selectedGender is not gonna be equal to male
139

and it's also not going to be equal to female.
140

So both cards will start out with the inactiveCardColor, which is exactly what we want now.
141

I'm going to go ahead and delete all of this code and now it's replaced by just these few lines of code.
142

Super simple, super easy.
143

And we're able to do this all because we're able to evaluate for an expression and assign this color
144

property a different value depending on that condition all in the same line because we're able to use
145

a ternary operator now instead of having to rely on IF and ELSE. Let's go ahead and test it out.
146

So I'm going to click on hot restart so that we reset the state of our app to the very beginning.
147

So that means that this gender, selectedGender is going to start out being null, which means both our cards
148

are going to be inactive. But as soon as I select one of the cards, it becomes the active color.
149

And if I select the opposite card, then it'll will deactivate that card.
150

So we have exactly the same functionality and it's created using just five lines of code.