JavaScriptOperators Overview

Operators Overview

Operators are the verbs of an expression — +, ===, &&, typeof and dozens more. JavaScript groups them into roughly a dozen categories. This page is a quick tour with one or two examples per category; each section then has a dedicated page that goes deeper.

Arithmetic

The familiar math operators plus exponentiation and modulo.

JS
1 + 2;      // 3
10 - 4;     // 6
3 * 4;      // 12
10 / 3;     // 3.3333...
10 % 3;     // 1   (remainder)
2 ** 10;    // 1024 (exponentiation)
let n = 5; n++; // 6 (increment)

See Arithmetic Operators for the details, including NaN, Infinity and the string-concatenation quirk of +.

Assignment

= puts a value in a variable. Compound forms combine an operator with assignment.

JS
let x = 10;
x += 5;     // x is now 15
x *= 2;     // x is now 30
x **= 2;    // x is now 900
x ??= 0;    // assigns only if x is null/undefined
x ||= 1;    // assigns only if x is falsy

Destructuring (const { name } = user;) is also an assignment — covered in Assignment Operators.

Comparison

The result is always a boolean. Use === rather than == unless you have a reason.

JS
3 < 5;        // true
"a" < "b";    // true (lexicographic)
3 === 3;      // true
3 === "3";    // false (different types)
3 == "3";     // true  (loose — coerces)
3 !== "3";    // true
Logical

&&, || and ! work on booleans — but they actually return one of the operands, not necessarily a boolean. ?? is nullish coalescing: like || but only triggers on null or undefined.

JS
true && "yes";        // "yes"
false || "fallback";  // "fallback"
!true;                // false
null ?? "default";    // "default"
0 ?? "default";       // 0   — note the difference from ||
Bitwise

Operate on the 32-bit integer representation of numbers. Rare in business logic, occasional in graphics, codecs and flag-based APIs.

JS
5 & 3;     // 1     (AND)
5 | 3;     // 7     (OR)
5 ^ 3;     // 6     (XOR)
~5;        // -6    (NOT)
1 << 3;    // 8     (left shift)
16 >> 2;   // 4     (right shift)
String

The only operator unique to strings is the same + as arithmetic — JavaScript reuses it. Template literals \...`are part of the syntax, not an operator, but they replace most+`-based concatenation in modern code.

JS
"Hello, " + name;          // works, but old-school
`Hello, ${name}`;          // template literal — preferred
Conditional (ternary)

The only ternary (three-operand) operator in the language.

JS
const role = isAdmin ? "admin" : "user";

Concise for simple choices, ugly when nested. See Ternary Operator.

Unary

Operators that take a single operand: typeof, delete, void, unary + and -, !, the spread ... in some contexts.

JS
typeof "hi";     // "string"
+"42";           // 42 (string → number)
!true;           // false
delete obj.key;  // removes a property
void 0;          // undefined (curiosity)
Relational

Two operators that check membership and prototype chain:

JS
"a" in { a: 1, b: 2 };   // true
0 in [10, 20, 30];       // true (arrays are objects with numeric keys)

[] instanceof Array;      // true
new Date() instanceof Date; // true
Comma, spread and grouping

JS
// Grouping — change precedence
(1 + 2) * 3;          // 9

// Spread — expand an iterable
const a = [1, 2, 3];
const b = [0, ...a, 4];   // [0, 1, 2, 3, 4]

// Rest — gather into an array (in function signatures, destructuring)
function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }

// Comma operator — evaluate left to right, return the last value
let x = (console.log("a"), console.log("b"), 42);
// logs "a", "b"; x === 42
Comma operator is rare
Most uses of the comma in JavaScript are *separators* (function arguments, array literals). The comma *operator* is a different beast and almost never appears in app code outside of minified bundles and the occasional clever `for`-loop step.
Optional chaining and nullish coalescing

Two newer operators that pair well together.

JS
const street = user?.address?.street ?? "unknown";

// Without them:
// const street = user && user.address && user.address.street
//   ? user.address.street : "unknown";

?. short-circuits to undefined if the left side is null or undefined. ?? falls back only on null/undefined (not on 0 or ""). They make defensive code dramatically shorter.

Arrow function, await, yield

Less commonly classified as operators, but each is a small piece of expression syntax:

JS
const double = x => x * 2;          // arrow function expression

async function getData() {
  const data = await fetch(url);    // pauses until the promise settles
}

function* range(n) {
  for (let i = 0; i < n; i++) yield i; // pauses and resumes
}
Precedence at a glance

When operators of different categories appear in the same expression, precedence decides who binds tighter. The categories above are roughly ordered from tightest (member access a.b, function call f()) to loosest (comma, assignment, yield).

When unsure, add parentheses
Nobody remembers the full precedence table off the top of their head. Reach for `()` whenever the order isn't obvious — your reader will thank you, and it costs nothing. The full table lives on the [Operator Precedence](/javascript/operator-precedence) page.
Where to go next