JavaScript, properly understood.

let x = 10;    // number
x = "Hello";   // now a string — perfectly legal
console.log(typeof x); // "string"

let a = 1;
let b = a;   // copy of the value
b++;
console.log(a); // 1

const o1 = { n: 1 };
const o2 = o1;  // copy of the reference
o2.n++;
console.log(o1.n); // 2 — same object

function scopes() {
  if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
  }
  console.log(a); // 1  — var ignores the block
  console.log(b); // ReferenceError: b is not defined
}

console.log(x); // undefined — declaration hoisted, value not
var x = 5;

hoisted(); // works: function declarations are hoisted with their body
function hoisted() {
  console.log("I am hoisted");
}

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 5;

let x = 10;
{
  let x = 20;     // a different variable
  console.log(x); // 20
}
console.log(x);   // 10 — block scope keeps them apart

let a = 1;
{
  var a = 2; // SyntaxError: Identifier 'a' has already been declared
}

1 == "1";            // true  ("1" → 1)
0 == false;          // true  (false → 0)
"" == 0;             // true  ("" → 0)
null == undefined;   // true  (special rule)
null == 0;           // false (null only == undefined)

1 === "1";           // false — different types
0 === false;         // false
null === undefined;  // false

NaN === NaN;               // false — NaN is not equal to anything
Number.isNaN(NaN);         // true
Object.is(NaN, NaN);       // true
Object.is(0, -0);          // false (=== says true)
[] == ![];                 // true 🙃  ![] → false → 0, [] → "" → 0

false, 0, -0, 0n, "", null, undefined, NaN

const user = { name: "Alice", address: { city: "Wonderland" } };

// Old way
const city1 = user && user.address && user.address.city;

// With optional chaining
const city2 = user?.address?.city;      // "Wonderland"
const zip = user?.address?.zip?.code;   // undefined, no error

const key = "city";
user.address?.[key];        // dynamic property
user.greet?.();             // call only if greet exists
callbacks.onDone?.(result); // common for optional callbacks

const count = 0;
count || 10;  // 10  — 0 is falsy, oops
count ?? 10;  // 0   — 0 is a real value, keep it

const input = null;
const finalInput = input ?? "Default Value"; // "Default Value"

config.retries ??= 3;    // assign only if null/undefined
user.name ||= "Guest";   // assign if falsy
cache.hits &&= cache.hits + 1; // assign only if truthy

function foo() {
  x = 1; // sloppy mode: creates global x. Strict mode: ReferenceError
}
foo();
console.log(x); // 1

Number.isInteger(5);      // true
Number.isInteger(5.0);    // true — 5.0 is the same number as 5
Number.isInteger(5.5);    // false
Number.isInteger("5");    // false — no coercion
Number.isInteger(Infinity); // false (but Infinity % 1 is NaN, so the % trick is also fine)

const isFloat = (n) => Number.isFinite(n) && !Number.isInteger(n);

0.1 + 0.2 === 0.3;                 // false (0.30000000000000004)
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON; // true — compare with a tolerance
Number.MAX_SAFE_INTEGER;           // 9007199254740991 (2^53 - 1)
2 ** 53 === 2 ** 53 + 1;           // true! use BigInt beyond this
9007199254740993n + 1n;            // 9007199254740994n
parseInt("08px");                  // 8 — parses until it can't
Number("08px");                    // NaN — all or nothing

"5" + 3;        // "53"   + with a string concatenates
"5" - 3;        // 2      other maths operators convert to number
"5" * "2";      // 10
true + 1;       // 2
[] + [];        // ""
[] + {};        // "[object Object]"
+"";            // 0
+"  42  ";      // 42
+"4 2";         // NaN
String(null);   // "null"
Number(null);   // 0
Number(undefined); // NaN

const square = (n) => n * n;          // implicit return
const makeUser = (name) => ({ name }); // wrap object literals in ( )

const name = "global";

function outer() {
  const name = "outer";
  function inner() {
    console.log(name); // "outer" — looks up the chain where inner was *written*
  }
  return inner;
}

function caller() {
  const name = "caller";
  outer()(); // still "outer", not "caller"
}
caller();

function makeCounter() {
  let count = 0; // private — nothing outside can touch it

  return {
    increment: () => ++count,
    decrement: () => --count,
    get value() {
      return count;
    },
  };
}

const counter = makeCounter();
counter.increment();
counter.increment();
console.log(counter.value); // 2
console.log(counter.count); // undefined — truly private

(function () {
  let a = 10;
  console.log(a); // 10
})();

console.log(a); // ReferenceError: a is not defined

// Arrow and async versions
(() => { /* ... */ })();
(async () => {
  const data = await fetch("/api").then((r) => r.json());
})();

const BankModule = (function () {
  let balance = 0; // private

  function log(msg) { // private helper
    console.log(`[bank] ${msg}`);
  }

  return {
    deposit(amount) {
      balance += amount;
      log(`deposited ${amount}`);
    },
    getBalance() {
      return balance;
    },
  };
})();

BankModule.deposit(100);
BankModule.getBalance(); // 100
BankModule.balance;      // undefined

const user = {
  name: "Rohit",
  regular() {
    return this.name;
  },
  arrow: () => this?.name, // `this` of the module/global scope, not user
};

user.regular();        // "Rohit"   (implicit)
user.arrow();          // undefined (lexical)

const fn = user.regular;
fn();                  // undefined / TypeError — lost its object (default binding)
fn.call({ name: "X" }); // "X" (explicit)

const timer = {
  seconds: 0,
  start() {
    // Old way: const self = this; function () { self.seconds++ }
    setInterval(() => {
      this.seconds++; // `this` is timer, inherited from start()
    }, 1000);
  },
};
timer.start();

const counter = {
  count: 0,
  inc: () => this.count++, // ❌ `this` is not counter
};

button.addEventListener("click", function () {
  this.classList.toggle("on"); // ✅ `this` is the button
});
button.addEventListener("click", () => {
  this.classList.toggle("on"); // ❌ `this` is the outer scope
});

function introduce(greeting, punctuation) {
  return `${greeting}, I'm ${this.name}${punctuation}`;
}
const rohit = { name: "Rohit" };

introduce.call(rohit, "Hi", "!");      // "Hi, I'm Rohit!"
introduce.apply(rohit, ["Hello", "."]); // "Hello, I'm Rohit."

const sayHi = introduce.bind(rohit, "Hey");
sayHi("?");                             // "Hey, I'm Rohit?"

const person1 = {
  firstName: "John",
  lastName: "Doe",
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};
const person2 = { firstName: "Jane", lastName: "Smith" };

person1.fullName.call(person2); // "Jane Smith"

// 1. A generic function shared by many objects
function calculateArea() {
  return this.length * this.width;
}
calculateArea.call({ length: 10, width: 5 }); // 50
calculateArea.call({ length: 7, width: 3 });  // 21

// 2. Array methods on array-like objects (arguments, NodeList)
function oldSchool() {
  return Array.prototype.slice.call(arguments); // today: Array.from(arguments) or [...arguments]
}

// 3. A reliable type check
Object.prototype.toString.call([]);   // "[object Array]"
Object.prototype.toString.call(null); // "[object Null]"

const nums = [5, 1, 9, 3];
Math.max.apply(null, nums); // 9
Math.max(...nums);          // 9 — spread does the same today

const arr1 = [1, 2];
const arr2 = [3, 4];
Array.prototype.push.apply(arr1, arr2); // same as arr1.push(...arr2)

// 1. Keeping `this` for callbacks
class Clock {
  constructor() {
    this.ticks = 0;
    this.tick = this.tick.bind(this); // bind once in the constructor
  }
  tick() {
    this.ticks++;
  }
  start() {
    setInterval(this.tick, 1000); // safe to pass around
  }
}

// 2. Partial application — pre-fill arguments
function log(level, message) {
  console.log(`[${level}] ${message}`);
}
const warn = log.bind(null, "WARN");
warn("Disk almost full"); // [WARN] Disk almost full

// 3. Event handlers that need the component instance
button.addEventListener("click", this.handleClick.bind(this));

function greet(name) {
  return function (message) {
    console.log(`${message}, ${name}`);
  };
}

