JavaScript Operators: An Introduction

Operators are the small symbols that actually do the work in a program. They add numbers, compare values, combine conditions, and decide which branch your code takes. There are a lot of them, but they fall into a few clear families: arithmetic for maths, assignment for storing results, comparison for asking questions, and logical for combining true and false. Learn these four groups and you can read and write the everyday logic of almost any JavaScript program. This article walks through each family, flags the traps that catch beginners, and finishes with a worked example that uses them together.

Arithmetic operators

These are the familiar maths symbols, and they behave as you would expect.

let x = 10;
let y = 3;
console.log(x + y);   // 13  addition
console.log(x - y);   // 7   subtraction
console.log(x * y);   // 30  multiplication
console.log(x / y);   // 3.333...  division
console.log(x % y);   // 1   remainder (modulo)

The first four need no explanation, but the last one often does. The percent sign is the modulo, or remainder, operator: it gives what is left over after division. So ten divided by three is three with one left over, and x % y is that one. Modulo is more useful than it first looks, because it answers questions like “is this number even?” with n % 2 === 0, or “every tenth item” with i % 10 === 0. Note that unlike Python, JavaScript has no separate floor-division operator, division always produces a decimal result.

Increment and decrement

Adding or subtracting one is so common that JavaScript gives it a shorthand: ++ to increase by one and -- to decrease by one. There is a subtlety here that is a classic beginner trap, which is whether you put the operator before or after the variable.

let x = 10;
console.log(++x);   // 11  increment first, then return
console.log(x++);   // 11  return first, then increment
console.log(x);     // 12  the increment has now happened

Putting ++ before the variable, the prefix form, increases it and then gives you the new value. Putting it after, the postfix form, gives you the current value first and only then increases the variable behind the scenes. That is why the middle line prints eleven even though it contains an increment: the increase happens after the value is read. Decrement works identically with --. The difference rarely matters when the operator stands alone on its own line, but it matters a great deal inside a larger expression, so it is worth understanding rather than memorising.

Assignment operators

The single equals sign is the assignment operator: it stores the value on the right into the variable on the left. The useful extension is the family of compound assignment operators, which combine an arithmetic operation with assignment.

let x = 10;
x += 5;   // same as x = x + 5  -> 15
x *= 3;   // same as x = x * 3  -> 45

x += 5 reads as “add five to x and store the result back in x,” and the same shorthand exists for subtraction, multiplication, division, and modulo. It is purely a convenience, but it is everywhere in real code because updating a variable based on its own current value is such a common need.

Comparison operators

Comparison operators ask a question and return a boolean, either true or false. The relational ones compare size.

let x = 1;
console.log(x > 0);    // true
console.log(x >= 0);   // true
console.log(x < 0);    // false

Then there are the equality operators, and this is where JavaScript demands real care. To check whether two values are equal, you should use the strict equality operator, three equals signs, and its opposite, the strict inequality operator written as an exclamation mark and two equals.

console.log(x === 0);   // false
console.log(x !== 0);   // true

The reason for three equals signs rather than two is the most important gotcha in the whole language for beginners. JavaScript has two kinds of equality. Strict equality with === checks that the values are the same and that the types are the same.

console.log(1 === 1);     // true  same type, same value
console.log('1' === 1);   // false  different types

Loose equality with == will quietly convert one value to the other’s type before comparing, which leads to surprising results.

console.log(1 == 1);      // true
console.log('1' == 1);    // true  the string '1' is coerced to a number

That second line is the trap: the string “1” and the number 1 are treated as equal because loose equality coerces the types. This silent conversion is a frequent source of bugs, so the firm rule is to always use === and !==, and to forget == exists. If you come from Python, note that Python’s == compares value without this kind of loose type coercion, so JavaScript’s ===is the operator that behaves the way you expect.

The conditional (ternary) operator

There is one operator that chooses between two values based on a condition, and it is a compact alternative to a small if-else. It is written as a condition, a question mark, the value if true, a colon, and the value if false.

let points = 110;
let type = points > 100 ? 'gold' : 'silver';
console.log(type);   // gold

