In the last guide we talked about conditionals in typescript and in this one I want to go through the full list of conditional operators now conditional operators are the operators right inside of the condition. So for the sake of simply going through the syntax in the last guide I made all of the checks and all the operators equals but we actually have a lot more flexibility we don't only have to check for equals and in this guide I'm going to go through each one of the options we have.

So first and foremost when we check to see if two items are equivalent we use the double equals. A common error that all see when you send a piece of code that students having an issue with is where they place a single equals here. And this is a common thing because you're used to saying that you know x is equal to Y or something like that just in using regular arithmetic. However the reason why this doesn't work in computer science is because the way that the parsers work for most languages is that equals is going to denote that we're setting the value of the variable equal to whatever's on the right hand side. So here what the parser does is it comes to X equals 200 and it actually tries to assign 200 to X and then it's going to cause an issue.

let x :number = 100;

Double Equals

So what most languages do is they simply have a double equals sign. So I have X is set to 100 then I'm checking to see if x is equal to 200. And if so it's going to say condition passed. Now if I come over here. And run this and type in the code we want to run. Nothing is going to print out. And that's because the condition did not pass. Now I'm going to keep each one of these here and I'm simply a comment amount so that when you go and check the source code you'll have the full list of operators. So that is double equals.

if(x == 200) {
  console.log(‘Condition passed’);
}

Now triples equals is something that is used a lot in JavaScript development and it is available in typescript except a lot of times the compiler doesn't even let this work. So let me let me actually run this code and then I'm going to show you how this used to be different. So I'm going to switch to a terminal. Run this again. And you can see it said condition pass because I set these equal to 100. Now let's go look at the actual JavaScript code. If I come over here you can see that this is passing in it you know set are variable and then here it set the condition for x is triple equals to 100. But now let's see what happens. If I were to put quotes around this and let me run this again. You can see it. That condition does not pass. But let me take away the triple equals and let me run it again. Now you can see it says condition passed. But if I were to try to do the same thing here if I were to try to set this equal. To a string and I'm going to I don't have to touch the JavaScript code I can come here. You can see the compiler doesn't even let this code work. And what it says is it says it gives a typescript error and it says the operator double equals cannot be applied to types of number in string. And so it's actually saying that we're not even allowed to try to compare these values because we know that X is a number and we know that a hundred in this case is a string but with JavaScript it was perfectly fine letting this happen.

So JavaScript because it's not specific with types and type declarations it would allow this kind of code to run. And that's part of the reason why in JavaScript development you will see this triple equals used a lot with pure JavaScript and the reason was because people were trying to enforce what type script actually kind of does right out of the box and that's part of the reason why we've had such a big trend on going towards languages like typescript that do have the ability to give statically typed declarations is because this type of code here would be very buggy and a lot of JavaScript developers were sick and tired of having to constantly check for the value types.

Now I've spent a lot of time showing you how that works in JavaScript not typescript. I haven't actually really explained what the difference between two equals and three equals is. Two equals only checks for the equivalence of values. So in other words when we had this in pure JavaScript this worked perfectly fine because JavaScript looked at a hundred. Here is an integer and 100. Here is a string and it assumed we were just trying to compare the values and add no problem saying yeah 100 is equal to 100. And it ignored the data type. However. We got a failure and that condition did not pass when we did three equals.

Triple Equals

What 3 equals does is it checks not only for the value but it also verifies that the data type is the same as well. So that's what the difference between two equals and three equals are. And I'm going to fix this one. So that we get back to having code that's actually working. Now if I run this again it says condition passed and we are all going to go in as you can see our JavaScript code got updated accordingly. So I'm going to copy this comment it out and we'll move down the line. I spend the most time talking about those two things because that's a very subtle difference but it's also a very important one. And I'm going to save it in the comments. It just so you have an idea of how that works.

if(x === 100) {
  console.log(‘Condition passed’);
}

Not Equals

Third one is going to be not equals two. And the way you do not equals two is a bang and then equals. So what this is saying is if x is not equal to 100 then run this code we know that those two are equal. So if I come down and run this code. Nothing happens and that's the way it should be because these two are this condition did pass. Coming down so we had not equals to.

if(x != 100) {
  console.log(‘Condition passed’);
}

Greater Than, Less Than, Less Than or Equal to, and Greater Than or Equal to

Next one I'm going to do is greater then. So here I'm checking to see if x is greater than 100 then we're going to say condition passed and if not nothing's going to happen. So in this case nothing should happen. Because X is not greater than 100 it's equal to a hundred. Now if I take this. We have x is greater than or equal to 100. Now this should pass. So if I. Run this code again. You can see the condition passed and I'm not going to manually do this for the next two because they're pretty much the same just reversed.

We have f if X is less than 100 or if X is less than or equal to 100 and these are going to work exactly like these conditionals just in the opposite manner.

if(x > 100) {
  console.log(‘Condition passed’);
}

if(x >= 100) {
  console.log(‘Condition passed’);
}

if(x < 100) {
  console.log(‘Condition passed’);
}

if(x =< 100) {
  console.log(‘Condition passed’);
}

I'm going to comment them out and then you'll have access to all of this code so you of the full list of all the operators all seven operators here and you'll be able to use these inside your typescript programs.

Resources

• Source code