codingstuff.io
ExploreTutorialsProblemsCS Subjects
Get Started
ExploreTutorialsProblemsCS Subjects
Get Started
codingstuff.io

Master the art of building software through interactive tutorials, real-world problems, and guided projects.

Pune, Maharashtra, India

codingstuffmail@gmail.com

Product

  • Explore
  • Tutorials
  • Problems
  • CS Subjects

Company

  • About
  • Contact
  • Privacy Policy
  • Terms & Conditions
  • Sitemap

© 2026 codingstuff.io. All rights reserved.

Built with ❤️ for developers everywhere

/
/
All Tutorials
🌐

JavaScript

7 / 65 topics
1JavaScript Introduction2JavaScript console.log() & Output3JavaScript Syntax & Statements4JavaScript Comments5JavaScript Variables (var, let, const)6JavaScript Data Types7JavaScript Operators8JavaScript Type Conversion
Tutorials/JavaScript/Operators
🌐JavaScript

Operators

Updated 2026-05-04
7 min

Operators

Operators perform operations on values. JavaScript has a rich set of operators for math, comparison, logic, and more. Mastering them is essential for writing any meaningful code.

Arithmetic Operators

arithmetic.js
1let a = 10, b = 3;
2
3console.log(a + b); // 13 (addition)
4console.log(a - b); // 7 (subtraction)
5console.log(a * b); // 30 (multiplication)
6console.log(a / b); // 3.333... (division)
7console.log(a % b); // 1 (modulus - remainder)
8console.log(a ** b); // 1000 (exponentiation - 10³)
9
10// Increment / Decrement
11let x = 5;
12console.log(x++); // 5 (returns, THEN increments)
13console.log(x); // 6
14console.log(++x); // 7 (increments, THEN returns)
15console.log(x--); // 7 (returns, THEN decrements)
16console.log(x); // 6
OperatorNameExampleResult
+Addition5 + 38
-Subtraction5 - 32
*Multiplication5 * 315
/Division10 / 33.33...
%Modulus10 % 31
**Exponentiation2 ** 38

Modulus Use Cases

The % operator is great for checking even/odd (n % 2 === 0), wrapping values (index % array.length), and cycling through options.

Assignment Operators

assignment.js
1let x = 10;
2
3x += 5; // x = x + 5 → 15
4x -= 3; // x = x - 3 → 12
5x *= 2; // x = x * 2 → 24
6x /= 4; // x = x / 4 → 6
7x %= 4; // x = x % 4 → 2
8x **= 3; // x = x ** 3 → 8
9
10console.log(x); // 8

Comparison Operators

comparison.js
1console.log(5 > 3); // true
2console.log(5 < 3); // false
3console.log(5 >= 5); // true
4console.log(5 <= 4); // false
5
6// Equality
7console.log(5 == "5"); // true (loose - coerces types)
8console.log(5 === "5"); // false (strict - no coercion)
9console.log(5 != "5"); // false (loose not-equal)
10console.log(5 !== "5"); // true (strict not-equal)

Always Use === and !==

Strict equality prevents type coercion bugs. Use === and !== by default.

Logical Operators

logical.js
1// AND (&&) - both must be true
2console.log(true && true); // true
3console.log(true && false); // false
4
5// OR (||) - at least one must be true
6console.log(false || true); // true
7console.log(false || false); // false
8
9// NOT (!) - inverts the value
10console.log(!true); // false
11console.log(!false); // true
12console.log(!0); // true (0 is falsy)
13console.log(!""); // true ("" is falsy)
14
15// Double NOT (!!) converts to boolean
16console.log(!!"hello"); // true
17console.log(!!0); // false

Short-Circuit Evaluation

Logical operators don't always evaluate both sides:

short-circuit.js
1// && returns the first falsy value, or the last value
2console.log("hello" && 42); // 42 (both truthy, returns last)
3console.log(0 && "hello"); // 0 (first is falsy, returns it)
4console.log("a" && "b" && "c"); // "c"
5
6// || returns the first truthy value, or the last value
7console.log("" || "default"); // "default"
8console.log(null || undefined || 0); // 0 (all falsy, returns last)
9
10// Practical: default values
11const username = userInput || "Guest";
12
13// ?? (Nullish coalescing) - only checks null/undefined
14const count = 0;
15console.log(count || 10); // 10 (0 is falsy)
16console.log(count ?? 10); // 0 (0 is NOT null/undefined)

|| vs ??

Use ?? instead of || when 0, "", or false are valid values. || treats all falsy values as "missing", while ?? only treats null and undefined as "missing".

Ternary Operator

A shorthand for if/else:

ternary.js
1const age = 20;
2const status = age >= 18 ? "Adult" : "Minor";
3console.log(status); // "Adult"
4
5// Nested (avoid for readability)
6const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

String Operators

string-ops.js
1// Concatenation with +
2const first = "Hello";
3const second = "World";
4console.log(first + " " + second); // "Hello World"
5
6// Template literal (preferred)
7console.log(`${first} ${second}`); // "Hello World"
8
9// += for appending
10let message = "Hello";
11message += " World";
12console.log(message); // "Hello World"

Optional Chaining (?.)

Safely access nested properties without crashing:

optional-chaining.js
1const user = {
2name: "Alice",
3address: { city: "NYC" }
4};
5
6console.log(user.address.city); // "NYC"
7console.log(user.phone?.number); // undefined (no error!)
8// Without ?.: user.phone.number → TypeError!
9
10// Works with methods too
11console.log(user.greet?.()); // undefined
12console.log([1,2,3]?.[5]); // undefined

Spread and Rest Operators

spread-rest.js
1// Spread (...) - expands arrays/objects
2const nums = [1, 2, 3];
3const more = [...nums, 4, 5]; // [1, 2, 3, 4, 5]
4
5const obj = { a: 1, b: 2 };
6const extended = { ...obj, c: 3 }; // { a: 1, b: 2, c: 3 }
7
8// Rest (...) - collects remaining arguments
9function sum(...numbers) {
10return numbers.reduce((total, n) => total + n, 0);
11}
12console.log(sum(1, 2, 3, 4)); // 10

Practical Example: Discount Calculator

discount.js
1function calculatePrice(price, discount = 0, taxRate = 0.08) {
2const discountAmount = price * (discount / 100);
3const subtotal = price - discountAmount;
4const tax = subtotal * taxRate;
5const total = subtotal + tax;
6
7return {
8 original: price,
9 discount: discountAmount,
10 tax: tax.toFixed(2),
11 total: total.toFixed(2),
12 saved: discountAmount > 0 ? `You saved $${discountAmount.toFixed(2)}!` : null,
13};
14}
15
16const result = calculatePrice(100, 20);
17console.log(result);
18// { original: 100, discount: 20, tax: "6.40", total: "86.40", saved: "You saved $20.00!" }

What's Next?

With operators mastered, let's dive deep into strings and string methods - one of the most commonly used data types in any application.


PreviousJavaScript Data TypesNext JavaScript Type Conversion

Recommended Gear

JavaScript Data TypesJavaScript Type Conversion