R
Rishtaara
JavaScript Fundamentals
Lesson 3 of 28Article17 min

Operators — Arithmetic to Optional Chaining

Use +, -, *, /, and % (remainder) for math. + also joins strings: "Hello" + " World".

Arithmetic Operators

Use +, -, *, /, and % (remainder) for math. + also joins strings: "Hello" + " World".

Real-life example: Arithmetic is like a shop calculator — add prices, subtract discount, multiply quantity, divide among friends.

Math and string join
let a = 10, b = 3;
console.log(a + b);  // 13
console.log(a % b);  // 1 (remainder)
console.log("Score: " + 100); // "Score: 100"

Assignment Operators

Assignment puts a value into a variable: =. Shorthand like +=, -=, *= saves typing.

Real-life example: += is like adding more rice to a pot — the pot still holds rice, just more than before.

Assignment shortcuts
let x = 5;
x += 3;  // same as x = x + 3 → 8
x *= 2;  // 16
x -= 4;  // 12

Comparison Operators

Comparisons return true or false: == loose equal, === strict equal (prefer this), !=, !==, >, <, >=, <=.

Always use === and !== so type and value both match. "5" === 5 is false.

Real-life example: === is checking both item name and weight at the shop. == only glances and sometimes guesses wrong.

Strict vs loose equality
5 == "5"   // true (loose — avoid)
5 === "5"  // false (strict — use this)
5 === 5    // true

Logical Operators

&& (AND) needs both true. || (OR) needs at least one true. ! (NOT) flips true to false.

Real-life example: To enter a cinema — you need a ticket AND an ID (&&). To get a discount — student OR senior (||).

AND, OR, NOT
const hasTicket = true;
const hasId = false;

console.log(hasTicket && hasId); // false
console.log(hasTicket || hasId); // true
console.log(!hasTicket);         // false

Ternary Operator

condition ? valueIfTrue : valueIfFalse — a short if/else in one line.

Real-life example: At a tea stall — "chai or coffee?" one question, one answer path.

Ternary example
const age = 20;
const label = age >= 18 ? "Adult" : "Minor";
console.log(label); // "Adult"

typeof Operator

typeof returns a string telling the type of a value. Useful while learning and debugging.

Real-life example: typeof is like checking a parcel label before opening — is it books or clothes?

typeof checks
typeof "hello"  // "string"
typeof 0        // "number"
typeof NaN      // "number" (NaN is still a number type)

Nullish Coalescing (??)

?? returns the right side only when the left is null or undefined — not for 0 or "".

Real-life example: If your nickname is not set (null), use your real name. If nickname is "" (empty string on purpose), keep it.

?? vs ||
const count = 0;
console.log(count || 10);  // 10 — wrong if 0 is valid
console.log(count ?? 10);  // 0 — correct

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

Optional Chaining (?.)

?. safely reads nested properties. If something in the chain is null or undefined, it stops and returns undefined instead of crashing.

Real-life example: Asking for a friend's friend's phone — if your friend is missing, you stop politely instead of shouting at empty air.

?? and ?. are modern ES2020 tools. They make code safer when data might be missing — common in API responses.
Safe property access
const user = { profile: { city: "Delhi" } };
console.log(user.profile?.city);    // "Delhi"
console.log(user.address?.city);    // undefined (no crash)

const list = null;
console.log(list?.length);          // undefined