Operators (Arithmetic, Assignment, Comparison, Logical and Conditional)

📖 Theory

The fee that came out as '2001'

FestConnect needs to add a 1 rupee processing charge to the 200 fee. A student writes total = fee + charge where fee came from a form as the text "200". The result prints "2001", not 201.

Operators are the verbs of JavaScript: they add, compare, and decide. But what + does depends on the types it sits between. This lesson sorts the operators into five families so you can predict each one.

✏️ Formula

The five families

• Arithmetic: + - * / % compute a value. (% is remainder; + also glues strings.)
• Assignment: = stores; += -= *= update in place.
• Comparison: === !== > < >= <= ask a true/false question.
• Logical: && (and), || (or), ! (not) combine true/false answers.
• Conditional (ternary): condition ? a : b picks a if the condition is true, else b.

Comparison and logical produce booleans; arithmetic produces values; assignment stores them.

📊 At a glance

One example per family

⌨️ Practical

FestConnect fee and eligibility

const FEE = 200;
let charge = 1;
let total = FEE + charge;        // arithmetic -> 201

let year = 3;
let paid = true;
let eligible = (year >= 2) && paid;   // logical -> true

let seats = 0;
let status = seats > 0 ? "Open" : "Full";  // ternary -> "Full"

console.log(total, eligible, status);

// the trap: '5' is text, 5 is a number
console.log(5 == "5");   // true  (loose: converts first)
console.log(5 === "5");  // false (strict: type differs)

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Predict the output

What does each print? (a) "200" + 1 (b) 200 + 1 (c) 10 % 3 (d) (4 > 2) || false. Work all four out before tapping.

🧩 Quiz

You check `if (userInput === 5)` but userInput came from a form as the string "5", so the check fails. A classmate says 'just use == instead'. What is the better fix and why?

1. Convert the input to a number (Number(userInput)) and keep ===
2. Switch to == everywhere, since it ignores type
3. Use = instead of === to assign the value
4. Nothing can compare a string to a number in JavaScript

⚠️ Watch out

Operator traps

1. == vs ===: == converts types first (5 == "5" is true), === does not (5 === "5" is false). Prefer === to avoid surprises.

2. = vs ==: a single = assigns; if (x = 5) sets x to 5 and is almost never what you meant. Use === in conditions.

3. + on a string concatenates: mixing text and numbers with + glues instead of adding. Convert form values with Number(...) first.

📖 Theory

These feed the decisions next

Comparison and logical operators produce the true/false values that if, while, and for steer on in the very next lesson. year >= 2 && paid is exactly the kind of test an if will branch on to decide whether a FestConnect student may register. Master the booleans here and control structures become easy.

✅ Summary

Key takeaways

• Five families: arithmetic (+ - * / %), assignment (= +=), comparison (=== > <), logical (&& || !), conditional (a ? b : c).
• Comparison and logical operators return true/false; arithmetic returns values; assignment stores.
• Prefer === over ==: === checks value and type, == converts types first (5 == "5" is true).
• = assigns, == / === compare: never use = in a condition.
• + concatenates when a string is involved; convert form text with Number() before adding.
• Memory hook: === is strict, == is sloppy.