const greetAlice = greet("Alice");
greetAlice("Hello");   // Hello, Alice
greetAlice("Goodbye"); // Goodbye, Alice

// Takes a function
function repeat(n, action) {
  for (let i = 0; i < n; i++) action(i);
}
repeat(3, console.log); // 0 1 2

function add(a) {
  return function (b) {
    return a + b;
  };
}

const addFive = add(5);
addFive(3);  // 8
add(2)(3);   // 5

const addArrow = (a) => (b) => a + b; // same thing

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return (...more) => curried.apply(this, [...args, ...more]);
  };
}

const volume = curry((l, w, h) => l * w * h);
volume(2)(3)(4);   // 24
volume(2, 3)(4);   // 24
volume(2)(3, 4);   // 24

const add1 = (n) => n + 1;
const double = (n) => n * 2;
const subtract10 = (n) => n - 10;

const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);

compose(subtract10, double, add1)(3); // (3 + 1) * 2 - 10 = -2
pipe(add1, double, subtract10)(3);    // same: -2

// Rest: gather arguments
function sum(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3, 4); // 10

function tag(first, ...others) {} // rest must be the last parameter

// Spread: expand
const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];          // [1, 2, 3, 4]
const copy = [...a];                    // shallow copy
const chars = [..."hey"];               // ["h", "e", "y"]
const merged = { ...defaults, ...options }; // later keys win
Math.max(...combined);                  // 4

// Arrays — by position
const [first, second, ...rest] = [10, 20, 30, 40];
const [, , third] = [1, 2, 3];        // skip items
let x = 1, y = 2;
[x, y] = [y, x];                      // swap without a temp variable

// Objects — by name
const user = { id: 7, name: "Rohit", address: { city: "Toronto" } };
const { name, age = 30 } = user;           // default when undefined
const { name: userName } = user;           // rename
const { address: { city } } = user;        // nested
const { id, ...withoutId } = user;         // rest of the properties

// In parameters — very common in React
function render({ title, items = [] }) {
  return `${title}: ${items.length}`;
}
render({ title: "Todos" });

// 1. Object literal — the everyday way
const person = { firstName: "John", lastName: "Doe", age: 50 };

// 2. Object constructor — same result, more typing
const p2 = new Object();
p2.firstName = "John";

// 3. Object.create — choose the prototype explicitly
const personProto = {
  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age}.`);
  },
};
const p3 = Object.create(personProto);
p3.name = "John";
p3.age = 30;
p3.greet(); // Hello, my name is John and I'm 30.

// 4. Constructor function + new
function Person(name) {
  this.name = name;
}
const p4 = new Person("Alice");

// 5. ES2015 class (sugar over 4)
class PersonClass {
  constructor(name) {
    this.name = name;
  }
}

// 6. Factory function — no `new`, no `this`
const createPerson = (name) => ({ name, greet: () => `Hi ${name}` });

const obj = {
  // 1. Method shorthand — has its own `this`, can use `super`
  greet() {
    return `Hi ${this.name}`;
  },
  // 2. Property holding a function
  greet2: function () {
    return `Hi ${this.name}`;
  },
  // (an arrow function here would NOT get `this` — see the `this` chapter)
  name: "Rohit",
};

const field = "email";
const id = 3;

const form = {
  [field]: "a@b.com",          // email: "a@b.com"
  [`item_${id}`]: true,        // item_3: true
  [Symbol.iterator]: function* () {}, // symbol keys must use brackets
};

// Handy for updating state by input name
const update = (state, e) => ({ ...state, [e.target.name]: e.target.value });

function Person(name) {
  this.name = name; // own property — one per instance
}
Person.prototype.greet = function () { // shared — one copy for all instances
  console.log("Hello, " + this.name);
};

const alice = new Person("Alice");
alice.greet();                  // found on Person.prototype
alice.toString();               // found on Object.prototype
alice.fly;                      // undefined — reached null

Object.getPrototypeOf(alice) === Person.prototype;      // true
Object.getPrototypeOf(Person.prototype) === Object.prototype; // true
Object.getPrototypeOf(Object.prototype);                // null

function Bad(name) {
  this.name = name;
  this.greet = function () {}; // new function per instance ❌
}
function Good(name) {
  this.name = name;
}
Good.prototype.greet = function () {}; // shared ✅

new Bad("a").greet === new Bad("b").greet;   // false
new Good("a").greet === new Good("b").greet; // true

function Dog() {}
const rex = new Dog();

rex.__proto__ === Dog.prototype;        // true
Dog.prototype.constructor === Dog;      // true
Dog.__proto__ === Function.prototype;   // true — Dog is itself a function object
rex.prototype;                          // undefined — instances don't have one

function myNew(Constructor, ...args) {
  // 1. Create an empty object linked to Constructor.prototype
  const obj = Object.create(Constructor.prototype);
  // 2. Run the constructor with `this` = the new object
  const result = Constructor.apply(obj, args);
  // 3. If the constructor returned an object, use that; otherwise use obj
  return result !== null && (typeof result === "object" || typeof result === "function") ? result : obj;
}

const a = myNew(Person, "Alice");
a instanceof Person; // true

function Animal(name) {
  this.name = name;
}
Animal.prototype.eat = function () {
  return `${this.name} is eating`;
};

function Dog(name, breed) {
  Animal.call(this, name); // 1. inherit own properties ("super(name)")
  this.breed = breed;
}

// 2. inherit methods
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // repair the constructor pointer

Dog.prototype.bark = function () {
  return "Woof!";
};

const d = new Dog("Rex", "Lab");
d.eat();               // "Rex is eating"
d instanceof Animal;   // true

function User(name) {
  this.name = name;
}
User.fromJSON = function (json) {   // static
  return new User(JSON.parse(json).name);
};
User.prototype.hello = function () { // instance
  return `Hi ${this.name}`;
};

const u = User.fromJSON('{"name":"Rohit"}');
u.hello();     // "Hi Rohit"
u.fromJSON;    // undefined — statics aren't inherited by instances

function Car() {}
Car.prototype.wheels = 4;

const trike = new Car();
trike.wheels = 3;       // own property — shadows the prototype
const sedan = new Car();

trike.wheels;           // 3
sedan.wheels;           // 4
delete trike.wheels;
trike.wheels;           // 4 again — the prototype shows through

const obj = { a: 1 };
Object.prototype.c = 3; // inherited (never do this in real code!)

Object.hasOwn(obj, "a"); // true
Object.hasOwn(obj, "c"); // false
"c" in obj;              // true — `in` walks the chain
"toString" in obj;       // true

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  if (Object.hasOwn(obj, key)) {   // note: Object.hasOwn, not obj.hasOwn
    console.log(`${key}: ${obj[key]}`);
  }
}

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

const prices = { apple: 1, banana: 0.5, cherry: 3 };

Object.keys(prices);    // ["apple", "banana", "cherry"]
Object.values(prices);  // [1, 0.5, 3]
Object.entries(prices); // [["apple", 1], ["banana", 0.5], ["cherry", 3]]

// fromEntries is the reverse — great for transforming objects
const doubled = Object.fromEntries(
  Object.entries(prices).map(([k, v]) => [k, v * 2]),
);
// { apple: 2, banana: 1, cherry: 6 }

const cheap = Object.fromEntries(Object.entries(prices).filter(([, v]) => v < 2));

// Also turns a Map or URLSearchParams into a plain object
Object.fromEntries(new URLSearchParams("a=1&b=2")); // { a: "1", b: "2" }

const dict = Object.create(null);
dict.apple = 1;

"toString" in dict;      // false — a truly empty dictionary
dict.__proto__;          // undefined — even this key is safe to use
Object.hasOwn(dict, "apple"); // true (dict.hasOwnProperty would be a TypeError)

const user = { name: "Rohit" };
Object.getOwnPropertyDescriptor(user, "name");
// { value: "Rohit", writable: true, enumerable: true, configurable: true }

Object.defineProperty(user, "id", {
  value: 42,
  writable: false,     // can't reassign
  enumerable: false,   // hidden from keys / for...in / JSON.stringify
  configurable: false, // can't delete or redefine
});

user.id = 7;           // silently ignored (TypeError in strict mode)
Object.keys(user);     // ["name"]
JSON.stringify(user);  // '{"name":"Rohit"}'

const account = {
  _balance: 0,
  get balance() {
    return `$${this._balance.toFixed(2)}`;
  },
  set balance(value) {
    if (value < 0) throw new RangeError("Balance can't be negative");
    this._balance = value;
  },
};

account.balance = 50;    // calls the setter
account.balance;         // "$50.00" — calls the getter (no parentheses)
account.balance = -1;    // RangeError

class Temperature {
  #celsius = 0;
  get fahrenheit() {
    return this.#celsius * 1.8 + 32;
  }
  set fahrenheit(f) {
    this.#celsius = (f - 32) / 1.8;
  }
}

const id1 = Symbol("id");
const id2 = Symbol("id");
id1 === id2; // false

const mySymbol = Symbol("privateProperty");
const obj = { name: "John", [mySymbol]: 42 };

Object.keys(obj);                     // ["name"] — symbols are skipped
JSON.stringify(obj);                  // '{"name":"John"}'
obj[mySymbol];                        // 42
Object.getOwnPropertySymbols(obj);    // [Symbol(privateProperty)]
Reflect.ownKeys(obj);                 // ["name", Symbol(privateProperty)]

Symbol.for("app.id") === Symbol.for("app.id"); // true

const money = {
  amount: 42,
  currency: "CAD",
  [Symbol.toPrimitive](hint) {
    return hint === "number" ? this.amount : `${this.amount} ${this.currency}`;
  },
  get [Symbol.toStringTag]() {
    return "Money";
  },
};

+money;                               // 42
`${money}`;                           // "42 CAD"
Object.prototype.toString.call(money); // "[object Money]"

const target = { name: "Rohit" };

const logged = new Proxy(target, {
  get(obj, prop, receiver) {
    console.log(`read ${String(prop)}`);
    return Reflect.get(obj, prop, receiver);
  },
});

logged.name; // logs "read name", returns "Rohit"

function withValidation(obj) {
  return new Proxy(obj, {
    set(target, prop, value) {
      if (prop === "age" && (!Number.isInteger(value) || value < 0)) {
        throw new TypeError("age must be a non-negative integer");
      }
      return Reflect.set(target, prop, value); // must return true for success
    },
  });
}

const person = withValidation({});
person.age = 30;    // ok
person.age = -5;    // TypeError
person.age = "30";  // TypeError

// A naive deep merge
function merge(target, source) {
  for (const key in source) {
    if (typeof source[key] === "object" && source[key] !== null) {
      target[key] ??= {};
      merge(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  }
  return target;
}

const payload = JSON.parse('{"__proto__": {"isAdmin": true}}');
merge({}, payload);

({}).isAdmin; // true 😱 — every object is now "admin"

class Person {
  // Public instance field — one per instance
  species = "human";

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // Method — goes on Person.prototype, shared by all instances
  greet() {
    return `Hello, my name is ${this.name} and I'm ${this.age}.`;
  }

  // Static — lives on the class itself
  static compare(a, b) {
    return a.age - b.age;
  }
}

