Logical AND

The logical AND (&&) operator evaluates operands from left to right, returning the first falsy operand it encounters. If all operands evaluate to a truthy value, it returns the value of the last operand. It utilizes short-circuit evaluation, meaning subsequent expressions are ignored the moment a falsy value is resolved.

declare const leftOperand: unknown;
declare const rightOperand: unknown;

leftOperand && rightOperand;

Evaluation Mechanics

Unlike strictly typed boolean operators in some other languages, the TypeScript && operator preserves and returns the underlying type and value of the evaluated operand, not necessarily a boolean primitive.

let a = 1 && "string";         // Evaluates to "string" (inferred type: string)
let b = 0 && "string";         // Evaluates to 0 (inferred type: number)
let c = true && false && true; // Evaluates to false (inferred type: boolean)

(Note: If the above variables were declared with const, TypeScript would infer their exact literal types, such as "string", 0, and false, rather than widening them to primitives).

Control Flow Analysis and Type Narrowing

In TypeScript, the && operator directly informs the compiler’s control flow analysis. When used in expressions, it acts as an implicit type guard. If the right operand is evaluated, TypeScript infers that the left operand is strictly truthy, automatically narrowing the types available to the right-hand expression.

declare const value: string | null;

// TS narrows 'value' from (string | null) to (string) on the right side of &&
const length = value && value.length; 

In the example above, if value is null (falsy), the expression short-circuits, returning null. If value is truthy, TypeScript guarantees it is a string before evaluating value.length, preventing a compiler error for accessing a property on a potentially null value.

Falsy Resolution

The operator triggers a short-circuit and returns the left operand if it resolves to any of the following standard falsy values:

• false
• 0 or -0
• 0n (BigInt zero)
• "" (empty string)
• null
• undefined
• NaN

Operator Precedence

The && operator has a lower precedence than equality operators (===, !==) but a higher precedence than the logical OR (||) operator.

declare const val1: number;
declare const val2: number;
declare const val3: boolean;
declare const val4: boolean;

const standardResult = val1 === val2 && val3 || val4;

// The compiler evaluates the above expression equivalently to:
const groupedResult = ((val1 === val2) && val3) || val4;

Master TypeScript with Deep Grasping Methodology!

Learn More