Free JavaScript Advanced Patterns Cheat Sheet Online — Interactive Reference for Developers

JavaScript is a language of remarkable depth disguised behind deceptively simple syntax. The same language that powers alert boxes in 1995 Netscape now drives real-time collaborative editors, serverless edge compute, and streaming media pipelines. Yet the gap between writing console.log and understanding the machinery beneath is vast. Closures, prototypes, the event loop, module systems, Proxy traps, WeakMap privacy, Symbol protocols, iterators, generators, and design patterns — these are not academic curiosities. They are the tools that separate scripts that work from systems that scale.

That is why we built the free interactive JavaScript Advanced Patterns Cheat Sheet. It is designed with a distinctive mechanical aesthetic — The Gearwork Cathedral — featuring deep charcoal-black backgrounds, rotating brass gear decorations, precision-machined card borders, and a central forge-glow radiating from the header. Every entry sits on a dark steel panel card with a category-colored left border: Brass Gear for closures, Cobalt Blue for prototypes, Crankshaft Red for the event loop, Galvanized Silver for modules, Arcane Violet for Proxy, Oxidized Copper for WeakMap, Spark Gold for Symbols, Flywheel Amber for iterators, and Iron Gray for design patterns. Real-time search, category tabs, syntax highlighting, and one-click copy make it effortless to find and use every pattern. Everything runs client-side in your browser — no data ever leaves your machine.

Skip ahead: If you want to explore the tool while reading, open the JavaScript Advanced Patterns Cheat Sheet in another tab. Use it to test the code examples in this article in real time.

Closures and Lexical Scope: The Foundation of JavaScript Privacy

A javascript closure is a function that remembers the variables from its outer scope even after the outer function has returned. This is possible because JavaScript uses lexical scoping — a function's scope chain is determined by where it was written in the source code, not where it is called.