const john = new Person("John", 30);
john.greet();
typeof Person;                                 // "function"
Object.getPrototypeOf(john) === Person.prototype; // true
Person(); // TypeError: Class constructor Person cannot be invoked without 'new'

class Person {
  constructor(name) {
    this.name = name;
  }
  greetA() {}               // on Person.prototype — shared
  greetB = function () {};  // class field — a new function on EVERY instance
  greetC = () => this.name; // class field arrow — per instance, `this` locked
}

const a = new Person("a");
const b = new Person("b");
a.greetA === b.greetA;           // true
a.greetB === b.greetB;           // false
Object.hasOwn(a, "greetB");      // true — own property, not inherited

class BankAccount {
  #balance; // must be declared up front

  constructor(owner, balance) {
    this.owner = owner;
    this.#balance = balance;
  }

  getBalance() {
    return `The balance for ${this.owner} is $${this.#balance}`;
  }

  deposit(amount) {
    this.#validate(amount);
    this.#balance += amount;
    return `Deposited $${amount}. New balance is $${this.#balance}`;
  }

  withdraw(amount) {
    this.#validate(amount);
    if (amount > this.#balance) return "Insufficient balance.";
    this.#balance -= amount;
    return `Withdrew $${amount}. Remaining balance is $${this.#balance}`;
  }

  #validate(amount) { // private method
    if (amount <= 0) throw new RangeError("Amount must be positive");
  }

  static isAccount(obj) {
    return #balance in obj; // ergonomic brand check
  }
}

const account = new BankAccount("Alice", 1000);
account.deposit(500);   // Deposited $500. New balance is $1500
account.withdraw(200);  // Withdrew $200. Remaining balance is $1300
account.balance;        // undefined
// account.#balance;    // SyntaxError: Private field '#balance' must be declared in an enclosing class

// Closure-based privacy (works without classes)
function createAccount(initial) {
  let balance = initial;
  return {
    deposit: (n) => (balance += n),
    get balance() {
      return balance;
    },
  };
}

class Config {
  static #instances = 0;
  static defaults;

  static {
    // runs once, when the class is evaluated
    const env = globalThis.process?.env?.NODE_ENV ?? "development";
    Config.defaults = { env, debug: env !== "production" };
  }

  constructor() {
    Config.#instances++;
  }

  static get count() {
    return Config.#instances;
  }
}

Config.defaults; // { env: "development", debug: true }
new Config();
Config.count;    // 1

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);        // MUST be called before using `this`
    this.breed = breed;
  }
  speak() {
    return `${super.speak()} — Woof!`; // call the parent version
  }
}

new Dog("Rex", "Lab").speak(); // "Rex makes a sound — Woof!"

class ValidationError extends Error {
  constructor(field, message) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

class Shape {
  area() {
    return 0;
  }
  describe() {
    return `${this.constructor.name} with area ${this.area().toFixed(2)}`;
  }
}

class Circle extends Shape {
  constructor(r) {
    super();
    this.r = r;
  }
  area() {
    return Math.PI * this.r ** 2;
  }
}

class Square extends Shape {
  constructor(s) {
    super();
    this.s = s;
  }
  area() {
    return this.s ** 2;
  }
}

[new Circle(1), new Square(2)].map((s) => s.describe());
// ["Circle with area 3.14", "Square with area 4.00"]

class Calculator {
  add(...args) {
    if (args.length === 1 && Array.isArray(args[0])) {
      return args[0].reduce((a, b) => a + b, 0);       // add([1, 2, 3])
    }
    if (args.every((a) => typeof a === "number")) {
      return args.reduce((a, b) => a + b, 0);          // add(1, 2, 3)
    }
    if (args.every((a) => typeof a === "string")) {
      return args.join("");                             // add("a", "b")
    }
    throw new TypeError("Unsupported arguments");
  }
}

const c = new Calculator();
c.add(1, 2);       // 3
c.add([1, 2, 3]);  // 6
c.add("a", "b");   // "ab"

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new TypeError("Shape is abstract — extend it instead");
    }
    if (this.area === Shape.prototype.area) {
      throw new TypeError(`${new.target.name} must implement area()`);
    }
  }
  area() {
    throw new Error("not implemented");
  }
}

class Rect extends Shape {
  constructor(w, h) {
    super();
    this.w = w;
    this.h = h;
  }
  area() {
    return this.w * this.h;
  }
}

new Rect(2, 3).area(); // 6
new Shape();           // TypeError: Shape is abstract
class Bad extends Shape {}
new Bad();             // TypeError: Bad must implement area()

function Person(name) {
  if (!new.target) {
    return new Person(name); // called without new? fix it
  }
  this.name = name;
}

Person("Rohit").name; // "Rohit" — works with or without `new`

const canSwim = {
  swim() {
    return `${this.name} is swimming`;
  },
};
const canFly = {
  fly() {
    return `${this.name} is flying`;
  },
};

class Duck {
  constructor(name) {
    this.name = name;
  }
}
Object.assign(Duck.prototype, canSwim, canFly);

