Transcript for:
The Conditional (Ternary) Operator

so we already saw two ways of writing conditionals the regular if else statement and the switch statement but there is another one and that's the conditional operator and this one is actually really nice so let's check it out so the conditional operator allows us to write something similar to an if else statement but all in one line so let's again start by defining an H variable and this time I'm setting it to 23. and now let's write eight greater or equal 18 so this is here or test to check whether the age is at least 18 so basically if the person is of full age and then after this condition we use the question mark and then here we write essentially or if block so that's the code that we want to be executed in case that this condition here is true so let's say console.log I like to drink wine let's again add a nice Emoji here so basically if the person is of full age they are allowed to drink wine okay and in this if block so to say we can only really have essentially one line of code so only one thing can be done if this condition is true then we also need basically a mandatory else block and that goes after this colon and so let's just copy this code and say I like to drink water okay and that's actually it so let's check the result and then Analyze This a bit more so in fact what gets locked to the console is I like to drink wine and that's because the age is 23 and so this condition is true right and this means that this code here is going to be executed and this one is not so the second part here which is essentially the else part now if we were 15 then of course the second part is executed okay so that's essentially writing an if else statement all in one line but instead of using a statement we use this conditional operator and the conditional operator is also called the ternary operator because it has three parts unlike other operators for example the plus operator has only two parts for example one plus two but this one has three parts so the condition then the If part and then the else part okay now the conditional operator is in fact an operator just as the name says and remember that an operator always produces a value so in other words an operator is an expression right so what this means is that if we have a value we can then assign that value to a variable and so with this we can make the ternary operator really useful to basically conditionally declare variables so what we did here is not so much used indeed instead we do it more like this so we would still test for this condition let's say so checking if the person is of full age and if that's true then all we want is essentially to return this and if not we only want this okay and so again this whole operator here is now an expression and an expression produces a value and so now we can go ahead and store that value into a variable so let's call that drink and then we can log this string to the console and let's comment out this part here and check and indeed we get wine as we declared up here great so drink is now really defined conditionally based on this condition and all in one simple line so without the conditional operator we would have to use an if else statement and with that this wouldn't be so easy remember when we want to declare a variable inside of an if or an else block we need to First declare that variable outside so let's actually do that so simply call it drink two and then we would say if the H is at least 18 then drink to is going to be wine just grab that here or else drink two is going to be this water here okay and again we need to define the drink two variable outside of the if and the else blocks because any variable that we Define inside of a block is not available outside so we declare the variable here and then reassign it inside of the blocks so just to make sure it worked let's lock this one here as well but we really just did this for the sake of comparison okay just so you can see the tremendous difference that the ternary operator introduces here in our code so if you ask me this one here is a lot easier to understand and a lot easier to write right so just changing this to something else here and yeah in both cases we get a water back so using the ternary operator we were really able to transform this big block of code all into one small operation like this and this is going to be useful in so many cases and we will really take advantage of this throughout the rest of the entire course and now we can take it even further because since the ternary operator is really an expression we can now use it for example in a template literal so unlike a normal if else statement like we tried and failed in the last lecture remember so that was here where I tried to insert this if statement here and of course it didn't work but using the ternary operator which produces a value we can actually have conditionals inside of a template literal so let's simply try that and so I can now say I like to drink and then based on the 8 I can say if I like to drink wine or water so here in this placeholder remember I can put any expression that I want and this here is an expression again because it produces a value so I grab it from here paste it here and that's it the template literal will now use whatever result we get from this operator so that's either going to be wine or water but then it assembles that result into the final string so let's check and indeed once more the conditional operator works just fine and with our H back to 23 then we get I like to drink wine great so I hope that this makes sense I know that especially this part here can be a little bit confusing for beginners so take a minute to really understand what happens here and always keep in mind the concept of operator and of expression which is something that produces a value and thanks to that we can then put that value here in this placeholder in the template literal all right now to finish I just wanted to mention that the ternary operator is not thought as a replacement of if else statements okay we still need if else all the time for example when we have bigger blocks of code that we need to execute based on a condition in that case the ternary operator is not going to work but the ternary operator is perfect when we just need to take a quick decision for example like this one and that's especially true in places where JavaScript really expects an expression just like here in this template literal so here we could not use an if else statement and so the ternary operator really comes to our rescue here so I think you can understand that this one is really really important so make sure that you absolutely understand how it works and once you do understand then let's move on to the final lecture of this section which is yet another coding challenge for you to see if you did actually understand how the conditional or ternary operator works