That is a much better way of doing it and it's the way you're going to see in pretty much every framework and modern application that you'll run into. So it's very good to become familiar with that syntax. Now in addition to what we did, we built a string. We placed it inside backticks, and then we use the dollar curly bracket syntax for sliding in expressions. ${}

We saw that we could perform calculations we could put single or multiple variables in but another type of way that I'm seeing happening a lot in modern applications is to place conditionals. Now you can't place conditionals in the normal sense like where you have a full if else then if kind of block, and you wouldn't want to.

That would look absolutely hideous you'd need to have all these different lines and you would not want to put that all inside of a string. What you can do is use what's called a ternary operator. Most programming languages have this type of operator and it's a way of checking to see if something is true then perform one action. And if not perform another action.

You can only have an if and an else you can't have multiple layers so this is only for basic kinds of conditionals. You can only have one type of check. And so what we're going to do is do a pretty practical example here where we're going to change the class.

You can think of this being something where we'd perform this type of action inside of a, say, a framework like angular where we want to change the class of a div or some type of HTML element on the page, based off of what type of page it's on.

So right here what I can do is I can say that I want to create a class or I want to define a class and I want it to be dynamic based on the value of this variable right here and I'm not going to change it. So this should just be a const and not a let.

So for a class right here this is just your normal string. This is what you'd find in the HTML document. And I'm going to use string interpolation with our dollar curly brackets, and now I'm just going to write a ternary operator.

So I'm going to say page is triple equals to home. Then I want to render out this text so I'm going to say a master-layout.
And if not then I say secondary-layout and that is all I need to do.

So if I run and before we get into it we are going to walk through the syntax let's just run it and see what happens. So if I hit run now you can see down on the bottom it prints out it combined and it picked out Master layout because this was true.

Now if I change this and I say we're on the About page now. Then I run this and now it says secondary-layout.

So this is a great way of adding some dynamic behavior right into your system and you will see this a lot in modern frameworks like angular and react. So let's kind of dissect what we have going on here.

A ternary operator is made up of three components. The first is the conditional. So that's right here that's where we're checking if Page is equal to home. And then you have this whole question mark and then the first component right after that is what happens if this conditional is true then you have a colon followed by what happens if this condition is not true.

So that is how you can build a turn for the operator. You have a condition followed by the result if it's true, followed by the result if it is not. It's a very basic conditional but it's nice because it's one that you can perform on a single line.

Code

const page = 'about';
console.log(`class=${ page === 'Home' ? 'master-layout' : 'secondary-layout' }`);