const d = new Duck("Donald");
d.swim(); // "Donald is swimming"
d.fly();  // "Donald is flying"

const Serializable = (Base) =>
  class extends Base {
    serialize() {
      return JSON.stringify(this);
    }
  };
const Timestamped = (Base) =>
  class extends Base {
    createdAt = Date.now();
  };

class User {}
class SmartUser extends Serializable(Timestamped(User)) {}

// Behaviours as small functions that work on shared state
const canEat = (state) => ({
  eat: (food) => `${state.name} eats ${food}`,
});
const canWalk = (state) => ({
  walk: () => `${state.name} walks`,
});
const canSwim = (state) => ({
  swim: () => `${state.name} swims`,
});

const createDog = (name) => {
  const state = { name };
  return { ...canEat(state), ...canWalk(state), ...canSwim(state) };
};
const createFish = (name) => {
  const state = { name };
  return { ...canEat(state), ...canSwim(state) };
};

createDog("Rex").walk();   // "Rex walks"
createFish("Nemo").swim(); // "Nemo swims"

const products = [
  { name: "Laptop", price: 1200, inStock: true },
  { name: "Mouse", price: 25, inStock: false },
  { name: "Monitor", price: 300, inStock: true },
];

// map: transform every item → same length
const names = products.map((p) => p.name); // ["Laptop", "Mouse", "Monitor"]

// filter: keep items that pass → same or shorter
const available = products.filter((p) => p.inStock);

// reduce: boil the array down to one value
const total = products.reduce((sum, p) => sum + p.price, 0); // 1525

const inStockNames = products
  .filter((p) => p.inStock)
  .map((p) => p.name.toUpperCase()); // ["LAPTOP", "MONITOR"]

// Count occurrences
const fruits = ["apple", "banana", "apple", "cherry", "apple"];
const counts = fruits.reduce((acc, f) => {
  acc[f] = (acc[f] ?? 0) + 1;
  return acc;
}, {}); // { apple: 3, banana: 1, cherry: 1 }

// Index by id
const byName = products.reduce((acc, p) => ({ ...acc, [p.name]: p }), {});

// Max value
const priciest = products.reduce((max, p) => (p.price > max.price ? p : max));

const users = [
  { id: 1, name: "Rohit", admin: true },
  { id: 2, name: "Sam", admin: false },
  { id: 3, name: "Ana", admin: true },
];

users.find((u) => u.admin);    // { id: 1, name: "Rohit", admin: true }
users.filter((u) => u.admin);  // [Rohit, Ana]
users.find((u) => u.id === 9); // undefined

const nums = [5, 12, 8, 130, 44];

nums.findIndex((n) => n > 10);     // 1   (12)
nums.findLast((n) => n > 10);      // 44
nums.findLastIndex((n) => n > 10); // 4
nums.findIndex((n) => n > 500);    // -1

// Typical use: update an item in place
const i = users.findIndex((u) => u.id === 2);
if (i !== -1) users[i] = { ...users[i], name: "Samuel" };

const ages = [19, 22, 17, 30];

ages.some((a) => a < 18);   // true  — at least one minor
ages.every((a) => a >= 18); // false — not all adults

[].some(() => true);  // false
[].every(() => false); // true — "vacuous truth": no item fails

const scores = [30, 10, 20];

scores.toSorted((a, b) => a - b); // [10, 20, 30]
scores.toReversed();              // [20, 10, 30]
scores.toSpliced(1, 1);           // [30, 20]
scores.with(0, 99);               // [99, 10, 20] — replace one index
scores;                           // [30, 10, 20] — untouched

const arr = ["a", "b", "c"];
delete arr[1];
arr;        // ["a", <empty>, "c"] — leaves a hole
arr.length; // 3 — length doesn't change

// Remove properly
arr.splice(1, 1);              // mutating
const next = arr.toSpliced(1, 1); // non-mutating
const next2 = arr.filter((_, i) => i !== 1);

[10, 1, 5, 100].sort();               // [1, 10, 100, 5] 😬 — default sort compares strings
[10, 1, 5, 100].sort((a, b) => a - b); // [1, 5, 10, 100]
[10, 1, 5, 100].sort((a, b) => b - a); // [100, 10, 5, 1]

// Strings: use localeCompare for proper alphabetical order
["résumé", "apple", "Zebra"].sort((a, b) => a.localeCompare(b));

// By a property, then by another
people.sort((a, b) => a.lastName.localeCompare(b.lastName) || a.age - b.age);

[1, [2, [3, [4]]]].flat();          // [1, 2, [3, [4]]]  — depth 1 by default
[1, [2, [3, [4]]]].flat(2);         // [1, 2, 3, [4]]
[1, [2, [3, [4]]]].flat(Infinity);  // [1, 2, 3, 4]

// flatMap = map then flat(1) — map one item to zero or many
const sentences = ["hello world", "hi there"];
sentences.flatMap((s) => s.split(" ")); // ["hello", "world", "hi", "there"]

// Filter and map in one pass: return [] to drop an item
[1, 2, 3, 4].flatMap((n) => (n % 2 ? [] : [n * 10])); // [20, 40]

Array.from("abc");                       // ["a", "b", "c"]
Array.from(new Set([1, 1, 2]));          // [1, 2]
Array.from(document.querySelectorAll("li")); // NodeList → Array

// Create an array and fill it with index + 1
Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]
[...Array(5).keys()].map((i) => i + 1);     // same result
Array(5).fill(0);                            // [0, 0, 0, 0, 0]

// ✅ Each row is a new array
const grid = Array.from({ length: 3 }, () => Array(3).fill(0));
grid[0][0] = 1;
// [[1,0,0],[0,0,0],[0,0,0]]

// ❌ fill() puts the SAME array object in every row
const bad = Array(3).fill(Array(3).fill(0));
bad[0][0] = 1;
// [[1,0,0],[1,0,0],[1,0,0]] — all rows changed!

const numbers = [1, 2, 3, 4, 5];

for (const n of numbers) console.log(n);
numbers.forEach((n, i) => console.log(i, n));
for (const [i, n] of numbers.entries()) console.log(i, n);

const arr = ["apple", "banana", "cherry"];
arr.extra = "oops";

for (const fruit of arr) console.log(fruit); // apple banana cherry (values)
for (const key in arr) console.log(key);     // "0" "1" "2" "extra" (keys, as strings!)

const obj = { name: "John", age: 30 };
for (const key in obj) console.log(key, obj[key]); // fine for objects
for (const x of obj) {}                            // TypeError: obj is not iterable

function uniqueArray(array) {
  return [...new Set(array)]; // or Array.from(new Set(array))
}
uniqueArray([1, 1, 2, 3, 3]); // [1, 2, 3]

const tags = new Set(["js", "ts"]);
tags.add("js");        // ignored — already there
tags.has("ts");        // true — O(1), much faster than array.includes on big lists
tags.delete("ts");
tags.size;             // 1

// Set operations (ES2025 — modern browsers and Node 22+)
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
a.union(b);        // {1, 2, 3, 4}
a.intersection(b); // {2, 3}
a.difference(b);   // {1}

// Older equivalent
const intersection = new Set([...a].filter((x) => b.has(x)));

const person = new Map([
  ["name", "John"],
  ["age", 30],
]);

person.set("occupation", "Developer");
person.get("name");   // "John"
person.has("age");    // true
person.delete("age");
person.size;          // 2

// Object keys — impossible with plain objects
const meta = new Map();
const btn = document.querySelector("button");
meta.set(btn, { clicks: 0 });
meta.get(btn).clicks++;

for (const [key, value] of person) console.log(key, value);
person.forEach((value, key) => console.log(key, value)); // note: value first

[...person.keys()];     // ["name", "occupation"]
[...person.values()];   // ["John", "Developer"]
[...person.entries()];  // [["name","John"], ["occupation","Developer"]]

// Convert both ways
const obj = Object.fromEntries(person);
const map = new Map(Object.entries(obj));
JSON.stringify([...person]); // serialise as an array of pairs

// Private data per instance without memory leaks
const privateData = new WeakMap();

class User {
  constructor(name, password) {
    privateData.set(this, { password });
    this.name = name;
  }
  checkPassword(pw) {
    return privateData.get(this).password === pw;
  }
}