Closures are the foundation of data privacy in JavaScript. Before private class fields (#field) existed, developers used closures to create truly private variables that were inaccessible from outside the function. The module pattern, factory functions, partial application, currying, and memoization all depend on closures.

IIFE and the Module Pattern

Before ES modules, the javascript iife (Immediately Invoked Function Expression) was the standard way to create a private scope. An IIFE runs as soon as it is defined, creating a closure that hides internal variables from the global scope.

const myModule = (function() {
  let count = 0;
  function log() { console.log('Count:', count); }
  return {
    increment: () => { count++; log(); },
    decrement: () => { count--; log(); }
  };
})();

This pattern was the backbone of libraries like jQuery and early module systems. Today, ES modules and private class fields have largely replaced the IIFE module pattern, but understanding it remains essential for reading legacy code.

Currying and Partial Application

Javascript currying transforms a function with multiple arguments into a sequence of functions that each take a single argument. Javascript partial application fixes a number of arguments to a function, producing another function of smaller arity. Both patterns rely on closures to capture the fixed arguments.

const curry = fn => function curried(...args) {
  return args.length >= fn.length
    ? fn.apply(this, args)
    : (...next) => curried(...args, ...next);
};
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

These patterns are the building blocks of functional programming in JavaScript and are widely used in libraries like Lodash/fp and Ramda.

Memoization

Javascript memoization caches the results of expensive function calls and returns the cached result when the same inputs occur again. It is essential for dynamic programming and recursive algorithms.

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

Prototypes and Inheritance: The Object Model Beneath class

The class keyword in JavaScript is syntactic sugar over javascript prototypes. Every object has an internal [[Prototype]] link. When a property is accessed, JavaScript walks up this chain until it finds the property or reaches null. Understanding this model is critical for debugging, performance optimization, and library design.

The Prototype Chain

Javascript prototype chain lookup is the mechanism behind inheritance. Object.create() creates a new object with a specified prototype. Object.setPrototypeOf() changes the prototype of an existing object (though it deoptimizes modern engines and should be avoided in hot paths).

const animal = { eats: true };
const rabbit = { jumps: true };
Object.setPrototypeOf(rabbit, animal);
console.log(rabbit.eats); // true (inherited)

Constructor Functions and class Syntax

Before ES6, constructor functions combined with new created objects and set their prototype automatically. The class syntax introduced in ES6 provides a cleaner syntax but does not change the underlying prototype-based model.

class Animal {
  constructor(name) { this.name = name; }
  speak() { console.log("..."); }
}
class Dog extends Animal {
  speak() { console.log("Woof"); }
}
const d = new Dog("Rex");
d.speak(); // "Woof"

Class methods are non-enumerable and use strict mode automatically. extends sets up the prototype chain, and super() must be called before using this in the child constructor.

instanceof and Property Shadowing

Javascript instanceof checks whether an object is an instance of a constructor by walking the prototype chain. It can be customized with Symbol.hasInstance. Property shadowing occurs when an object defines a property with the same name as one on its prototype, hiding the inherited version.

The Event Loop: Understanding Single-Threaded Concurrency

The javascript event loop is the mechanism that enables single-threaded JavaScript to perform non-blocking I/O. It is the most important concept for writing performant and correct asynchronous code.

Call Stack, Task Queue, and Microtask Queue

The event loop operates on three structures: the call stack (LIFO, tracks currently executing functions), the task queue or macrotask queue (FIFO, holds callbacks from setTimeout, setInterval, I/O), and the microtask queue (FIFO, holds Promise callbacks and queueMicrotask callbacks).

In each iteration, the event loop: (1) executes all synchronous code on the call stack, (2) drains the entire microtask queue, (3) performs rendering updates if needed, and (4) picks one task from the macrotask queue. This explains why javascript microtask callbacks (Promise.then) always run before javascript macrotask callbacks (setTimeout), even with a delay of zero.

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

queueMicrotask and Node.js Specifics

queueMicrotask() explicitly queues a microtask. In Node.js, process.nextTick runs before Promise microtasks, and setImmediate runs after I/O events but before timers. These Node-specific APIs are important for server-side performance tuning.

Module Patterns: From IIFE to ES Modules

JavaScript has evolved through multiple module systems. Understanding javascript module patterns is essential for working with modern and legacy codebases.

ES Modules and CommonJS

Javascript es modules (import/export) are the native module system. They are statically analyzable, enabling tree shaking and dead code elimination. Named exports are live bindings — changes to an exported variable are reflected in importers.

Javascript commonjs (require/module.exports) is the legacy Node.js system. require() is synchronous and returns a snapshot copy of the exported object at the time of require. CommonJS is harder to tree-shake because exports are dynamic.

Dynamic Import and Tree Shaking

Javascript dynamic import loads a module asynchronously at runtime, returning a Promise. It enables code splitting and conditional loading. Javascript tree shaking removes unused exports from bundles, but it only works reliably with ES modules because of their static structure.

async function loadChart() {
  const { Chart } = await import("./chart.js");
  return new Chart();
}

Circular Dependencies

Circular dependencies occur when two or more modules import each other. ES modules handle this by exposing an incomplete module namespace object until execution finishes. The best practice is to avoid circular dependencies by extracting shared logic into a third module.

Proxy and Reflect: Metaprogramming in JavaScript

Javascript proxy objects wrap another object and intercept fundamental operations through "traps." Javascript reflect provides the default implementations of those operations. Together, they enable powerful metaprogramming patterns.

Proxy Traps and Validation

Proxy traps can intercept approximately 13 different operations: get, set, has, deleteProperty, defineProperty, getOwnPropertyDescriptor, ownKeys, getPrototypeOf, setPrototypeOf, apply, construct, preventExtensions, and isExtensible.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    if (typeof value !== "number") {
      throw new TypeError("Must be a number");
    }
    return Reflect.set(target, prop, value);
  }
});
proxy.count = 5;   // OK
proxy.count = "5"; // TypeError

Observable Objects and Revocable Proxies

Proxies can be used to build observable objects that notify listeners of state changes — the foundation of reactive systems like Vue 3 and MobX. Javascript revocable proxy objects can be permanently disabled, useful for temporary access grants and security boundaries.

