JavaScript, properly.

Most courses jump straight into syntax and skip this — which is exactly why so many self-taught developers can write code that works but can't explain why a bug is happening.

• The call stack and execution context — what happens when a function runs
• Hoisting: why var, function declarations, and function expressions behave differently
• The two-pass way the engine reads your file before running it

console.log(a); // undefined, not an error — why?
var a = 5;

sayHi(); // works — function declarations are fully hoisted
function sayHi() { console.log("hi"); }

sayBye(); // TypeError — sayBye is not a function
var sayBye = function() { console.log("bye"); };

“Just use ===” is advice you can follow without understanding. This stage makes sure you know the actual coercion rules underneath it.

• Primitives vs. reference types — what “copied by value” means for objects and arrays
• Type coercion rules for +, -, and equality — not just that they exist, but why
• Template literals, and the real difference between == and ===

console.log(1 + "1");   // "11" — number coerced to string
console.log("5" - 1);   // 4   — string coerced to number
console.log([] + []);   // ""  — both arrays stringify to empty
console.log(0 == "0");  // true  — coercion kicks in
console.log(0 === "0"); // false — no coercion, different types

Closures are usually taught as “a function remembers its outer variables,” which is true and useless until you build something that only works because of it.

• Function declarations vs. expressions vs. arrow functions — and where this differs
• Lexical scope and closures: what's actually being “remembered,” and why
• Higher-order functions: functions that take or return other functions

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
// The returned function "closes over" timer —
// every call shares that same variable, across calls.

Almost every real frontend task is “I have data shaped like X, I need it shaped like Y.” This stage makes that fast instead of painful.

• map / filter / reduce / find — and when reduce is the wrong tool
• Destructuring, spread/rest, and shallow vs. deep copy pitfalls
• Grouping, sorting, and flattening nested data

const orders = [
  { city: "Pune", amount: 450 },
  { city: "Delhi", amount: 900 },
  { city: "Pune", amount: 220 },
];

const byCity = orders.reduce((acc, order) => {
  acc[order.city] = (acc[order.city] || 0) + order.amount;
  return acc;
}, {});
// { Pune: 670, Delhi: 900 }

Everyone eventually reaches for a framework — but if you've never manipulated the real DOM by hand, you won't understand what the framework is doing for you.

• DOM traversal and manipulation without a framework
• Event delegation, and why it matters once a list can grow
• Accessible forms — labels, focus states, keyboard navigation

// Bad: one listener per card — breaks for cards added later
document.querySelectorAll(".card").forEach(card =>
  card.addEventListener("click", handleClick)
);

// Good: one listener on the parent, works for future cards too
document.querySelector(".board").addEventListener("click", (e) => {
  const card = e.target.closest(".card");
  if (card) handleClick(card);
});

Async/await hides the event loop from you — which is great, until a bug forces you to understand it anyway. This stage builds it the historical way so the “why” sticks.

• Callbacks → Promises → async/await, and why each one exists
• The event loop: microtasks vs. macrotasks (where most developers stay fuzzy)
• fetch, and error handling with try/catch

console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");

// Output: 1, 4, 3, 2
// Sync code first, then microtasks (Promises),
// then macrotasks (setTimeout) — even at 0ms.

This is the stage that makes every tutorial you've seen with a vite.config.js or a package.json actually make sense, instead of being magic you copy.

• ES modules — import / export, default vs. named
• npm, package.json, and what a bundler like Vite is actually doing
• Environment variables, and the real difference between browser and Node

// math.js
export function add(a, b) { return a + b; }
export const PI = 3.14159;

// main.js
import { add, PI } from "./math.js";
console.log(add(2, PI));

class syntax hides the prototype chain underneath it. Understanding what it compiles to is what lets you debug this-binding bugs instead of guessing.

• The prototype chain — what class actually is under the hood
• The four rules of this binding: implicit, explicit, new, arrow
• call, apply, and bind

const user = {
  name: "Asha",
  greet() { console.log(`Hi, I'm ${this.name}`); },
};

const greetFn = user.greet;
greetFn();          // "Hi, I'm undefined" — lost its binding
user.greet();        // "Hi, I'm Asha" — called as a method
greetFn.call(user);  // "Hi, I'm Asha" — this restored explicitly

This is the stage that's usually skipped entirely in beginner paths — and it's the single biggest tell of who's actually shipped production code.

• DevTools: breakpoints, conditional breakpoints, the network and performance tabs
• Writing unit tests with Vitest
• The TDD mindset — write the failing test first

import { it, expect } from "vitest";
import { debounce } from "./debounce.js";

it("only calls fn once after rapid calls", async () => {
  let count = 0;
  const fn = debounce(() => count++, 100);
  fn(); fn(); fn();
  await new Promise(r => setTimeout(r, 150));
  expect(count).toBe(1);
});