// Cache results per object; entries vanish when the object does
const cache = new WeakMap();
function expensive(obj) {
  if (!cache.has(obj)) cache.set(obj, heavyComputation(obj));
  return cache.get(obj);
}

// WeakSet: "have I seen this object?" — e.g. avoid processing a DOM node twice
const processed = new WeakSet();
function process(node) {
  if (processed.has(node)) return;
  processed.add(node);
}

const original = { toy: "Car", smallBox: { toy: "Doll" } };

const shallow = { ...original };
shallow.toy = "Ball";              // fine — top level is separate
shallow.smallBox.toy = "Robot";    // ⚠ changes original too!

original.toy;          // "Car"
original.smallBox.toy; // "Robot"

// Objects
const a = { ...obj };
const b = Object.assign({}, obj);

// Arrays
const c = [...arr];
const d = arr.slice();
const e = Array.from(arr);
const f = arr.concat();

// ❌ Mutation: same reference, React may skip the re-render
user.address.city = "Toronto";
setUser(user);

// ✅ New objects along the path that changed; everything else is shared
setUser({
  ...user,
  address: { ...user.address, city: "Toronto" },
});

// Arrays
setTodos([...todos, newTodo]);                                  // add
setTodos(todos.filter((t) => t.id !== id));                     // remove
setTodos(todos.map((t) => (t.id === id ? { ...t, done: true } : t))); // update

const deepClone = JSON.parse(JSON.stringify(original));
// Step 1: stringify takes a "picture" of the object as text
// Step 2: parse builds a brand-new object from that picture

const original = {
  date: new Date(),
  tags: new Set(["a"]),
  nested: { list: [1, 2, 3] },
};
original.self = original; // circular!

const copy = structuredClone(original);
copy.date instanceof Date;   // true
copy.tags.has("a");          // true
copy.self === copy;          // true — circular refs preserved
copy.nested !== original.nested; // true

export default function deepClone(value) {
  // typeof null === "object", so null must be checked first
  if (value === null || typeof value !== "object") {
    return value;
  }

  if (Array.isArray(value)) {
    return value.map((item) => deepClone(item));
  }

  return Object.fromEntries(
    Object.entries(value).map(([key, val]) => [key, deepClone(val)]),
  );
}

function deepClone(value, seen = new WeakMap()) {
  if (value === null || typeof value !== "object") return value;
  if (seen.has(value)) return seen.get(value); // circular reference

  if (value instanceof Date) return new Date(value);
  if (value instanceof RegExp) return new RegExp(value.source, value.flags);

  if (value instanceof Map) {
    const copy = new Map();
    seen.set(value, copy);
    value.forEach((v, k) => copy.set(deepClone(k, seen), deepClone(v, seen)));
    return copy;
  }

  if (value instanceof Set) {
    const copy = new Set();
    seen.set(value, copy);
    value.forEach((v) => copy.add(deepClone(v, seen)));
    return copy;
  }

  // Keep the prototype so class instances stay class instances
  const copy = Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value));
  seen.set(value, copy);
  for (const key of Reflect.ownKeys(value)) {   // includes symbol keys
    copy[key] = deepClone(value[key], seen);
  }
  return copy;
}

"use strict";
const config = Object.freeze({ api: "/v1", retries: 3 });
config.retries = 5;   // TypeError in strict mode (silently ignored otherwise)
config.debug = true;  // TypeError
delete config.api;    // TypeError

const user = Object.seal({ name: "Rohit" });
user.name = "R";      // ✅ allowed
user.age = 30;        // TypeError
delete user.name;     // TypeError

function deepFreeze(obj) {
  Object.freeze(obj); // freeze first, so a circular reference back to obj is skipped below
  for (const key of Reflect.ownKeys(obj)) {
    const value = obj[key];
    if (value !== null && typeof value === "object" && !Object.isFrozen(value)) {
      deepFreeze(value);
    }
  }
  return obj;
}

const settings = deepFreeze({ theme: { color: "dark" }, langs: ["en"] });
settings.theme.color = "light"; // ignored / TypeError
settings.langs.push("fr");      // TypeError: object is not extensible

// 1. Callbacks — nesting gets ugly fast ("callback hell")
getUser(id, (err, user) => {
  if (err) return handle(err);
  getOrders(user, (err, orders) => {
    if (err) return handle(err);
    render(orders);
  });
});

// 2. Promises — flat chains, one error handler
getUser(id)
  .then((user) => getOrders(user))
  .then(render)
  .catch(handle);

// 3. async/await — promises that read like synchronous code
try {
  const user = await getUser(id);
  render(await getOrders(user));
} catch (err) {
  handle(err);
}

function returnAfter(ms, value) {
  return new Promise((resolve, reject) => {
    if (ms < 0) return reject(new RangeError("ms must be ≥ 0"));
    setTimeout(() => resolve(value), ms);
  });
}

returnAfter(1000, 42)
  .then((v) => v * 2)          // return a value → next then gets it
  .then((v) => returnAfter(500, v + 1)) // return a promise → chain waits for it
  .then(console.log)           // 85
  .catch(console.error)        // catches a rejection from ANY step above
  .finally(() => console.log("done")); // runs either way, receives nothing

console.log("1");
const p = new Promise((resolve) => {
  console.log("2 — executor runs now");
  resolve();
  console.log("3 — still runs after resolve()");
});
p.then(() => console.log("5 — then is a microtask"));
console.log("4");

// 1, 2, 3, 4, 5

function returnAfter25secs() {
  return new Promise((resolve) => setTimeout(() => resolve(1), 25_000));
}

async function callThis() {
  const result = await returnAfter25secs(); // pauses THIS function only
  console.log(result); // 1, after 25 seconds
}

callThis();
console.log("this logs first — the rest of the program keeps running");

async function fetchData() {
  try {
    const res = await fetch("/api/user");
    if (!res.ok) throw new Error(`HTTP ${res.status}`); // fetch doesn't reject on 404/500!
    return await res.json();
  } catch (error) {
    console.error(error);
    return null;
  }
}

async function one() {
  return 1;
}
one();                 // Promise {<fulfilled>: 1}, not 1
one().then(console.log); // 1

async function fail() {
  throw new Error("nope");
}
fail().catch((e) => console.log(e.message)); // "nope" — no synchronous throw

async function demo() {
  console.log("B");
  await null;           // even awaiting a non-promise yields
  console.log("D");
}

console.log("A");
demo();
console.log("C");
// A, B, C, D

// Parallel — total time ≈ the slowest request
const [user, posts] = await Promise.all([
  fetch("/api/user").then((r) => r.json()),
  fetch("/api/posts").then((r) => r.json()),
]);

// Keep going even if some fail
const results = await Promise.allSettled(urls.map((u) => fetch(u)));
const ok = results.filter((r) => r.status === "fulfilled").map((r) => r.value);

// Timeout with race
const timeout = (ms) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error("Timed out")), ms));
const data = await Promise.race([fetch("/slow"), timeout(5000)]);

// First successful mirror
const fastest = await Promise.any([fetch(mirrorA), fetch(mirrorB)]);

async function mapWithLimit(items, limit, fn) {
  const results = new Array(items.length);
  let next = 0;

  async function worker() {
    while (next < items.length) {
      const i = next++;            // safe: JS is single-threaded between awaits
      results[i] = await fn(items[i], i);
    }
  }

  const workers = Array.from({ length: Math.min(limit, items.length) }, worker);
  await Promise.all(workers);
  return results; // same order as items
}

const pages = await mapWithLimit(urls, 5, (url) => fetch(url).then((r) => r.text()));

const controller = new AbortController();

fetch("/api/search?q=js", { signal: controller.signal })
  .then((r) => r.json())
  .catch((err) => {
    if (err.name === "AbortError") return; // we cancelled it — not a real error
    throw err;
  });

controller.abort(); // e.g. the user typed again, or the component unmounted

// Built-in timeout
await fetch("/api/slow", { signal: AbortSignal.timeout(5000) });

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    return await res.json();
  } catch (err) {
    throw new Error(`Failed to load user ${id}`, { cause: err });
  }
}

try {
  await loadUser(7);
} catch (err) {
  console.log(err.message);      // "Failed to load user 7"
  console.log(err.cause);        // the original TypeError / SyntaxError
}

const arr = ["a", "b"];
const it = arr[Symbol.iterator]();
it.next(); // { value: "a", done: false }
it.next(); // { value: "b", done: false }
it.next(); // { value: undefined, done: true }

class Range {
  constructor(start, end, step = 1) {
    Object.assign(this, { start, end, step });
  }

  [Symbol.iterator]() {
    let current = this.start;
    const { end, step } = this;
    return {
      next() {
        if (current > end) return { value: undefined, done: true };
        const value = current;
        current += step;
        return { value, done: false };
      },
    };
  }
}

const r = new Range(1, 10, 3);
[...r];                    // [1, 4, 7, 10]
for (const n of r) console.log(n);
const [first, second] = r; // 1, 4

function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++; // pause here, hand out a value
  }
}

const ids = idGenerator();
ids.next().value; // 1
ids.next().value; // 2 — infinite, but lazy: values are made only on demand

// The Range class again, much shorter
class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  *[Symbol.iterator]() {
    for (let n = this.start; n <= this.end; n++) yield n;
  }
}
[...new Range(1, 5)]; // [1, 2, 3, 4, 5]

function* conversation() {
  const name = yield "What's your name?";
  yield `Hello, ${name}!`;
}
const chat = conversation();
chat.next().value;          // "What's your name?"
chat.next("Rohit").value;   // "Hello, Rohit!"

idGenerator()
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10)
  .take(3)
  .toArray(); // [20, 40, 60] — only 6 values were ever generated

// Async generator: yield + await in the same function
async function* fetchAllPages(url) {
  while (url) {
    const res = await fetch(url);
    const { items, nextUrl } = await res.json();
    yield items;
    url = nextUrl;
  }
}

for await (const page of fetchAllPages("/api/products?page=1")) {
  render(page); // each page as soon as it arrives; stops when url is null
}

import { createReadStream } from "node:fs";
import { createInterface } from "node:readline";

const lines = createInterface({ input: createReadStream("huge.log") });
for await (const line of lines) {
  if (line.includes("ERROR")) console.log(line);
}

const box = document.querySelector(".box");
let start;

function step(timestamp) {           // timestamp: ms since page load, high precision
  start ??= timestamp;
  const elapsed = timestamp - start;
  const x = Math.min(elapsed / 5, 300); // move 300px over 1.5s
  box.style.transform = `translateX(${x}px)`;
  if (x < 300) requestAnimationFrame(step); // schedule the next frame
}

requestAnimationFrame(step);

const worker = new Worker(new URL("./worker.js", import.meta.url), { type: "module" });

worker.postMessage({ numbers: Array.from({ length: 1e7 }, (_, i) => i) });

worker.onmessage = (event) => {
  console.log("Sum from worker:", event.data);
};
worker.onerror = (e) => console.error(e.message);

self.onmessage = (event) => {
  const { numbers } = event.data;
  let sum = 0;
  for (const n of numbers) sum += n; // the page stays responsive meanwhile
  self.postMessage(sum);
};

const buffer = new ArrayBuffer(100 * 1024 * 1024); // 100 MB
console.log(buffer.byteLength); // 104857600

worker.postMessage(buffer, [buffer]); // second argument: the list to transfer

console.log(buffer.byteLength); // 0 — "detached", it now belongs to the worker

async function* readNdjson(url) {
  const res = await fetch(url);
  const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
  let buffer = "";

  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    buffer += value;
    const lines = buffer.split("\n");
    buffer = lines.pop(); // the last line may be incomplete — keep it for later
    for (const line of lines) {
      if (line.trim()) yield JSON.parse(line); // small parses, the UI stays responsive
    }
  }
  if (buffer.trim()) yield JSON.parse(buffer);
}

for await (const record of readNdjson("/api/export.ndjson")) {
  addRow(record);
}

<script src="app.js"></script>                <!-- blocks parsing -->
<script src="app.js" defer></script>          <!-- runs after parsing, in order -->
<script src="analytics.js" async></script>    <!-- runs as soon as it arrives, any order -->
<script type="module" src="main.js"></script> <!-- deferred by default + import/export -->

<div id="outer">
  <button id="inner">Click</button>
</div>

const outer = document.getElementById("outer");
const inner = document.getElementById("inner");

outer.addEventListener("click", () => console.log("outer capture"), { capture: true });
outer.addEventListener("click", () => console.log("outer bubble"));
inner.addEventListener("click", () => console.log("inner"));

// Clicking the button logs:
// outer capture → inner → outer bubble

document.querySelector("ul").addEventListener("click", (e) => {
  console.log(e.target.tagName);        // "LI" (or a <span> inside it!)
  console.log(e.currentTarget.tagName); // "UL" — always the element with the listener
});

// Handle a form with JavaScript instead of reloading the page
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  fetch("/api/signup", { method: "POST", body: data });
});

// A click inside a modal shouldn't reach the backdrop's "close" handler
modal.addEventListener("click", (e) => e.stopPropagation());
backdrop.addEventListener("click", closeModal);

<ul id="item-list">
  <li data-id="1">Item 1 <button class="delete">✕</button></li>
  <li data-id="2">Item 2 <button class="delete">✕</button></li>
  <li data-id="3">Item 3 <button class="delete">✕</button></li>
</ul>

document.getElementById("item-list").addEventListener("click", (event) => {
  // closest() handles clicks on nested elements inside the <li>
  const deleteBtn = event.target.closest(".delete");
  if (deleteBtn) {
    deleteBtn.closest("li").remove();
    return;
  }

  const li = event.target.closest("li");
  if (li && event.currentTarget.contains(li)) {
    console.log("List item clicked:", li.dataset.id);
  }
});

function List({ items, onSelect }) {
  // No real listener is attached to each <li> — React delegates to the root
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id} onClick={() => onSelect(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

function debounce(func, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId); // cancel the previously scheduled call
    timeoutId = setTimeout(() => func.apply(this, args), delay); // keep `this` and args
  };
}

function searchQuery(query) {
  console.log("Searching for:", query);
}

const debouncedSearch = debounce(searchQuery, 300);

document.getElementById("search-input").addEventListener("input", (event) => {
  debouncedSearch(event.target.value); // fires once, 300ms after typing stops
});

function throttle(func, interval) {
  let lastCall = 0;
  let timeoutId;

  return function (...args) {
    const now = Date.now();
    const remaining = interval - (now - lastCall);

    if (remaining <= 0) {
      clearTimeout(timeoutId);
      timeoutId = undefined;
      lastCall = now;
      func.apply(this, args);                // leading call
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {         // trailing call, so the last event isn't lost
        lastCall = Date.now();
        timeoutId = undefined;
        func.apply(this, args);
      }, remaining);
    }
  };
}

window.addEventListener("scroll", throttle(() => {
  console.log("scroll position:", window.scrollY);
}, 200));

window.addEventListener(
  "touchmove",
  (e) => {
    updateParallax(window.scrollY);
    // e.preventDefault() here would be ignored (and log a warning)
  },
  { passive: true },
);

localStorage.setItem("theme", "dark");          // values are always strings
localStorage.getItem("theme");                  // "dark"
localStorage.setItem("user", JSON.stringify({ id: 1 }));
JSON.parse(localStorage.getItem("user"));

// React to changes made in OTHER tabs
addEventListener("storage", (e) => console.log(e.key, e.newValue));

<h1 class="title" id="header">Hello</h1>

#header { color: red; }   /* (1, 0, 0) — wins */
.title  { color: blue; }  /* (0, 1, 0) */
h1      { color: green; } /* (0, 0, 1) */

ul li.active a { }        /* (0, 1, 3) */
.nav .item     { }        /* (0, 2, 0) — beats the one above: B column is compared first */

p { color: blue !important; }
#special { color: red; }  /* loses, even though the ID is more specific */

#article { color: red; }   /* very specific… */
p { color: black; }        /* …but this targets the <p> directly, so the <p> is black */

// Both in one import
import React, { useState, useEffect } from "react";

