Operators in JavaScript

Introduction

Operators perform actions on values—math, comparison, logic, and assignment. This chapter ties together expression basics, arithmetic, unary and ternary operators, equality rules, logical short-circuiting, operator precedence, and modern ?. and ??. Strong operator skills unlock conditionals and loops in the next chapters.

Prerequisites

• Numbers
• Booleans
• Type conversion

Expressions vs Statements (Recap)

An expression evaluates to a value; a statement performs an action:

// Expression: 3 + 5 evaluates to 8
const total = 3 + 5;
 
// Statement: if uses expressions inside
if (total > 5) {
  console.log("Large total");
}

Arithmetic and Assignment

// Arithmetic
let x = 10;
console.log(x + 2, x - 2, x * 2, x / 2, x % 3, x ** 2);
 
// Assignment shortcuts
x += 5;
x -= 3;
x *= 2;
console.log(x);

Unary Operators

Operate on one operand:

// Unary plus, minus, increment, decrement, not
let n = 5;
console.log(-n);
console.log(++n);
console.log(n--);
console.log(n);
 
const active = true;
console.log(!active);

Postfix vs prefix (++n vs n++) changes when the value is read—use simple n += 1 when clarity matters.

Ternary Operator

Compact conditional expression:

// condition ? ifTrue : ifFalse
const score = 72;
const label = score >= 60 ? "Pass" : "Fail";
console.log(label);

Use ternaries for short assignments; use if blocks for multi-step logic.

Comparison and Equality

// Prefer strict equality
console.log(5 === 5);
console.log(5 === "5");
console.log(5 == "5");

String comparison is lexicographic (Unicode code units), not always numeric order:

console.log("10" > "2");

Logical Operators and Short-Circuit

// && and || short-circuit
const user = { name: "Ada" };
const name = user && user.name;
console.log(name);
 
const display = "" || "Guest";
console.log(display);

&& returns the first falsy operand or the last value; || returns the first truthy or the last.

Operator Precedence and Parentheses

Complex expressions follow precedence rules (multiplication before addition, etc.):

// Without parentheses
console.log(2 + 3 * 4);
 
// With parentheses for clarity
console.log((2 + 3) * 4);

When in doubt, add parentheses for readers—even if not required.

Nullish Coalescing ??

Default only when value is null or undefined:

// ?? preserves 0 and ""
const retries = 0;
const max = retries ?? 3;
console.log(max);

Cannot mix ?? with && / || without parentheses—syntax error.

Optional Chaining ?.

Safe access when intermediate values may be nullish:

// Optional property and call
const data = { meta: { views: 10 } };
console.log(data.meta?.views);
console.log(data.author?.name);
 
const logger = null;
logger?.log?.("skipped");

Combine with ?? for defaults:

const city = data.user?.address?.city ?? "Unknown";
console.log(city);

Mini Example: Shipping Eligibility

// Combine operators in a realistic check
const order = {
  total: 49,
  country: "US",
  member: true,
};
 
const freeShipping =
  order.country === "US" &&
  (order.total >= 50 || order.member === true);
 
const message = freeShipping
  ? "Free shipping applied"
  : "Standard shipping";
 
console.log(message);

FAQ

Should I ever use ==?

Rarely. Some codebases ban it entirely via ESLint eqeqeq.

Is ?? the same as ||?

No. ?? only triggers for null/undefined. || triggers for all falsy values.

What is ??=?

Nullish coalescing assignment: x ??= 10 assigns only if x is nullish.

Do optional chains work on arrays?

Yes: arr?.[0], callback?.().

What comes next?

Conditional statements, then switch and loops.