JavaScript Operators Arithmetic, Logical, Comparison: Tutorial, Examples, FAQs & Interview Tips

JavaScript Operators

Operators are symbols or keywords that perform operations on values. The values used with operators are called operands. For example, in 10 + 5, the + symbol is the operator, and 10 and 5 are operands.

JavaScript operators are used for arithmetic, assignment, comparison, logic, strings, objects, arrays, type checking, and more. Understanding them is essential before learning conditions, loops, functions, and DOM programming.

Arithmetic Operators

Arithmetic operators perform mathematical calculations on numbers. JavaScript also uses + for string concatenation, so the result depends on the operand types.

Operator	Name	Example	Result
`+`	Addition	`10 + 3`	`13`
`-`	Subtraction	`10 - 3`	`7`
`*`	Multiplication	`10 * 3`	`30`
`/`	Division	`10 / 3`	`3.333...`
`%`	Remainder	`10 % 3`	`1`
`**`	Exponentiation	`2 ** 3`	`8`
`++`	Increment	`x++`	Adds 1
`--`	Decrement	`x--`	Subtracts 1

Arithmetic Operators

let a = 10;
let b = 3;

console.log(a + b);  // 13
console.log(a - b);  // 7
console.log(a * b);  // 30
console.log(a / b);  // 3.3333333333333335
console.log(a % b);  // 1
console.log(a ** b); // 1000

let count = 5;
count++;
console.log(count); // 6

count--;
console.log(count); // 5

Prefix and Postfix Increment

The increment and decrement operators can be used before or after a variable. Prefix form updates first and then returns the new value. Postfix form returns the old value first and then updates.

Prefix vs Postfix

let x = 5;

console.log(++x); // 6: increase first, then use value
console.log(x);   // 6

let y = 5;

console.log(y++); // 5: use value first, then increase
console.log(y);   // 6

Assignment Operators

Assignment operators store values in variables. Compound assignment operators update a variable using its current value.

Operator	Meaning	Same As
`=`	Assign	`x = 10`
`+=`	Add and assign	`x = x + 5`
`-=`	Subtract and assign	`x = x - 5`
`*=`	Multiply and assign	`x = x * 5`
`/=`	Divide and assign	`x = x / 5`
`%=`	Remainder and assign	`x = x % 5`
`**=`	Power and assign	`x = x ** 2`

Assignment Operators

let total = 10;

total += 5;  // 15
total -= 3;  // 12
total *= 2;  // 24
total /= 4;  // 6
total %= 4;  // 2
total **= 3; // 8

console.log(total);

Comparison Operators

Comparison operators compare two values and return a boolean result: true or false. They are commonly used in if statements, loops, filters, and validations.

Operator	Name	Example	Result
`==`	Loose equality	`5 == "5"`	`true`
`===`	Strict equality	`5 === "5"`	`false`
`!=`	Loose not equal	`5 != "5"`	`false`
`!==`	Strict not equal	`5 !== "5"`	`true`
`>`	Greater than	`10 > 5`	`true`
`>=`	Greater than or equal	`10 >= 10`	`true`
`<`	Less than	`3 < 5`	`true`
`<=`	Less than or equal	`3 <= 2`	`false`

Strict vs Loose Equality

console.log(5 == "5");   // true: JavaScript converts the string to number
console.log(5 === "5");  // false: number and string are different types

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

console.log(10 > 5);      // true
console.log(10 >= 10);    // true
console.log(3 < 2);       // false

Logical Operators

Logical operators combine or reverse boolean expressions. JavaScript also uses short-circuit evaluation, which means it may stop evaluating as soon as the final result is known.

Operator	Name	Returns true when
`&&`	Logical AND	Both values are truthy
`\|\|`	Logical OR	At least one value is truthy
`!`	Logical NOT	Reverses truthiness

Logical Operators and Short-Circuiting

const isLoggedIn = true;
const isAdmin = false;

console.log(isLoggedIn && isAdmin); // false
console.log(isLoggedIn || isAdmin); // true
console.log(!isLoggedIn);           // false

