Operators, Equality, and Coercion

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Operators, Equality, and Coercion step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Predict operator behavior from operand types.
Prefer strict equality and explicit conversion.
Use ??, &&, ||, and optional chaining without losing valid data.
Make precedence and short-circuit effects readable.

DEEP EXPLANATION

Build the complete mental model

Operators do not have one meaning in every context

The plus operator adds numbers or concatenates when a string participates. Comparison and loose equality can run abstract conversion rules that are difficult to infer locally. Those rules are standardized, but relying on them shifts work to every reader. Normalize values first and use strict equality for domain decisions. Keep money in integer minor units to avoid binary floating-point surprises in common decimal calculations.

Fallback operators encode different definitions of missing

Logical OR returns the right operand when the left is any falsy value, including zero, false, and an empty string. Nullish coalescing falls back only for null or undefined. Optional chaining stops a property access or call when the preceding value is nullish. These operators are compact contracts, so choose the one that matches the data rather than the shortest-looking syntax.

Short-circuiting controls evaluation

With &&, ||, ??, and optional chaining, the right side may never run. This can be useful for conditional work, but hiding important effects inside an expression makes execution harder to trace. Parentheses should clarify mixed operator groups. When a condition combines several business rules, name intermediate booleans so logs and tests can explain which rule failed.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Preserve valid falsy settings

The configured value zero is valid, while a missing value should use the default.

const savedDelay = 0;
const delayWithOr = savedDelay || 500;   // 500: zero was replaced
const delayWithNullish = savedDelay ?? 500; // 0: zero was preserved
console.log({ delayWithOr, delayWithNullish });

Example 2: Name a complex decision

Intermediate booleans expose the policy and make each boundary independently testable.

const hasSeats = availableSeats > 0;
const hasValidAge = Number.isInteger(age) && age >= 16;
const canRegister = hasSeats && hasValidAge && !isBlocked;

if (canRegister) register();

How to trace this lesson

Evaluate parentheses and property access before surrounding operators.
Write down operand types before predicting + or comparison results.
For a short-circuit operator, record whether the right side executes.
Test every valid falsy value before selecting a fallback operator.

Common mistakes and corrections

Using == because it seems convenient for form values.: Convert the form value once and compare values of the intended type with ===.
Using || for numeric defaults.: Use ?? when zero is a valid configured value.
Compressing a policy into one long boolean expression.: Name the meaningful subconditions and test their boundaries.

PRACTICE LADDER

Move from recognition to independent work

1
Predict twelve coercion expressions before running them.
2
Replace implicit coercion in a line-total calculation.
3
Compare || and ?? with zero, false, empty text, null, and undefined.
4
Refactor a compound authorization condition into named rules.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

An operator's meaning depends on its operands

The plus symbol performs numeric addition or string concatenation. Relational and loose equality operators may also convert operands. Prefer explicit conversion and strict equality so the reader can see the intended domain. Use nullish coalescing when only null and undefined mean missing; logical OR also replaces valid falsy values such as zero.

Precedence is a reading rule, not a style goal

Multiplication runs before addition, and logical operators have their own precedence. Parentheses make a mixed expression's grouping explicit and protect it when requirements change. Short expressions can remain natural, but a dense condition is usually clearer when named intermediate booleans explain each decision.

RUNNABLE EXAMPLE

Change one assumption at a time

Compare 0 || 10 with 0 ?? 10, then compare '3' == 3 with '3' === 3. Explain every result before choosing a production rule.

const rawQuantity = "3";
const quantity = Number(rawQuantity);
const price = 1250;

if (!Number.isInteger(quantity) || quantity < 1) {
  throw new TypeError("Quantity must be a positive integer");
}

console.log({ totalCents: price * quantity, exactMatch: quantity === 3 });

const rawQuantity = "3";
const quantity = Number(rawQuantity);
const price = 1250;

if (!Number.isInteger(quantity) || quantity < 1) {
  throw new TypeError("Quantity must be a positive integer");
}

console.log({ totalCents: price * quantity, exactMatch: quantity === 3 });

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const quantity = "2";
const total = 100 + quantity * 50;
console.log(total);

Reveal repair and explanation

const quantity = Number("2");
if (!Number.isInteger(quantity)) throw new TypeError("Invalid quantity");
const total = 100 + (quantity * 50);
console.log(total);

Multiplication coerced the string, but relying on that hidden conversion makes the input contract unclear. Normalize it first.

INDEPENDENT LAB

Build without copying the example

Build a calculateLineTotal function with an integer quantity, price in cents, and an optional discount in cents.

function calculateLineTotal(quantity, priceCents, discountCents = 0) {
  // Validate, calculate, and never return a negative total.
}

function calculateLineTotal(quantity, priceCents, discountCents = 0) {
  // Validate, calculate, and never return a negative total.
}

Press Run to execute your code.

Self-review checklist All money uses integer cents. Strict checks reject invalid quantities and prices. Tests cover zero discount, a valid discount, and a discount larger than the subtotal.What did you predict, observe, and change?

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

Operators, Equality, and Coercion | JavaScript Course | SovranCode

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering