030 — 100+ JavaScript Concepts You Need to Know (the 12-minute checklist)

Video: 030 · 100+ JavaScript Concepts you Need to Know · watch · ~12:23 · Fireship (“JavaScript 101” rapid-fire survey; intro to the Fireship.io JS course)

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path, module 00 (foundations). A survey spanning modules 00–04 as a topic index — almost no code is written, only the on-screen one-liners sampled below.

twelve minutes across the whole prerequisite

This is the densest JS-prerequisite survey in the batch: ~12 minutes from Brendan Eich at Netscape to bundlers, touching every layer the path assumes — runtime, types, scope, functions, prototypes, async, modules, DOM, tooling. It names TypeScript explicitly as the static-analysis fix (“you’ve got 99 problems and JavaScript is every single one of them … use TypeScript”). Use it as the module 00–04 topic index and for Fireship’s one-sentence definitions, which are built for recall.

what JavaScript is: ECMAScript, runtimes, interpreted scripting

JavaScript was created at Netscape by Brendan Eich for interactive web pages; the standard implementation is ECMAScript and it is the only code that runs natively in browsers (besides WebAssembly). It is not browser-only: Node.js and Deno run it on servers. As a scripting language it executes on the fly from the devtools console. Framing for learners — “wonderful for beginners, horrible for beginners”: build anything and get hired anywhere, but survive weirdness plus a “dystopian wasteland of frameworks.”

console.log("hi mom!"); // the video's on-screen interpreted-language demo

scope, hoisting, and var weirdness

Lexical environment decides where variables work: global scope (available everywhere), function-local scope (invisible outside), and block scope inside braces — UNLESS the variable uses var, which is not block-scoped and hoists to the function scope. The verdict is blunt: “you don’t want that weirdness in your life.” This is the 30-second version of video 027’s var/let lesson, and the direct setup for TypeScript’s preference for let/const.

let name = "firenode"; // reassignable, block-scoped
const pi = 3.14; // not reassignable, block-scoped
// var legacy = "hoisted"; // function-scoped — the weirdness to avoid

functions: first-class objects, higher-order, closures, this

Functions take input and optionally return values; they are objects, so they serve as expressions, variables, arguments, and return values (higher-order functions), and nest to form closures that encapsulate data. The memory model is sketched: primitives live on the call stack (short-term memory); a closure’s outer data persists on the heap so the inner function can reach it after the outer call returns. Then this — the keyword referencing an object based on HOW the function is called — flagged as the thing developers actually trip over.

prototypes, classes-as-sugar, garbage collection

Objects inherit via the prototype chain: every object links to exactly one prototype — real objects in memory, unlike abstract classes in class-based languages. The class keyword (constructor, properties, getters/setters, static) is syntactic sugar over prototypal inheritance. Built-in collections get one line each: Array (indexed), Set (unique), Map (iterable key-value, but always-referenced — hence WeakMap/WeakSet for collectable entries). JavaScript is garbage-collected: unreferenced objects are freed automatically.

Pairs with video 028: Fireship covers prototypes in 60 seconds, ColorCode spends 20 minutes — point learners there for depth.

event loop, callbacks, promises, async/await

Synchronous code runs line-by-line; the event loop lets async work run in a thread pool while the app continues on the single main thread. setTimeout is the minimal demo: a callback queued in the loop, called back later. Over-nesting callbacks is callback hell; the escapes are promises (a wrapper for a future value; .then/.catch for resolve/reject) and async functions that auto-return promises with await pausing execution for readability — wrapped in try/catch for errors.

const greet = (name: string): string => `Hello, ${name}`; // arrow form from the functions beat
setTimeout(() => console.log(greet("mom")), 100); // async callback, called back later

modules, npm, DOM, frameworks, bundlers

Modules keep file code private by default; export/import (default or named) share across files, and npm (node_modules + package.json) shares across developers. In the browser the UI is the DOM tree; document.querySelector / querySelectorAll grab nodes by CSS selector and addEventListener wires events — but hand-rolled DOM code is imperative (“mutate the UI directly”), which is why frameworks produce declarative code where the UI is a function of reactive data bound to components. Shipping needs a bundler (Vite or Webpack); oversized bundles hurt load (network waterfall), fixed by code-splitting with dynamic import(). Node.js on the server unlocks Electron (desktop) and React Native (mobile).

the closer: TypeScript as the fix

The final beat names the course’s own payoff: JavaScript’s problems are enumerable but inescapable in JS alone — “use a tool like TypeScript … that does static analysis to improve your code quality.” The video is itself the intro to a deeper Fireship JS course (projects plus quizzes), so its close doubles as a curriculum pointer.

Prev: 029 — You Don’t Know JavaScript · Next: 031 — Learn TypeScript Generics in 13 Minutes

Only on-screen one-liners are shown here — all exercises live in the referenced Fireship.io course. Transcript corrections: Deno, ESLint, Vite, var. The 1993 creation-year claim is the video’s own as spoken — retained, not silently “fixed."