// Short-circuit example
isLoggedIn && console.log("Welcome back!");

const username = "";
const displayName = username || "Guest";
console.log(displayName); // Guest

Truthy and Falsy Values

Logical operators depend on truthiness. A value does not need to be exactly true or false; JavaScript can treat it as truthy or falsy in boolean contexts.

Falsy Values	Truthy Values
`false`	Non-empty strings such as `"hello"`
`0`, `-0`, `0n`	Non-zero numbers such as `10`
`""`	Arrays, even empty arrays `[]`
`null`	Objects, even empty objects `{}`
`undefined`	Functions
`NaN`	Dates, maps, sets, and most created values

String Operators

The + operator joins strings when at least one operand is a string. This is called concatenation. Modern JavaScript often uses template literals because they are easier to read.

String Concatenation

const firstName = "Ada";
const lastName = "Lovelace";

console.log(firstName + " " + lastName); // Ada Lovelace

let message = "Hello";
message += ", JavaScript!";
console.log(message); // Hello, JavaScript!

const age = 28;
console.log("Age: " + age); // Age: 28
console.log(`Age: ${age}`); // Age: 28

Ternary Operator

The ternary operator is a short form of an if...else expression. It is useful when choosing between two values.

Ternary Operator

const age = 19;

const status = age >= 18 ? "Adult" : "Minor";
console.log(status); // Adult

const score = 72;
const result = score >= 40 ? "Pass" : "Fail";
console.log(result); // Pass

Nullish Coalescing Operator

The nullish coalescing operator ?? returns the right-side value only when the left-side value is null or undefined. It is safer than || when values like 0, false, or an empty string are valid.

Nullish Coalescing

const savedVolume = 0;

const volumeWithOr = savedVolume || 50;
console.log(volumeWithOr); // 50: not what we wanted

const volumeWithNullish = savedVolume ?? 50;
console.log(volumeWithNullish); // 0: correct

const username = null;
console.log(username ?? "Guest"); // Guest

Optional Chaining Operator

The optional chaining operator ?. safely accesses nested properties or methods. If the value before ?. is null or undefined, JavaScript returns undefined instead of throwing an error.

Optional Chaining

const user = {
    name: "Maya",
    profile: {
        email: "maya@example.com"
    }
};

console.log(user.profile?.email);   // maya@example.com
console.log(user.address?.city);    // undefined

const onSave = null;
onSave?.(); // no error

Logical Assignment Operators

Logical assignment operators combine logical checks with assignment. They are useful for setting defaults or updating values only under specific conditions.

Operator	Assigns when	Example
`\|\|=`	Current value is falsy	`x \|\|= 10`
`&&=`	Current value is truthy	`x &&= 10`
`??=`	Current value is `null` or `undefined`	`x ??= 10`

Logical Assignment

let title = "";
title ||= "Untitled";
console.log(title); // Untitled

let token = "abc123";
token &&= "hidden";
console.log(token); // hidden

let limit = 0;
limit ??= 10;
console.log(limit); // 0

Spread and Rest Operators

The ... syntax can be used as spread or rest depending on where it appears. Spread expands values. Rest collects values.

Spread and Rest

// Spread: expands an array
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // [1, 2, 3, 4, 5]

// Spread: copies object properties
const user = { name: "Asha", role: "student" };
const updatedUser = { ...user, active: true };
console.log(updatedUser);

// Rest: collects remaining function arguments
function sum(...values) {
    return values.reduce((total, value) => total + value, 0);
}

console.log(sum(10, 20, 30)); // 60

Destructuring Assignment

Destructuring is a special assignment syntax that extracts values from arrays or objects into variables.

Destructuring Assignment

const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;

console.log(firstColor);  // red
console.log(secondColor); // green

const product = {
    name: "Laptop",
    price: 65000
};

const { name, price } = product;
console.log(name);  // Laptop
console.log(price); // 65000

Type Operators

JavaScript provides operators for checking types and object relationships. The most common are typeof, instanceof, in, and delete.

