Ternary Operator

[00:00:00]
>> WebDevSimplified: Now the next thing I want to talk about are going to be ternary operators, which are an even more condensed way to write really simple if-else checks. A ternary operator is composed of a question mark symbol and a colon symbol as well as a check you want to make. So let's take a look at a really simple one that we want to use. So we can come in here, we can say constant. What did I do in my example?

[00:00:19]
Let's just take a look. We're not even setting it to a variable. So we can just say that we have an age. We'll set that equal to 18 here, and I want to do a quick if check for my age to see if it's one value or another value. So I can do my check, whatever it is, we'll say greater than or equal to 20 is going to be my check that I want to do. And then what I want to do after that is I can put a question mark syntax.

[00:00:39]
Essentially what that is saying is that all the code that comes before here is going to be my if check. So this is the part that shows up normally in the parentheses in your if check. That's going to be that if this is true, then we do whatever is after the question mark. So in our case, this would be the thing that happens when we are true. Otherwise, we put a colon and that references everything that happens if we're false.

[00:01:00]
So if our value is false, then it's going to render whatever this false section is right here. So oftentimes we'll set this to a variable. Just like that, and now we can log out that variable if we wanted to. There we go. So you can see, since our age is not greater than or equal to 20, it's going to log out false. Well, if we change our age to be large enough, it'll log out true. So these ternary operators are a way to write a really condensed version of an if statement.

[00:01:29]
You take whatever your check is inside the parentheses, put it at the start, you follow that by a question mark. What would be in your if section goes directly after that, a colon, and then finally whatever would go inside the else section of your if statement goes after the colon. Now the important thing to understand is that ternaries return a value. We kind of looked at that. You can see here that we're setting a variable equal to this value because what happens is if this first thing that we pass in is true, it returns the thing that's after the question mark.

[00:01:58]
While if this evaluates to false, it returns whatever is after the colon. So this allows us to essentially easily toggle a variable state based on if something is true or false. And here we have two examples of the exact same code. The first one creates a variable called message. And then we do an if check to set that message. The second one uses a ternary operator to do the exact same thing, and you can see in this specific scenario, ternary operators make it a little bit easier and more condensed to write out this style of code.

[00:02:23]
Now you can also chain together ternary operators, and you can probably tell looking at this code, it's an absolute mess to read. I mean, I have no idea what's going on. This ternary statement at the top here is equivalent to this big if-else statement down here. So whenever you start to think about chaining ternary operators together by putting them directly chained inside of each other, I would highly recommend staying away from it.

[00:02:45]
Essentially the way that you chain these is after the colon, you would put whatever your next check is. So we have this next check here and then after that we put a brand new check. It's just not maintainable for code, so any time you're thinking about writing chained ternaries, just swap it over to a common if-else-if statement because that's a much easier to read and understand way of doing your ternary statements.

[00:03:04]
Now for the most part, I wouldn't really recommend using ternaries. They're a little bit harder to read and understand. Really, the only case that ternaries are useful for is when you have a really simple condition with two outputs and you're using that output to assign a variable. So for example, a great use case would be this message right here. We have a simple expression and two really simple values, and we're assigning them to a specific variable.

[00:03:26]
That's what ternaries were made for. Using them for anything else just adds extra complication. So pretty much for everything else, I just use a normal if-else statement. Now a simple exercise that we're going to go through here, I want you to convert this if-else statement into a ternary operator, so essentially setting this weather variable based on if the temperature is greater than 75, it should say hot, and if it's not greater than 75, it should say not bad.

[00:03:53]
Now that you've had a chance to actually go ahead and do that, we'll just look at the solution here real quick, and you can see we've essentially converted this to that one single line. We have our variable name which we're able to actually convert to a constant because we no longer need to redefine it. If our temperature is greater than 75, that's our if check portion. After that question mark, we put the true value, which is hot, and after the colon here, we put the false value which is going to be not hot.