Day 3 — Operators, coercion, and logic

Hands-on

Task 1 GST calculator
  • Use const price = 850. Compute GST at 18% and the total (price + GST).
  • Use a template literal to log exactly: Price: ₹850, GST: ₹153, Total: ₹1003.
  • Repeat with price = 1234.50. Watch the console for any floating-point oddness (long decimals or === surprises). The sample script also rounds one total for comparison.
const GST_RATE = 18;

let price = 850;
let gst = (price * GST_RATE) / 100;
let total = price + gst;
console.log(`Price: ₹${price}, GST: ₹${gst}, Total: ₹${total}`);

price = 1234.50;
gst = (price * GST_RATE) / 100;
total = price + gst;
console.log(`Price: ₹${price}, GST: ₹${gst}, Total: ₹${total}`);
console.log(
  "Rounded total:",
  Math.round((price + (price * GST_RATE) / 100) * 100) / 100
);
console.log("0.1 + 0.2 === 0.3 ?", 0.1 + 0.2 === 0.3, "(value:", 0.1 + 0.2, ")");

Reference: ../js/hands-on.js (loaded below).

Task 2 == vs ===
  • Compare each pair with both == and ===. Predict before you run:
    • 5 and "5"
    • 0 and false
    • null and undefined
    • "" and false
    • "abc" and "abc"
  • For each surprising result, add a comment explaining the coercion (see reference script).
// Task 2 — == vs === (predict each result before running)
// 5 vs "5" — == coerces string to number; === forbids mixed types
console.log(5 == "5", 5 === "5");

// 0 vs false — == coerces boolean to number (false → 0)
console.log(0 == false, 0 === false);

// null vs undefined — == treats them as "same absence"; === keeps types apart
console.log(null == undefined, null === undefined);

// "" vs false — ==: both coerce toward falsy/0; === different types
console.log("" == false, "" === false);

// "abc" vs "abc" — same string: both true (no coercion needed)
console.log("abc" == "abc", "abc" === "abc");

Reference: ../js/hands-on.js.

Task 3 Logical operators
  • const age = 22, const hasEmail = true. Build canRegister with &&true only if age ≥ 18 and has email.
  • const userName = "" (empty string). Use || to default display name to "Guest".
  • Use !: const isLoggedIn = false; then const isLoggedOut = !isLoggedIn.
  • Log all three results.
const age = 22;
const hasEmail = true;
const canRegister = age >= 18 && hasEmail;

const userName = "";
const displayName = userName || "Guest";

const isLoggedIn = false;
const isLoggedOut = !isLoggedIn;

console.log("canRegister:", canRegister);
console.log("displayName:", displayName);
console.log("isLoggedOut:", isLoggedOut);

Reference: ../js/hands-on.js.

Bonus Ternary practice
  • const fee = age >= 65 ? 0 : 100 — try mentally with age 70 and age 30 (reference uses two explicit expressions).
  • Inside a template literal: `Discount: ${age >= 65 ? "Yes" : "No"}` (try with 70 and 30).
  • Write a ternary chain for "high", "medium", or "low" from a score variable (nested ternary — keep it readable).
const feeAt70 = 70 >= 65 ? 0 : 100;
const feeAt30 = 30 >= 65 ? 0 : 100;
console.log("fee (age 70):", feeAt70);
console.log("fee (age 30):", feeAt30);

console.log(`Discount: ${70 >= 65 ? "Yes" : "No"}`);
console.log(`Discount: ${30 >= 65 ? "Yes" : "No"}`);

const score = 67;
const level =
  score >= 80 ? "high" : score >= 50 ? "medium" : "low";
console.log("score", score, "→", level);

Reference: ../js/hands-on.js.