Start learning free

LESSON 83 OF 348 · CONDITIONAL STATEMENTS

Or Operator in TypeScript: Conditions with ||

Lesson Read the full explanation

Sometimes we will need to run some code if at least one of two conditions is true. The logical or operator (||) returns true if either of the conditions is true. Otherwise, if both conditions are false, it returns false.
For example:

7 >= 10 || 10 < 12 // Evaluates to true

We have two conditions separated by || operator:

  • 7 >= 10, which evaluates to false
  • 10 < 12, which evaluates to true
As at least one of the conditions evaluates to true, the entire line will evaluate to true

Another example:

10 < 15 || 10 > 9 // Evaluates to true as both conditions are true

An example inside an if statement:

let x = 10;
if(x != 10 || 12 < x) { // Evaluates to false
    console.log("This is true!");
}

Both conditions evalute to false, so the entire condition evaluates to false and the program prints nothing.

Assignment
Follow the Coding Tutorial and play with the or operator.

Hint
Look at the examples above if you get stuck.

STEP 1 OF 2
    Ctrl + Enter to check

    TYPESCRIPT · CONDITIONAL STATEMENTS

    Or Operator in TypeScript, explained

    What the or operator does

    Sometimes code should run when at least one of two conditions holds. The logical or operator || is true if either side is true, and false only when both sides are false.

    leftrightleft || right
    truetruetrue
    truefalsetrue
    falsetruetrue
    falsefalsefalse

    In 7 >= 10 || 10 < 12, the left side is false and the right side is true, so the whole expression is true. In 10 < 15 || 10 > 9, both sides are true, and the result is true as well. This operator is inclusive: having both conditions true is allowed.

    Inside an if:

    let x = 10;
if (x != 10 || 12 < x) {
    console.log("This is true!");
}

    Both x != 10 and 12 < x are false, so the condition is false and nothing is printed.

    Short-circuit evaluation

    The operator reads left to right and stops when the answer is known. If the left side is true, the whole expression must be true, and the right side is never evaluated:

    let calls: number = 0;

function check(): boolean {
    calls++;
    return true;
}

console.log(true || check(), calls);
console.log(false || check(), calls);

    true 0
true 1

    The first call never runs check, so calls stays at 0. The second needs the right side, so it runs.

    TypeScript details

    • || gives back one of its operands. With booleans, the result is a boolean. With other values, 0 || "dflt" gives "dflt", because 0 counts as false. That makes || a common way to supply a default, but it also replaces valid values like 0 and "". The nullish operator ?? replaces only null and undefined: 0 ?? "dflt" gives 0.
    • Do not mix || with ?? without parentheses. a || b ?? c is a syntax error in JavaScript, so the compiled program does not start at all.
    • != and !==. The lesson's solution compares strings with !=. Between two strings it gives the same answer as !==, which never converts types and is the safer habit.

    The exercise

    The code declares weather and temperature. The program must print "Learning to code" when the weather is not sunny or the temperature is 85 or below, and "Going to the beach" otherwise.

    1. Write the first comparison, weather != "sunny", true when the weather is anything but sunny.
    2. Write the second, temperature <= 85, true when it is not hotter than 85. The comparison includes 85 itself, since only temperatures above 85 count as hot.
    3. Join them with ||. Either problem is enough to stay home.
    4. Log "Learning to code" in the if block, and add } else { with a log of "Going to the beach".
    let weather: string = "sunny";
let temperature: number = 90;

if (weather != "sunny" || temperature <= 85) {
    console.log("Learning to code");
} else {
    console.log("Going to the beach");
}

    With the starting values, the weather is sunny and the temperature is 90. Both comparisons are false, so the condition is false and the else runs:

    Going to the beach

    Change weather to "rainy" or temperature to 80 and the first message appears instead.

    Why the else is the beach

    The else block runs when the whole condition is false, and an or is false only when both sides are false: the weather is sunny and the temperature is above 85. This is the same situation that weather == "sunny" && temperature > 85 describes. The two forms are linked by De Morgan's laws: !(a && b) equals !a || !b. Negating == gives !=, and negating > gives <=, which is exactly what this solution writes.

    Common mistakes

    • Using && instead of ||. The message would then appear only when both are problems: rainy and cold.
    • Using < instead of <=. A temperature of exactly 85 would go to the beach instead of staying home.
    • Using a single |. That is the bitwise or, which works on the bits of numbers, and it is not what you want for conditions.
    • Repeating only half the condition. weather != "sunny" || "cold" is always true: when the weather is sunny, the expression gives "cold", and a non-empty string counts as true.

    Key takeaways

    • a || b is false only when both a and b are false.
    • If the left side is true, the right side is not evaluated.
    • Use ?? rather than || for defaults when 0 or an empty string is a valid value.
    • The else of an or-condition covers the case where every part is false.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free