Start learning free

LESSON 80 OF 348 · CONDITIONAL STATEMENTS

And Operator in TypeScript: Combining Conditions with &&

Lesson Read the full explanation

Sometimes you will need to test more than one thing at a time. The logical and operator (&&) returns true if and only if both conditions to the left and right of it are true. For example:

10 == 10 && 7 < 10 // Evaluates to true

We have two conditions separated by && operator:

10 == 10, which evaluates to true
7 < 10, which evaluates to true

As both conditions evaluate to true, the entire line will evaluate to true

An example inside an if statement:

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

Inside the if, we have two conditions separated by && operator:

x != 7, equivalent to 10 != 7, which evaluates to true
12 < x, equivalent to 12 < 10, which evaluates to false

As one of the conditions evaluates to false, the entire statement will evaluate to false, and so the program prints nothing.

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

Hint
Look at the examples above if you get stuck.

STEP 1 OF 2

Guided

Ctrl + Enter to check

TYPESCRIPT · CONDITIONAL STATEMENTS

And Operator in TypeScript, explained

What the and operator does

Sometimes one comparison is not enough. A trip to the beach needs sunny weather and a high temperature. The logical and operator && joins two conditions into one that is true only when both sides are true.

left	right	left && right
`true`	`true`	`true`
`true`	`false`	`false`
`false`	`true`	`false`
`false`	`false`	`false`

The comparisons on each side are evaluated first, and then && combines their results. In 10 == 10 && 7 < 10, the left side is true and the right side is true, so the whole expression is true.

Inside an if, it looks like this:

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

Here x != 7 is true but 12 < x is false, so the whole condition is false, the block is skipped, and nothing is printed.

Each side must be a full condition

A common beginner slip is to write x > 5 && < 10 as if the sentence "x is greater than 5 and less than 10" could be copied into code, which is a syntax error. Each side of && must be a complete condition that stands on its own: x > 5 && x < 10. The same goes for ranges in general: a value is between two bounds when it is above the lower one and below the upper one.

Short-circuit evaluation

The operator reads left to right and stops as soon as the answer is known. If the left side is false, the whole expression must be false, so the right side is never evaluated. A function call on the right does not even happen:

let calls: number = 0;

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

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

false 0
true 1

This is more than an optimization. You can put a safety test on the left and the risky one on the right: text !== null && text.length > 3 never reads text.length when text is null.

TypeScript details

Comparing with == and ===. The lesson's examples use ==. Between two values of the same type, such as two numbers or two strings, == and === give the same answer. === is the safer habit because it never converts types.
The compiler checks comparisons. If a variable is declared with const weather = "rainy", its type is the literal "rainy", and the compiler reports that comparing it with "sunny" has no overlap. Declared as let weather: string = "rainy", as in this lesson, any string can be compared. The compiler still produces JavaScript, but the message is a hint that the condition can never be true.
&& gives back one of its operands. With booleans on both sides the result is a boolean, as in this lesson. With other values, "a" && "b" gives "b", and "" && "b" gives "". Inside an if, only whether the result counts as true matters.

The exercise

The code declares weather and temperature. The task is to go to the beach only when the weather is "sunny" and the temperature is above 85, and otherwise to learn to code.

Write an if whose condition joins the two checks with &&: weather equal to "sunny" and temperature greater than 85.
Log "Going to the beach" inside that block, so the message appears only when both checks pass.
Add an else block that logs "Learning to code". It runs when either check fails.

let weather: string = "rainy";
let temperature: number = 90;

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

With the starting values, the temperature check is true but the weather check is false, so the program prints:

Learning to code

Change weather to "sunny" in the editor above and both checks pass, so the message becomes Going to the beach. Lower temperature to 85 and it goes back to Learning to code, because the comparison is strictly greater than.

Common mistakes

Using one & instead of two. A single & is a different operator, the bitwise and, which works on the bits of numbers. For conditions, write &&.
Using = instead of == or ===. weather = "sunny" assigns, and the condition no longer compares anything.
Getting the case or spelling of the text wrong. "Sunny" is not equal to "sunny".
Using >= when the task says above. A temperature of exactly 85 should not go to the beach.

Key takeaways

a && b is true only if both a and b are true.
Each side of && must be a complete condition.
If the left side is false, the right side is not evaluated.
Use === by default, and use else to cover everything the if did not.

Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.

Start learning free