// Namespace import: group every named export into one object
import * as utils from "./utils.js";
utils.add(1, 2);
utils.default; // the default export, if there is one

// components/index.js — a "barrel" file
export { Button } from "./Button.js";
export { default as Modal } from "./Modal.js";
export * from "./icons.js";

button.addEventListener("click", async () => {
  const { openEditor } = await import("./editor.js"); // downloaded only when needed
  openEditor();
});

// React
const Settings = React.lazy(() => import("./Settings.jsx"));

// Works in CommonJS too — the way to load an ESM-only package from CJS
const { default: chalk } = await import("chalk");

// greet.js — exporting a single value
module.exports = function () {
  console.log("Hello from CommonJS");
};

// math.js — exporting several things
exports.add = (a, b) => a + b;
exports.PI = 3.14159;
// same as: module.exports = { add, PI };

// main.js
const greet = require("./greet");
const { add, PI } = require("./math"); // extension optional
greet();

// AMD
define(["jquery", "./utils"], function ($, utils) {
  return { init() { /* ... */ } };
});

// store.js
const globalMap = new Map(); // created once, no matter how many files import this

export default {
  getInstance() {
    return globalMap;
  },
};

import store from "./store.js";
store.getInstance().set("user", "Rohit");

import store from "./store.js";
store.getInstance().get("user"); // "Rohit" — same Map

class Database {
  static #instance = null;

  constructor() {
    if (Database.#instance) {
      return Database.#instance; // `new` hands back the existing instance
    }
    this.connectedAt = Date.now();
    Database.#instance = this;
  }

  static getInstance() {
    return (Database.#instance ??= new Database());
  }

  query(sql) {
    return `running: ${sql}`;
  }
}

const a = Database.getInstance();
const b = new Database();
a === b; // true

// logger.js
class Logger {
  #logs = [];
  log(msg) {
    this.#logs.push(msg);
    console.log(`[${new Date().toISOString()}] ${msg}`);
  }
  get count() {
    return this.#logs.length;
  }
}

export const logger = new Logger(); // every importer shares this one

class EmailNotifier {
  constructor({ address }) {
    this.address = address;
  }
  send(msg) {
    return `Email to ${this.address}: ${msg}`;
  }
}
class SmsNotifier {
  constructor({ phone }) {
    this.phone = phone;
  }
  send(msg) {
    return `SMS to ${this.phone}: ${msg}`;
  }
}

const notifiers = {
  email: EmailNotifier,
  sms: SmsNotifier,
};

function createNotifier(type, options) {
  const Notifier = notifiers[type];
  if (!Notifier) throw new Error(`Unknown notifier type: ${type}`);
  return new Notifier(options);
}

createNotifier("sms", { phone: "+1 555 0100" }).send("Your code is 1234");

class EventEmitter {
  #listeners = new Map(); // event name → Set of functions

