Lesson 4

Greetings, Explorer! Today, our exploration takes us to **TypeScript Comparison Operators**. Much like in real life, our code often needs to make decisions based on comparisons. Our voyage today will elucidate how comparison operators in TypeScript compare values, thus forming the basis for decision-making tools.

Life and programming both involve a lot of comparisons, and TypeScript is no exception. TypeScript comparison operators, which are similar to JavaScript's, include `==`

, `!=`

, `===`

, `!==`

, `>`

, `<`

, `>=`

, `<=`

. Let's dive straight into an example:

TypeScript`1let number5: number = 5; 2let number10: number = 10; 3 4console.log(number5 == number10); // false, because 5 is not equal to 10 5console.log(number5 === number10); // false, because 5 is not equal to 10 6console.log(number5 != number10); // true, because 5 is indeed not equal to 10 7console.log(number5 !== number10); // true, because 5 is indeed not equal to 10 8console.log(number5 > number10); // false, because 5 is not greater than 10 9console.log(number5 < number10); // true, because 5 is less than 10 10console.log(number5 >= number10); // false, because 5 is neither greater than nor equal to 10 11console.log(number5 <= number10); // true, because 5 is less than or equal to 10`

The provided example covers all comparison operators, and we are going to break down some of them in the forthcoming sections for a detailed understanding.

In this deep dive, we’ll pay close attention to the differences between double equals (`==`

) and triple equals (`===`

), and not equals (`!=`

) and not strictly equals (`!==`

) operators.

**Equal to (**and`==`

)**Not equal to (**- These operators consider only the value, while ignoring the type.`!=`

)

TypeScript`1console.log(5 == <any>"5"); // true, as the value 5 matches with the string "5", even when the types are different 2console.log(5 != <any>"5"); // false, due to matching values`

**Strictly equal to (**and`===`

)**Not strictly equal to (**- These operators take into account both the type and the value.`!==`

)

TypeScript`1console.log(5 === <any>"5"); // false, due to mismatch in types (number and string) 2console.log(5 !== <any>"5"); // true, as their types and values don't match`

As evident, `===`

and `!==`

guarantee a robust check, ensuring that the compared variables share the same value and type. Understanding these nuances is a critical skill in decision-making processes!

Imagine a playground that only allows entry to children between the ages of 5 and 10 years. Applying chained comparison operators can be handy in such situations:

TypeScript`1let age: number = 7; 2 3console.log(age >= 5 && age <= 10); // true, because 7 is within the range 5-10`

The logical AND operator `&&`

was used to chain the comparisons. The result inside the parentheses is `true`

only when both conditions — `age >= 5`

and `age <= 10`

— are true.

TypeScript also features the logical OR operator `||`

, allowing us to chain multiple conditions. The result is `true`

if either or both conditions hold true.

Consider a supermarket that offers discounts to customers under 12 or over 60. The logical OR operator `||`

fits perfectly here:

TypeScript`1let age: number = 65; 2 3console.log(age <= 12 || age >= 60); // true, since 65 is greater than 60`

In this scenario, `age <= 12`

is `false`

, but `age >= 60`

is `true`

. As we used the logical OR operator, the entire statement returns `true`

because at least one condition was met.

Well done! You've now gained a solid understanding of TypeScript comparison operators. We've studied the handy tools for making comparisons, their subtleties, and methods for chaining them for complex conditions.

Engaging activities are up next for you to apply these concepts and hone your skills in practice. Remember, repetition strengthens skills, and this newfound knowledge of comparison operators can be a cornerstone of your programming journey. Keep practicing and happy coding!