3.8 The Logical Operators with non Booleans

In the previous lesson, all logical expressions involved boolean operands. In JavaScript — unlike many other languages — you can also use logical operators with non-boolean values, and that opens very powerful patterns. The result of a logical expression is not necessarily true or false — it is the value of one of the operands.

console.log(false || true);    // true
console.log(false || 'Toto');  // "Toto"
console.log(false || 1);       // 1

Truthy and falsy values

When the engine evaluates a non-boolean operand, it interprets it as either truthy or falsy. The falsy values in JavaScript are:

  • undefined
  • null
  • 0
  • false
  • '' (empty string)
  • NaN (not a number, returned by invalid math)

Any other value is truthy. So 'Toto' (a non-empty string) is truthy, and so is the number 1.

Short-circuit evaluation

With ||, the engine evaluates operands from left to right and returns the first truthy one it finds — then stops. In false || 1 || 2, evaluation returns 1 immediately; 2 is ignored. That behavior is called short-circuit evaluation.

This is extremely useful to provide default values. Suppose the user can choose a color, otherwise we fall back to a default:

const userColor = 'red';
const defaultColor = 'blue';
const currentColor = userColor || defaultColor;
console.log(currentColor); // "red"

If userColor were undefined (the user skipped selection), the expression would return 'blue'. That's the power of logical operators with non-booleans. In the next demonstration, we'll move on to bitwise operators.

Summary

This lesson explains how JavaScript logical operators work with non-Boolean values, introducing the concepts of truthy and falsy values. You'll learn how JavaScript evaluates expressions containing non-Boolean operands and discover the practical power of using the OR operator to provide default values. The lesson covers the six falsy values in JavaScript (undefined, null, 0, empty string, false, and NaN) and demonstrates short-circuit evaluation with a real-world example of setting a default color.

Key points

  • Logical operators in JavaScript can work with non-Boolean values, returning actual values rather than just true or false
  • Falsy values in JavaScript: undefined, null, 0 (number zero), empty string, false, and NaN (Not a Number)
  • Everything that is not falsy is considered truthy
  • When evaluating OR expressions, JavaScript returns the actual value of the operand, not necessarily a Boolean
  • Short-circuit evaluation: the OR operator stops evaluating as soon as it finds a truthy operand and returns it immediately
  • Practical use case: setting default values using the OR operator (e.g., userColor OR defaultColor)

FAQ

What are the six falsy values in JavaScript?

The falsy values in JavaScript are: undefined, null, 0 (number zero), empty string (""), false (Boolean), and NaN (Not a Number). All other values are considered truthy.

Why do logical operators return values other than true or false?

JavaScript returns the actual value of the operand because when evaluating logical expressions, it checks whether operands are truthy or falsy. The first truthy value encountered in an OR expression is returned, making this useful for providing default values in practical applications.

What is short-circuit evaluation and why does it matter?

Short-circuit evaluation means that the OR operator stops evaluating subsequent operands as soon as it finds a truthy one and returns that value immediately. The remaining operands are ignored, which improves performance and enables practical patterns like setting default values.