  on(event, listener) {
    if (!this.#listeners.has(event)) this.#listeners.set(event, new Set());
    this.#listeners.get(event).add(listener);
    return () => this.off(event, listener); // return an unsubscribe function
  }

  off(event, listener) {
    this.#listeners.get(event)?.delete(listener);
  }

  once(event, listener) {
    const wrapper = (...args) => {
      this.off(event, wrapper);
      listener(...args);
    };
    return this.on(event, wrapper);
  }

  emit(event, ...args) {
    // copy first, so listeners that unsubscribe during emit don't break the loop
    for (const listener of [...(this.#listeners.get(event) ?? [])]) {
      listener(...args);
    }
  }
}

const cart = new EventEmitter();
const unsubscribe = cart.on("add", (item) => console.log("Added", item));
cart.once("add", () => console.log("First item!"));

cart.emit("add", "Book"); // Added Book, First item!
cart.emit("add", "Pen");  // Added Pen
unsubscribe();
cart.emit("add", "Cup");  // (nothing)

function withLogging(fn) {
  return function (...args) {
    console.log(`→ ${fn.name}(${args.join(", ")})`);
    const result = fn.apply(this, args);
    console.log(`← ${result}`);
    return result;
  };
}

function withTiming(fn) {
  return function (...args) {
    const start = performance.now();
    try {
      return fn.apply(this, args);
    } finally {
      console.log(`${fn.name} took ${(performance.now() - start).toFixed(1)}ms`);
    }
  };
}

function add(a, b) {
  return a + b;
}

const tracedAdd = withLogging(withTiming(add)); // decorators stack
tracedAdd(2, 3);

function logged(originalMethod, context) {
  const name = String(context.name);
  return function (...args) {
    console.log(`→ ${name}(${args.join(", ")})`);
    const result = originalMethod.call(this, ...args);
    console.log(`← ${name} returned`, result);
    return result;
  };
}

// A decorator factory: call it with options, it returns the decorator
function retry(times) {
  return function (originalMethod, context) {
    return async function (...args) {
      let lastError;
      for (let attempt = 1; attempt <= times; attempt++) {
        try {
          return await originalMethod.call(this, ...args);
        } catch (err) {
          lastError = err;
          console.warn(`${String(context.name)} failed (attempt ${attempt}/${times})`);
        }
      }
      throw lastError;
    };
  };
}

class ApiClient {
  @retry(3)
  async fetchData(url) {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  }

  @logged
  add(a, b) {
    return a + b;
  }
}

await new ApiClient().fetchData("/api/flaky"); // retried up to 3 times

// Production wiring (the "composition root")
const service = new UserService({
  repo: new PostgresUserRepo(db),
  mailer: new SendGridMailer(apiKey),
});

// Test wiring — no database, no network
const sent = [];
const testService = new UserService({
  repo: { create: async (d) => ({ id: 1, ...d }) },
  mailer: { send: async (to, msg) => sent.push({ to, msg }) },
});
await testService.register({ email: "a@b.com" });
console.log(sent); // [{ to: "a@b.com", msg: "Welcome!" }]

class ObjectPool {
  #free = [];

  constructor(create, reset, initialSize = 0) {
    this.create = create;
    this.reset = reset;
    for (let i = 0; i < initialSize; i++) this.#free.push(create());
  }

  acquire() {
    return this.#free.pop() ?? this.create(); // reuse if possible, otherwise make one
  }

  release(obj) {
    this.reset(obj);       // clean it so no old state leaks into the next user
    this.#free.push(obj);
  }

  get available() {
    return this.#free.length;
  }
}

const particles = new ObjectPool(
  () => ({ x: 0, y: 0, vx: 0, vy: 0, life: 0 }),
  (p) => Object.assign(p, { x: 0, y: 0, vx: 0, vy: 0, life: 0 }),
  500,
);

function spawn(x, y) {
  const p = particles.acquire();
  Object.assign(p, { x, y, vx: Math.random() - 0.5, vy: -1, life: 60 });
  return p;
}
// when p.life hits 0: particles.release(p)

Array.prototype.myMap = function (callbackFn, thisArg) {
  if (typeof callbackFn !== "function") {
    throw new TypeError(`${callbackFn} is not a function`);
  }

  const len = this.length;
  const result = new Array(len);

  for (let k = 0; k < len; k++) {
    // Skip holes in sparse arrays, like the real map does
    if (Object.hasOwn(this, k)) {
      result[k] = callbackFn.call(thisArg, this[k], k, this);
    }
  }
  return result;
};

[1, 2, , 4].myMap((i) => i * i); // [1, 4, <empty>, 16]

Array.prototype.myFilter = function (callbackFn, thisArg) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (Object.hasOwn(this, i) && callbackFn.call(thisArg, this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

Array.prototype.myReduce = function (callbackFn, ...initial) {
  let i = 0;
  let acc;

  if (initial.length) {
    acc = initial[0];
  } else {
    while (i < this.length && !Object.hasOwn(this, i)) i++; // first real element
    if (i >= this.length) throw new TypeError("Reduce of empty array with no initial value");
    acc = this[i++];
  }

  for (; i < this.length; i++) {
    if (Object.hasOwn(this, i)) acc = callbackFn(acc, this[i], i, this);
  }
  return acc;
};

[1, 2, 3, 4].myFilter((n) => n % 2 === 0);  // [2, 4]
[1, 2, 3, 4].myReduce((a, b) => a + b);     // 10
[].myReduce((a, b) => a + b, 0);            // 0

export default function compose(...fns) {
  return function (value) {
    let result = value;
    for (let i = fns.length - 1; i >= 0; i--) {
      result = fns[i](result);
    }
    return result;
  };
}

const add1 = (num) => num + 1;
const double = (num) => num * 2;
const subtract10 = (num) => num - 10;

const composedFn = compose(subtract10, double, add1);
composedFn(3); // (3 + 1) * 2 - 10 = -2

function promiseAll(iterable) {
  return new Promise((resolve, reject) => {
    const items = Array.from(iterable);
    const results = new Array(items.length);
    let remaining = items.length;

    if (remaining === 0) return resolve([]);

    items.forEach((item, index) => {
      // Promise.resolve handles plain values and thenables too
      Promise.resolve(item).then((value) => {
        results[index] = value;          // keep the original order
        if (--remaining === 0) resolve(results);
      }, reject);                        // first rejection wins
    });
  });
}

await promiseAll([1, Promise.resolve(2), new Promise((r) => setTimeout(() => r(3), 100))]);
// [1, 2, 3]

function memoize(fn, keyFn = (...args) => JSON.stringify(args)) {
  const cache = new Map();
  return function (...args) {
    const key = keyFn(...args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const slowSquare = (n) => {
  for (let i = 0; i < 1e8; i++); // pretend this is expensive
  return n * n;
};
const fastSquare = memoize(slowSquare);
fastSquare(9); // slow the first time
fastSquare(9); // instant

// Recursive memoization: make the recursive calls go through the memoized version
const fib = memoize((n) => (n < 2 ? n : fib(n - 1) + fib(n - 2)));
fib(50); // 12586269025, instantly (the naive version makes ~40 billion calls)

class InMemoryCache {
  constructor(ttl = 20_000) {
    this.ttl = ttl;
    this.cache = {};
  }

  set(key, value) {
    if (this.cache[key]) {
      clearTimeout(this.cache[key].timeoutId); // replacing a key resets its timer
    }

    const timeoutId = setTimeout(() => {
      delete this.cache[key];
    }, this.ttl);

    this.cache[key] = {
      value,
      expiresAt: Date.now() + this.ttl,
      timeoutId,
    };
  }

  get(key) {
    const entry = this.cache[key];
    if (!entry) return null;
    if (entry.expiresAt > Date.now()) return entry.value;
    delete this.cache[key];
    return null;
  }
}

module.exports = InMemoryCache;

class Cache {
  constructor(ttl = 20_000) {
    this.ttl = ttl;
    this.cache = new Map();
  }

  set(key, value) {
    this.cache.set(key, { value, expiresAt: Date.now() + this.ttl });
  }

  get(key) {
    const entry = this.cache.get(key);
    if (!entry) return undefined;

    if (Date.now() >= entry.expiresAt) {
      this.cache.delete(key);
      return undefined;
    }
    return entry.value;
  }
}

class LRUCache {
  #map = new Map();

  constructor(capacity) {
    this.capacity = capacity;
  }

  get(key) {
    if (!this.#map.has(key)) return -1;
    const value = this.#map.get(key);
    this.#map.delete(key);   // move to the "most recent" end
    this.#map.set(key, value);
    return value;
  }

  put(key, value) {
    this.#map.delete(key);
    this.#map.set(key, value);
    if (this.#map.size > this.capacity) {
      const oldestKey = this.#map.keys().next().value;
      this.#map.delete(oldestKey);
    }
  }
}

const lru = new LRUCache(2);
lru.put("a", 1);
lru.put("b", 2);
lru.get("a");    // 1 — "a" is now most recent
lru.put("c", 3); // evicts "b"
lru.get("b");    // -1

class Stack {
  #items = [];

  push(item) {
    this.#items.push(item);
    return this;
  }

  pop() {
    if (this.isEmpty()) throw new Error("Stack underflow");
    return this.#items.pop();
  }

  peek() {
    return this.#items.at(-1); // undefined if empty
  }

  isEmpty() {
    return this.#items.length === 0;
  }

  get size() {
    return this.#items.length;
  }
}

const s = new Stack().push(1).push(2).push(3);
s.peek();    // 3
s.pop();     // 3
s.size;      // 2
s.isEmpty(); // false

function isBalanced(str) {
  const pairs = { ")": "(", "]": "[", "}": "{" };
  const stack = [];
  for (const ch of str) {
    if ("([{".includes(ch)) stack.push(ch);
    else if (ch in pairs && stack.pop() !== pairs[ch]) return false;
  }
  return stack.length === 0;
}

isBalanced("{[()]}"); // true
isBalanced("([)]");   // false

// 1. split / map / join
const capitalize = (str) =>
  str
    .split(" ")
    .map((word) => (word ? word[0].toUpperCase() + word.slice(1) : word))
    .join(" ");

// 2. Regex: \b\w matches the first letter of each word
const capitalize2 = (str) => str.replace(/\b\w/g, (ch) => ch.toUpperCase());

// 3. Title case: also lowercase the rest
const titleCase = (str) =>
  str.toLowerCase().replace(/(^|\s)\S/g, (m) => m.toUpperCase());

capitalize("hi how Are you"); // "Hi How Are You"
titleCase("hI hOW aRE yOU");  // "Hi How Are You"

function stringify(value) {
  if (value !== null && typeof value?.toJSON === "function") {
    value = value.toJSON();
  }

  if (value === null) return "null";

  switch (typeof value) {
    case "string":
      return `"${value
        .replace(/\\/g, "\\\\")
        .replace(/"/g, '\\"')
        .replace(/\n/g, "\\n")
        .replace(/\r/g, "\\r")
        .replace(/\t/g, "\\t")}"`;
    case "number":
      return Number.isFinite(value) ? String(value) : "null";
    case "boolean":
      return String(value);
    case "bigint":
      throw new TypeError("Do not know how to serialize a BigInt");
    case "undefined":
    case "function":
    case "symbol":
      return undefined; // caller decides: skip (object) or "null" (array)
  }

  if (Array.isArray(value)) {
    return `[${value.map((item) => stringify(item) ?? "null").join(",")}]`;
  }

  const props = Object.keys(value)
    .map((key) => {
      const str = stringify(value[key]);
      return str === undefined ? undefined : `${stringify(key)}:${str}`;
    })
    .filter((p) => p !== undefined);
  return `{${props.join(",")}}`;
}

stringify({ a: 1, b: [true, undefined, "x"], c: undefined, d: new Date(0) });
// '{"a":1,"b":[true,null,"x"],"d":"1970-01-01T00:00:00.000Z"}'

// Recursive, with an optional depth like the real flat()
function flatten(arr, depth = Infinity) {
  return arr.reduce(
    (acc, item) =>
      Array.isArray(item) && depth > 0
        ? acc.concat(flatten(item, depth - 1))
        : acc.concat([item]),
    [],
  );
}

// Iterative with a stack — no recursion limit
function flattenIterative(arr) {
  const stack = [...arr];
  const result = [];
  while (stack.length) {
    const next = stack.pop();
    if (Array.isArray(next)) stack.push(...next);
    else result.push(next);
  }
  return result.reverse();
}

flatten([1, [2, [3, [4]]]]);    // [1, 2, 3, 4]
flatten([1, [2, [3, [4]]]], 1); // [1, 2, [3, [4]]]
flattenIterative([1, [2, [3]]]); // [1, 2, 3]

function deepEqual(a, b) {
  if (Object.is(a, b)) return true; // same reference, or equal primitives (NaN-safe)

  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
    return false;
  }
  if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;

  if (a instanceof Date) return a.getTime() === b.getTime();

  const keysA = Reflect.ownKeys(a);
  const keysB = Reflect.ownKeys(b);
  if (keysA.length !== keysB.length) return false;

  return keysA.every((key) => Object.hasOwn(b, key) && deepEqual(a[key], b[key]));
}

deepEqual({ a: [1, { b: 2 }] }, { a: [1, { b: 2 }] }); // true
deepEqual([1, 2], { 0: 1, 1: 2 });                     // false — different prototypes
deepEqual(NaN, NaN);                                   // true