Read it as “is points greater than 100? if so, gold, otherwise silver.” This ternary operator is perfect for assigning one of two values based on a simple test, and it keeps short either-or decisions on a single readable line. For anything more complex, a full if-else statement is clearer.

Logical operators

Logical operators combine boolean values, and there are three. The logical AND, two ampersands, returns true only when both sides are true.

let highIncome = true;
let goodCredit = true;
let eligibleForLoan = highIncome && goodCredit;
console.log(eligibleForLoan);   // true

The logical OR, two vertical bars, returns true as long as at least one side is true.

let highIncome = true;
let goodCredit = false;
let eligibleForLoan = highIncome || goodCredit;
console.log(eligibleForLoan);   // true

And the NOT operator, a single exclamation mark, flips a boolean to its opposite.

let applicationRefused = !eligibleForLoan;

To use these well you need the idea of truthiness, because logical operators work on more than just literal true and false. JavaScript treats a specific short list of values as falsy: undefined, null, 0, false, the empty string, and NaN. Everything else is truthy. This unlocks one of the most useful patterns in the language, the OR-based default, where you provide a fallback for a value that might be missing.

let userColor = undefined;
let defaultColor = 'blue';
let currentColor = userColor || defaultColor;
console.log(currentColor);   // blue

Because undefined is falsy, the OR skips past it and returns the first truthy value, the default. This works thanks to short-circuiting: OR stops as soon as it finds something truthy, and AND stops as soon as it finds something falsy, which means the right-hand side is only evaluated when needed. That same short-circuiting is what makes the default-value pattern so common in real code.

A glimpse of bitwise operators

There is one more family worth knowing exists, even if you rarely use it as a beginner: bitwise operators, which work on the individual binary bits of a number.

console.log(1 | 2);   // 3  bitwise OR
console.log(1 & 2);   // 0  bitwise AND

Written in binary, 1 is 00000001 and 2 is 00000010. Bitwise OR sets a bit if it is on in either number, giving 00000011, which is 3. Bitwise AND sets a bit only if it is on in both, and since these two share no bits, the result is 0. You will not reach for these often in everyday web work, but it helps to recognise the single | and & and not confuse them with the logical || and &&.

Putting it together: a loan eligibility check

The clearest way to see operators cooperate is a small decision, the kind a program makes constantly. Here we decide whether to approve a loan and assign a customer tier, using arithmetic, comparison, logical, and ternary operators in one short block.

let income = 45000;
let creditScore = 720;
let existingDebt = 8000;
// Comparison operators produce the booleans
let highIncome = income > 40000;
let goodCredit = creditScore >= 700;
let lowDebt = existingDebt < 10000;
// Logical AND combines them: all three must hold
let eligibleForLoan = highIncome && goodCredit && lowDebt;
// The ternary turns the boolean into a readable label
let decision = eligibleForLoan ? 'Approved' : 'Declined';
// Arithmetic and modulo work out a simple reference number
let applicationId = (income + creditScore) % 1000;
console.log(decision);        // Approved
console.log(applicationId);   // 720

Every family is at work here. The comparison operators turn raw numbers into yes-or-no booleans, the logical AND insists that all three conditions hold before approving, the ternary converts that final boolean into a human-readable decision, and the arithmetic with modulo derives a small reference number. Change any input, say drop the credit score below 700, and goodCredit becomes false, the AND short-circuits to false, and the decision flips to “Declined” automatically. This is the everyday shape of program logic: measure with arithmetic, ask with comparison, combine with logical, and choose with a ternary or an if.

Conclusion

Operators are the verbs of JavaScript. Arithmetic operators do the maths, with modulo quietly powering “every nth” and even-or-odd checks. Increment and decrement add or subtract one, with a real difference between their prefix and postfix forms. Assignment operators store results, and the compound forms like += update a variable in place. Comparison operators ask questions and return booleans, and here the one rule that matters most is to always use strict equality ===and avoid the type-coercing ==. Logical operators combine conditions and, through truthiness and short-circuiting, give you the elegant OR-default pattern. Master these families and you can express any decision your program needs to make.

See you soon.