JavaScript OperatorsGet Certified

Operators are symbols or keywords that perform operations on values (operands). JavaScript provides a rich set of operators for arithmetic, assignment, comparison, logical operations, and more.

Arithmetic Operators

Arithmetic operators perform mathematical calculations.

let a = 10;
let b = 3;

console.log(a + b);  // Addition
console.log(a - b);  // Subtraction
console.log(a * b);  // Multiplication
console.log(a / b);  // Division
console.log(a % b);  // Remainder (modulo)
console.log(a ** b); // Exponentiation

Increment and Decrement

let count = 5;

console.log(count++); // Postfix: returns 5, then becomes 6
console.log(count);   // 6

console.log(++count); // Prefix: becomes 7, then returns 7
console.log(count);   // 7

console.log(count--); // Postfix: returns 7, then becomes 6
console.log(--count); // Prefix: becomes 5, then returns 5

Assignment Operators

Assignment operators assign or update the value of a variable.

let x = 10;

x += 5;  // x = x + 5
console.log(x);

x -= 3;  // x = x - 3
console.log(x);

x *= 2;  // x = x * 2
console.log(x);

x /= 4;  // x = x / 4
console.log(x);

x %= 3;  // x = x % 3
console.log(x);

Comparison Operators

Comparison operators compare two values and return a boolean (true or false).

let a = 10;
let b = "10";

console.log(a == b);   // loose equality (true)
console.log(a === b);  // strict equality (false)
console.log(a != b);   // loose inequality (false)
console.log(a !== b);  // strict inequality (true)

console.log(a > 5);
console.log(a < 20);
console.log(a >= 10);
console.log(a <= 9);

Logical Operators

Logical operators combine or invert boolean values.

let age = 25;
let hasLicense = true;

console.log(age >= 18 && hasLicense); // AND – both must be true
console.log(age < 18 || hasLicense);  // OR  – at least one true
console.log(!hasLicense);             // NOT – inverts the value

Ternary Operator

The ternary operator is a compact alternative to a simple if...else statement.

let age = 20;

let message = age >= 18 ? "Adult" : "Minor";
console.log(message);

let access = age >= 18 ? "Granted" : "Denied";
console.log(access);

Nullish Coalescing Operator (??)

The nullish coalescing operator returns the right-hand side only when the left-hand side is null or undefined.

let username = null;
let displayName = username ?? "Guest";
console.log(displayName);

let count = 0;
let finalCount = count ?? 10;
console.log(finalCount); // 0 is kept because it is not null/undefined

Optional Chaining Operator (?.)

Optional chaining lets you safely access nested properties. If any part of the chain is null or undefined, the expression short-circuits and returns undefined instead of throwing an error.

const user = {
    name: "Michael",
    address: null
};

console.log(user?.name);
console.log(user?.address?.city); // safely returns undefined
console.log(user?.contact?.email);

typeof and instanceof Operators

The typeof operator returns a value's type as a string, while instanceof checks whether an object is an instance of a specific constructor.

let name = "Michael";
let numbers = [1, 2, 3];

console.log(typeof name);
console.log(numbers instanceof Array);
console.log(numbers instanceof Object);

Operator Precedence

When an expression contains multiple operators, JavaScript follows a specific order called operator precedence.

let result = 2 + 3 * 4;
console.log(result);          // 14 (multiplication first)

let resultWithParens = (2 + 3) * 4;
console.log(resultWithParens); // 20 (parentheses force addition first)

Practical Example

Let's combine several operators together in a small practical example.

const price = 50;
const quantity = 3;
const discountCode = "";

let total = price * quantity;
let finalPrice = discountCode ? total * 0.9 : total;

console.log("Total before discount:", total);
console.log("Final price:", finalPrice);
console.log("Eligible for free shipping:", finalPrice >= 100);

Common Mistakes With Operators

• Using == instead of === and getting unexpected type coercion.
• Confusing the assignment operator = with the equality operator ==.
• Using || for default values when 0 or "" should be treated as valid values (prefer ??).
• Forgetting operator precedence and not using parentheses to clarify intent.
• Mixing up the placement of ++ and -- (prefix vs. postfix).

Best Practices for Operators

• Prefer === and !== over == and !=.
• Use ?? instead of || when 0, "", or false should be treated as valid values.
• Use parentheses to make complex expressions easier to read, even when not strictly required.
• Use optional chaining (?.) when accessing properties that might not exist.
• Keep expressions simple and split complex logic into multiple steps when needed.

Quick Summary

• Arithmetic operators perform mathematical calculations.
• Assignment operators assign or update variable values, including shorthand forms like +=.
• Comparison operators return a boolean result; === and !== avoid type coercion.
• Logical operators (&&, ||, !) combine or invert boolean values.
• The ternary operator is a shorthand for simple if...else logic.
• ?? and ?. are modern operators for handling null/undefined safely.
• Operator precedence determines the order operations run in; parentheses can override it.

Try It Yourself

Modify the values below. Try changing age and hasLicense, and experiment with different logical and comparison operators.

let age = 17;
let hasLicense = false;

let canDrive = (age >= 18) && hasLicense;

console.log("Can drive:", canDrive);

Tip: When in doubt about how an expression will evaluate, use parentheses. They cost nothing at runtime and make your intent clear to anyone reading the code later — including future you.

Understanding operators is essential before moving on to conditionals, loops, functions, and more advanced JavaScript concepts.