Operators

The families

Operators do the work between values. There are five groups worth naming now, each with its own chapter after this one.

Family	Examples	Produces
Arithmetic	`+ - * / % **`	a number
Assignment	`= += -= *=`	stores a value
Comparison	`=== !== < > <= >=`	a boolean
Logical	`&& \|\| !`	a value or a boolean
Other	`typeof ?? ?. ternary`	depends

JavaScript

const a = 7;
const b = 2;

console.log(a + b, a % b, a ** b);
console.log(a > b, a === 7);
console.log(a > b && b > 0);

Output

9 1 49
true true
true

Operands

Most operators take two values, one on each side. A few take one: ! flips a boolean, and - in front of a number negates it.

JavaScript

const ready = false;

console.log(!ready);
console.log(-(3 + 4));

Output

true
-7

Precedence

When several operators appear together, some bind tighter than others. Multiplication before addition, comparison before &&, and assignment last of all.

JavaScript

console.log(2 + 3 * 4);
console.log((2 + 3) * 4);

Output

14
20

Tip

Nobody remembers the full precedence table, and nobody should have to read code that depends on it. Add brackets when the grouping is not obvious at a glance.

The ternary

One operator takes three operands: a condition, a value if true, and a value if false. It is an expression, so it can go where a value is expected.

JavaScript

const hour = 20;
const greeting = hour < 12 ? 'Morning' : 'Evening';

console.log(greeting);

Output

Evening

Keep it to one decision. Nested ternaries are famously hard to read, and an if statement is right there.

The families

Operands

Precedence

The ternary

Test yourself

What does 2 + 3 * 4 produce?

What is the ternary operator for?

Arithmetic