🛠️

JS Drills & TypeScript

Sharpen your JavaScript with quickfire drills, untangle the famous quirks (== vs ===, hoisting, this, NaN), then graduate to TypeScript: types, interfaces, narrowing, and generics that make your code self-documenting.

Prerequisites:⚙️Function Factory

Warm-Up: Variables & Math Drills

Shake off the rust. Quickfire drills on const, let, template literals, and arithmetic to build muscle memory before we go deeper.

String & Array Drills

Rapid composition of slice, split, join, map, filter, and find. The methods you reach for every day in real codebases.

Function Drills

Switch between declarations, arrows, defaults, rest, and higher-order patterns until they feel automatic.

Classes & Inheritance Drills

Use classes to bundle state with behaviour. Constructors, methods, static, getters, inheritance, and private fields with #.

Maps & Sets Drills

When to reach for Map and Set instead of {} and []. Object keys, dedupe, ordered iteration, and a tiny groupBy.

Modern JS Features Drills

Optional chaining, nullish coalescing, destructuring, spread, Object.entries, JSON, and try/catch — the features in every real codebase.

== vs === and the Coercion Trap

The infamous coercion table, why == is dangerous, the two legitimate uses, and how Object.is differs from === at the corners.

NaN, null vs undefined, and Number Precision

The three small-but-everywhere quirks: NaN is not equal to itself, null vs undefined have different meanings, and 0.1 + 0.2 isn't 0.3.

Reference vs Value & The Const Mutation Trap

Why arr.push works on a const array, why two equal-looking objects aren't ===, and the immutable update pattern React relies on.

Hoisting, Closures, and the this Mystery

The famous var-in-loop bug, closures as private state, and why this means different things in regular vs arrow functions.

Why TypeScript? Basic Types

What TypeScript adds, why VSCode and Slack are written in it, and how to annotate the basics: string, number, boolean, arrays, objects, and function signatures.

Interfaces vs Type Aliases

Define object shapes with interface and type. When to use which, plus optional, readonly, extends, and intersections.

Unions & Narrowing

Model values that can be one of several shapes with union types, then narrow them with typeof and discriminated unions.

Generics: Reusable Types

<T> for reusable types. Generic functions, generic classes, and constraining generics with extends.

Capstone: Typed Todo Engine

Combine classes, Maps, closures, immutable updates, interfaces, unions, and generics into a complete in-memory todo store.

Codelab: Typed Budget Tracker

Build a real budget tracker on your own machine in plain HTML + TypeScript. Uses the in-browser TS compiler from a CDN — no install, no npm, no build tools.