Stop 04 · JavaScriptTopics · 3/36

Operators

Part of the Frontend Developer Roadmap

In short

Operators are the small symbols that do the real work: adding marks, comparing ages, checking if a user is logged in. A few of them behave in ways that trip up even seniors.

Arithmetic, comparison, logical and assignment operators (`+`, `===`, `&&`, `??`, `?.`) — including JS-specific quirks like `==` vs `===` coercion. These operators are small but powerful building blocks for control flow, safe property access, defaults, comparisons, and concise data handling.

The jaadu mascot dressed as a cricket umpire raises a finger while a replay camera watches.

Think of it like this

On-field umpire vs third umpire

The on-field umpire (==) gives a quick call and bends the rules a little, converting types to make things match. The third umpire (===) checks the replay frame by frame. Same value and same type, or it's not out.

Watch it happen

Working out "10" - "4" + "2"

"10"
0
-
1
"4"
2
+
3
"2"
4

1/4JavaScript reads left to right. First up: "10" - "4".

The big ideas

What you need to know

+ also joins strings

If either side of + is a string, JavaScript joins them as text. Other maths operators like - and * convert to numbers.

Always use ===

=== compares value and type with no conversion. == converts first, which gives odd results like 0 == "" being true.

&& and || short-circuit

They stop as soon as the answer is known and return one of the actual values, not just true or false.

?? and ?. for missing data

?? gives a fallback only for null or undefined. ?. reads a property safely without crashing on null.

See it in code

Walk through the code

js
1console.log("5" + 1);    // "51" (+ joins strings)2console.log("5" - 1);    // 4    (- converts to number)3console.log(0 == "");    // true  (loose, converts types)4console.log(0 === "");   // false (strict, no conversion)5 6const discount = 0;7console.log(discount || 10);  // 10 (0 is falsy, so || skips it)8console.log(discount ?? 10);  // 0  (?? only skips null and undefined)9 10const user = null;11console.log(user?.name);      // undefined, no crash

1/4+ with a string joins text. - always converts to numbers.

Falsy values are false, 0, "", null, undefined and NaN. || treats all of them as missing, which is why ?? is safer for defaults like a 0 discount.

Save yourself the pain

Common mistakes

Oops

Writing if (age == "18") and trusting it.

Do this instead

Use ===, and convert input yourself first: Number(ageInput) === 18.

Oops

Using || for defaults when 0 or "" are valid values.

Do this instead

Use ?? so that a real 0 stays 0 instead of being replaced by the fallback.

Your mission

Predict, then run

~15 min

Quick check

What does console.log("10" - "4" + "2") print?

Go deeper

  1. 1Test `==` vs `===` on a few tricky pairs (e.g. `0 == false`, `null == undefined`). Validate your understanding by applying it in a small practical example.
  2. 2Practice the nullish coalescing (`??`) and optional chaining (`?.`) operators. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
  3. 3Default to `===`/`!==` unless you have a specific reason not to.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge