Start learning free

LESSON 74 OF 348 · CONDITIONAL STATEMENTS

Comparison Operators in TypeScript: ==, ===, <, > and More

Lesson Read the full explanation

When writing if statements, we usually compare two values using one or more comparison operators:

Operator Name Examples
== Equal  x == 5,  x == y
!= Not equal  x != 3,  x != y
> Greater than  x > 5,  x > y
< Less than  x < 8,  x < y
>= Greater than or equal to  x >= 4,  x >= y
<= Less than or equal to  x <= 3,   x <= y

For example:

10 == 10 // Evaluates to true
3 < 2 // Evaluates to false
15 >= 15 // Evaluates to true
17 != 12 // Evaluates to true

We usually use these operators with variables:

let a = 10;
let b = 15;

if (a == b) {
    console.log("a is equal to b");
}
if (a < b) {
    console.log("a is less than b");
}

The first condition is not satisfied since 10 == 15 evaluates to false.

The second condition is satisfied since 10 < 15 evaluates to true.

The code above prints "a is less than b".

Assignment
Follow the Coding Tutorial and let's play with comparison operators.

Hint
Look at the examples above if you get stuck.

STEP 1 OF 3
    Ctrl + Enter to check

    TYPESCRIPT · CONDITIONAL STATEMENTS

    Comparison Operators in TypeScript, explained

    What comparison operators do

    A comparison operator looks at two values and produces a Boolean: true or false. That Boolean is what an if statement needs as its condition, so comparisons are how a program asks questions about its data.

    OperatorNameExamples
    ==Equalx == 5, x == y
    !=Not equalx != 3, x != y
    >Greater thanx > 5, x > y
    <Less thanx < 8, x < y
    >=Greater than or equal tox >= 4, x >= y
    <=Less than or equal tox <= 3, x <= y

    Each expression evaluates on its own:

    let a: number = 10;
let b: number = 15;

console.log(a == b);  // false
console.log(a != b);  // true
console.log(a < b);   // true
console.log(a >= 10); // true

    Used in an if, the same comparisons decide which code runs:

    if (a == b) {
    console.log("a is equal to b");
}
if (a < b) {
    console.log("a is less than b");
}

    Only the second condition is true, because 10 == 15 is false and 10 < 15 is true. The program prints a is less than b.

    The exercise

    The starting code has a grade:

    let grade: number = 8;

    A grade below 5 fails the test, and every grade of 5 or more passes.

    1. Test for failure. Write if (grade < 5) {. The < operator is true only when the left side is strictly smaller, so a grade of exactly 5 doesn't count as failed.
    2. Print the failure message. Inside the block, call console.log("Failed the test");.
    3. Cover everything else. Add } else { and print "Passed the test". The else has no condition. It runs for every grade that is not below 5, which is exactly the grades from 5 upward.

    The finished code:

    let grade: number = 8;

if (grade < 5) {
    console.log("Failed the test");
} else {
    console.log("Passed the test");
}

    With a grade of 8 it prints Passed the test. A grade of 4 prints Failed the test. A grade of 5 is the boundary case, and it passes, since 5 is not less than 5.

    Trying the boundary

    Whenever a program has a threshold, test the values around it. If the same if-else is wrapped in a function that takes grade as a parameter, these calls show where the line falls:

    check(4)    // Failed the test
check(4.9)  // Failed the test
check(5)    // Passed the test
check(8)    // Passed the test

    Changing grade < 5 to grade <= 5 would move the boundary and make 5 fail. That is a one-character change in the code and a very different rule for a student who scored exactly 5.

    The same habit applies to every comparison you write: ask what the operator does when the two values are equal, and make sure that matches what the rule in words says. "Below 5 fails" means <. "At most 5" would mean <=.

    You can also compare two variables, not only a variable and a fixed number, as in x < y.

    Equality in TypeScript: == and ===

    TypeScript has a stricter relative of ==, written === (with !== for "not equal"). The difference shows up when the two values have different types. == tries to convert them before comparing, while === never converts. Because types are erased when the code is compiled, this conversion happens at run time, even if the compiler reports an error.

    let x: number = 5;
let y: string = "5";

console.log(x == y);   // true  (the compiler reports an error, but the JavaScript runs)
console.log(x === y);  // false (the compiler reports an error here too)

    Both lines are reported because a number and a string can never overlap. The surprises of == are the reason most TypeScript code uses === and !==. For numbers of the same type, they give the same answer, so the lesson's == examples work either way.

    Gotchas

    • One equals sign assigns. grade = 5 stores a value. Comparing needs == or ===.
    • Boundaries. Choose between < and <= deliberately. At the boundary value, they give opposite answers.
    • Chained comparisons don't work. 1 < x < 10 is not "x between 1 and 10". It compares 1 < x first, then compares that Boolean with 10. Write x > 1 && x < 10 instead.
    • Strings compare in dictionary-like order. "apple" < "banana" is true, but the comparison goes character by character, so "10" < "9" is also true. Compare numbers as numbers.
    • Decimals. 0.1 + 0.2 == 0.3 is false, because numbers are stored in binary floating point. Compare decimals by checking that the difference is small.

    Key takeaways

    • Comparison operators produce true or false, which is what if conditions need.
    • < is strict, while <= includes the boundary. In the exercise, a grade of 5 passes.
    • Prefer === and !==, which never convert types.
    • Don't confuse = (assign) with == (compare).
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free