Coding Tutorial: Easy Way to Understand the Ternary Operator in the JavaScript Programming Language

In this JavaScript programming language tutorial we're going to take a comprehensive look into the ternary operator. We're going to discuss what a ternary operator is, why they're important to use and then we're going to walk through a number of examples. So the very first question is, what is a ternary operator? Kind of has a weird name and you're going to find out later it has an even more weird syntax. A ternary operator is simply a conditional in JavaScript that can be placed on a single line. Ternary operators are important to learn because as you're going to see in the screen cast, they're required when building out conditionals directly into applications such as React apps or Vue applications. We're going to take a very different approach to walking through the ternary operator than I've seen from other videos.

We're first going to look in analyze at what attorney operator would look like in a React application. Then we're going to go through two examples. We're going to start off with a basic, just very similar to an if/else conditional. And then we're going to see how you can implement compound conditionals directly into the ternary operator. As always, I'll be following along in the comments section. So if you have any questions, comments, recommendations, anything like that, feel free to add those and I'll get back to them as soon as I can. And if this video was helpful along your own coding journey, please give it a like and subscribe so I can keep on making more of them. So with all that being said, let's dive into the code.

Let's walk through the code for the ternary operator and we're first going to start off by looking at why the ternary operator in JavaScript is necessary and the reason why I'm going with this approach is because I have seen through the years that the ternary operator can be very confusing as a very different syntax than the regular JavaScript conditional or even the Switch statement. And so I want to first show why ternary operators are important to understand because the very first question that I usually get from a student after I have shown them how to use a ternary operator is, "Why in the world would I want to use this really weird looking syntax when I could use a regular if/else conditional or a case statement?" And it's a fair question until you see the rationale for why. So I'm going to open up the HTML tab right here. And I'm going to write what looks like HTML but it's actually a template engine called JSX and so if you write any programs or you ever want to write any programs in React or Vue, then you might use JSX in order to write out your templates. So it looks a lot like HTML. And for the sake of example, you can just imagine that it's HTML if you've never used it before, 'cause it looks like it.

So I'm going to create a div here. And let's imagine that I'm building out a React project and I want to show or I want to hide a div or in let's say, it's a tab. The way that I can do that is by saying, class name, equals and then in curly brackets here, I can write some JavaScript code. Now, if I want to show or hide this specific div or this tab, or whatever it is, then I need to have some conditional logic. So say, we want to check to see if someone has the right permissions, then I can't do something like this. I can't write a regular conditional and say if, has permission === true. Then on another line like this have all of my logic. That is not something that is allowed. So I'm going to get rid of all of that. Let's see what we can do.

This is where the ternary operator comes in. I have to write this all on one line. And what a ternary operator allows you to do is to do that. Is to write an entire conditional on a single line. Here what I could say is, has permission and then I'm going to do a question mark, and then we'll say active and I'm making all of this up right here. This is just an example to show what you may build. Then we're going to get into real examples later on. So I could say active colon and then disabled. So what I have done here is I've provided a conditional. So this is the same thing as saying if, has permission then I want you to return active and if not, I want you to return disabled. This is the only way or the proper way I should say, for building a conditional in tools like React or Vue so that you can have some dynamic behavior built directly into your HTML and your JSX. So this is the main reason why ternary operators are so important to learn because if you are building out any kinds of real world front end application, you're most likely going to have to build in something like this at some point or another.

Full guide and source code:
https://www.crondose.com/2018/09/javascript-ternary-operator-tutorial-with-multiple-code-examples/

Follow me:

Twitter: https://twitter.com/jordanhudgens
Instagram: https://www.instagram.com/jordanhudgens/
GitHub: http://github.com/jordanhudgens