Master JavaScript Concepts and Debugging

JavaScript Mastery covers 33+ essential JavaScript concepts across seven areas, inspired by the 33-js-concepts project: fundamentals (the 7 primitive types, implicit type coercion, and the 8 falsy values - false, 0, -0, 0n, "", null, undefined, NaN, plus the historical typeof null === "object" bug), scope and closures (function/block scope, var/let/const differences, closures as functions that remember their lexical scope - used for the module pattern, function factories, partial application, and memoization), functions and execution (call stack behavior including stack overflow, variable/function hoisting and the temporal dead zone, and how this resolves differently across object methods, arrow functions, and explicit .call()/.apply()/.bind()).

Use it when explaining JavaScript concepts, debugging tricky JS behavior, teaching fundamentals, or reviewing code for JS best practices. The event loop section is a classic gotcha:

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

// Output: 1, 4, 3, 2
// Why? Microtasks (Promises) run before macrotasks (setTimeout)

The execution order is always: synchronous code, then microtasks (Promise callbacks, queueMicrotask), then macrotasks (setTimeout, setInterval, I/O). This underlies callbacks (error-first convention, and the callback-hell anti-pattern to avoid), Promises (.then/.catch/.finally, and the four combinators Promise.all/allSettled/race/any), and async/await including parallel execution via Promise.all.

Functional programming concepts: higher-order functions (taking or returning functions), pure functions (same input → same output, no side effects, no external-state dependency), map/filter/reduce with method chaining, and currying/composition (curry, compose, pipe). Objects and prototypes cover prototypal inheritance via Object.create and its ES6-class syntactic sugar, plus Object.keys/values/entries, shallow copying via spread or Object.assign, and immutability via Object.freeze (fully locked) versus Object.seal (no add/delete, but existing properties remain mutable). Modern ES6+ syntax covers array/object destructuring with renaming and defaults, spread/rest, named/default/dynamic module imports and exports, and optional chaining (?.) paired with nullish coalescing (??) - which, unlike ||, only falls back on null/undefined rather than every falsy value (so 0 ?? 'default' stays 0).

A quick-reference card distills the highest-value rules: always use === over ==, prefer let/const over var, remember microtasks run before macrotasks, and use ?? over || when zero or empty string are valid values. Further reading links to javascript.info, the MDN JavaScript Guide, and You Don't Know JS.

Developers who need a concrete, example-driven reference for JavaScript's trickier behaviors - coercion, hoisting, this binding, the event loop, and ES6+ syntax - whether explaining a concept, debugging unexpected output, or reviewing code for idiomatic patterns. Common equality gotchas are called out explicitly too: Object.is(NaN, NaN) is true even though NaN === NaN is false, and Object.is(-0, 0) is false even though -0 === 0 is true - edge cases that loose (==) and strict (===) equality both get wrong in different ways.