Operator	Purpose	Example
`typeof`	Returns the type as a string	`typeof 42`
`instanceof`	Checks object prototype relationship	`[] instanceof Array`
`in`	Checks whether a property exists	`"name" in user`
`delete`	Deletes an object property	`delete user.age`

Type and Object Operators

console.log(typeof "hello"); // string
console.log(typeof 42);      // number
console.log(typeof null);    // object: historical JavaScript behavior

console.log([] instanceof Array); // true

const user = { name: "Riya", age: 22 };
console.log("name" in user); // true

delete user.age;
console.log(user); // { name: "Riya" }

Bitwise Operators

Bitwise operators work on 32-bit integer representations of numbers. They are less common in everyday web development but useful in flags, permissions, low-level algorithms, and performance-sensitive logic.

Operator	Name	Example
`&`	Bitwise AND	`5 & 1`
`\|`	Bitwise OR	`5 \| 1`
`^`	Bitwise XOR	`5 ^ 1`
`~`	Bitwise NOT	`~5`
`<<`	Left shift	`5 << 1`
`>>`	Signed right shift	`5 >> 1`
`>>>`	Unsigned right shift	`5 >>> 1`

Operator Precedence

Operator precedence decides which operation runs first. Multiplication runs before addition, comparisons run before logical operators, and parentheses can be used to make the order clear.

Precedence Examples

console.log(2 + 3 * 4);     // 14
console.log((2 + 3) * 4);   // 20

const age = 20;
const hasId = true;

const canEnter = age >= 18 && hasId;
console.log(canEnter); // true

Complete Practice Example

This example combines arithmetic, comparison, logical, ternary, nullish coalescing, optional chaining, and assignment operators in a simple shopping cart calculation.

Shopping Cart Operators Example

const cart = {
    item: "Keyboard",
    price: 1200,
    quantity: 2,
    coupon: null,
    customer: {
        name: "Neha",
        isMember: true
    }
};

let subtotal = cart.price * cart.quantity;
const discount = cart.coupon ?? 0;

subtotal -= discount;

const deliveryCharge = subtotal >= 2000 ? 0 : 100;
const memberBonus = cart.customer?.isMember && subtotal > 1000;

const total = subtotal + deliveryCharge;

console.log(`Customer: ${cart.customer?.name ?? "Guest"}`);
console.log(`Item: ${cart.item}`);
console.log(`Subtotal: ${subtotal}`);
console.log(`Delivery: ${deliveryCharge}`);
console.log(`Member bonus: ${memberBonus}`);
console.log(`Total: ${total}`);

Common Mistakes

Using = instead of === inside a condition.
Using == when strict equality === is safer and clearer.
Using || for defaults when 0, false, or "" should be preserved.
Forgetting that + concatenates strings when one operand is a string.
Writing complex expressions without parentheses, making the code hard to read.
Confusing prefix increment ++x with postfix increment x++.

Frequently Asked Questions

What are operators in JavaScript?

Operators are symbols or keywords that perform operations on values, such as arithmetic, comparison, assignment, logical checks, and type checks.

What is the difference between == and === in JavaScript?

== compares values after type conversion, while === compares both value and type. In most code, prefer ===.

What is the difference between || and ??

|| falls back for any falsy value, including 0 and empty strings. ?? falls back only for null or undefined.

What does optional chaining do?

Optional chaining ?. safely accesses nested properties or methods and returns undefined if a parent value is null or undefined.

When should I use the ternary operator?

Use the ternary operator for simple two-choice expressions. For complex logic, an if...else block is easier to read.

Key Takeaways

Operators perform actions on operands, such as adding, comparing, assigning, or checking values.
Prefer strict equality === and strict inequality !== to avoid type coercion surprises.
Use ?? when only null or undefined should trigger a default value.
Use ?. to safely access nested properties without throwing errors.
Use parentheses to make complex operator precedence clear.
Remember that + can add numbers or concatenate strings depending on operand types.

JavaScript Operators Arithmetic, Logical, Comparison: Tutorial, Examples, FAQs & Interview Tips