101 — THINK in Code: Hard Parts of JavaScript (closures to LibUV)

Video: 101 · Learn how to THINK in code – The Hard & Conceptual Parts of JavaScript (Full Course) · watch · ~4:40:36 · freeCodeCamp.org, JavaScript internals compilation

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path, module 00 (foundations) — the JavaScript-prerequisite companion to 027 and 030. No TypeScript syntax at all: this is the runtime mental model TypeScript later constrains — scope, execution context, prototypes, the event loop, and Node.js.

the one idea: an engineering-grade mental model

A compilation of deep-dive JavaScript concept lessons aimed at building an “engineering-grade mental model” of the language. Thesis: TypeScript’s constraints only make sense once the runtime behavior underneath is understood — every section here is something TypeScript later types, narrows, or forbids.

scope and closures: the loop-variable trap

Child scopes see parents, not vice versa; closures keep outer references alive — the power and the classic pitfall in one lesson. The for-loop var trap (every closure printing the final i) is the reason let exists, and the reason TypeScript code prefers it:

var num1 = 2;
var num2 = 3;
var num = 6;
function sum() {
	return function () {
		return num1;
	};
}
var myFunc = sum();

execution context and hoisting

The interpreter model: a global execution context is created whether or not the file has code. Function definitions hoist while execution order still surprises — the trace-through of one()/two()/three() calls shows why declaration order and call order are different things.

prototypes, this, classes

Constructor functions and prototype traits (the test.prototype inspection), this as the object under construction, and class inheritance sharing common features — the teenager-class and Player-class examples:

class Player {
	constructor(name, age, skill) {
		this.name = name;
		this.age = age;
		this.skill = skill;
	}
}
const ronaldo = new Player("Ronaldo", 35, "Striker");

events and the call stack

Event bubbling through nested form/button listeners, then call-stack mechanics with process-order/add-function traces that explain print order — push, run, pop, in that order, always.

memoization and reducers

Caching repeated computation (calculate runs once no matter the call count), and reduce-style accumulator callbacks — the two performance patterns the later TypeScript sections assume you already reach for.

event loop, workers, LibUV, Node.js

The finale block: off-main-thread helpers, blocking vs non-blocking routes, thread counts — single-threaded JavaScript on a multi-threaded IO backend, with LibUV directing V8 IO tasks and the full request/response lifecycle. The worker-thread demo (worker has started working) makes “non-blocking” concrete instead of slogan.

Prev: 100 — The TypeScript Course for JS Devs · Next: 102 — Modern JavaScript Full Beginner Course

The auto-transcript mishears terms; this narrative uses the corrected forms: name1 (not “nam 1”), name (not “Namon”), li list items (not “Ali”), libuv (not “LibbV”).

Watch this before or alongside module 00: 027 teaches JavaScript syntax from zero, 030 is the twelve-minute checklist, and this video is the internals — what the engine does with that syntax. Everything TypeScript adds (block scoping discipline, this typing, class modifiers, async signatures) lands harder with these pictures already in mind.

Whisper mistranscriptions corrected — name1, name, li, libuv. Frame timestamps run ~00:29 (closure code) through ~04:07 (LibUV thread diagram).