const { proxy, revoke } = Proxy.revocable({ secret: 42 }, {
  get(target, prop) { return target[prop]; }
});
revoke();
proxy.secret; // TypeError: proxy has been revoked

WeakMap and WeakSet: Private Data Without Memory Leaks

Javascript weakmap is a collection of key/value pairs where keys must be objects and are held weakly. When the key object is no longer referenced elsewhere, the entry is automatically garbage-collected. This makes WeakMap ideal for attaching private data to objects without preventing their destruction.

const _private = new WeakMap();
class Counter {
  constructor() { _private.set(this, { count: 0 }); }
  increment() { _private.get(this).count++; }
}
// When a Counter instance is GC'd, its private data disappears too

Javascript weakset holds objects weakly and is useful for "visited" tracking in recursive algorithms. Javascript weakref and FinalizationRegistry (ES2021) provide even finer control over object lifetime and cleanup.

Symbols and Well-Known Symbols: Hooking Into Core Behaviors

Javascript symbols are unique, immutable primitive values. They are guaranteed not to collide with string keys and are hidden from for...in, Object.keys(), and JSON.stringify().

Well-Known Symbols

JavaScript defines built-in well-known symbols that allow objects to hook into core language behaviors:

Symbol.iterator — defines the default iterator for for...of and spread
Symbol.asyncIterator — defines the default async iterator for for await...of
Symbol.toPrimitive — controls object-to-primitive conversion
Symbol.hasInstance — customizes instanceof behavior
Symbol.toStringTag — controls Object.prototype.toString output
Symbol.match / replace / search / split — customizes String regex methods

const range = {
  from: 1, to: 5,
  *[Symbol.iterator]() {
    for (let i = this.from; i <= this.to; i++) yield i;
  }
};
console.log([...range]); // [1, 2, 3, 4, 5]

Iterators and Generators: Lazy Sequences and Coroutines

The javascript iterator protocol requires an object to implement a next() method returning { value, done }. The javascript generator function (declared with function*) automatically creates an object that implements both the iterable and iterator protocols.

Generators and yield

Generators lazily produce values on demand, pausing execution at each yield and resuming on next(). yield* delegates to another generator or iterable.

function* countTo(n) {
  for (let i = 1; i <= n; i++) yield i;
}
const gen = countTo(3);
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

Bidirectional Generators

Generators can receive values from the caller via gen.next(value). The value becomes the result of the yield expression. This pattern is called a coroutine.

function* calculator() {
  let result = 0;
  while (true) {
    const op = yield result;
    if (op.type === "add") result += op.value;
  }
}

Async Generators

Javascript async generators (async function*) combine laziness with asynchronous I/O. They are consumed with for await...of.

async function* fetchPages(urls) {
  for (const url of urls) {
    const res = await fetch(url);
    yield await res.text();
  }
}

Design Patterns: Battle-Tested Solutions

The final section of the cheat sheet covers javascript design patterns that have proven their value across decades of software engineering.

Singleton and Factory

The singleton ensures a class has only one instance. The factory creates objects without specifying the exact class. Both are foundational creational patterns.

Observer / PubSub

The observer pattern maintains a list of dependents and notifies them of state changes. It is the foundation of event-driven architecture, DOM events, Node.js EventEmitter, and RxJS.

Debounce and Throttle

Javascript debounce ensures a function is only called after a specified delay has passed since the last invocation. Javascript throttle ensures a function is called at most once per specified interval. Both are essential for performance in UI interactions.

Pipeline and Compose

The pipeline pattern chains functions so the output of one becomes the input of the next. It enables point-free style and is a core functional programming pattern.

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const words = pipe(trim, lower, split);
console.log(words("  Hello World  ")); // ["hello", "world"]

How to Use the Cheat Sheet

Open the JavaScript Advanced Patterns Cheat Sheet and use the category tabs to browse by topic or the search box to find specific patterns. Every card includes a concise description, a runnable code example with syntax highlighting, and a result explanation. Click "Copy" to copy any code block to your clipboard. Use the tool alongside this article to reinforce your understanding.