**Why design patterns matter**
Design patterns are named solutions to recurring design problems. They aren't code you copy — they're a vocabulary. When a colleague says 'this should be an Observer', you both immediately understand the structure without a long explanation.
In JavaScript specifically, many classic OOP patterns have simpler functional equivalents — knowing both lets you choose what's readable for the situation.
**Observer pattern — subscribe/notify**
Observer decouples producers of events from consumers. Producers don't know who is listening; consumers don't know who fires. This is the foundation of DOM events, Node.js EventEmitter, and state management libraries:
```js
class EventEmitter {
constructor() { this._listeners = {}; }
on(event, fn) {
(this._listeners[event] ??= []).push(fn);
}
off(event, fn) {
this._listeners[event] =
(this._listeners[event] || []).filter(l => l !== fn);
}
emit(event, ...args) {
(this._listeners[event] || []).forEach(fn => fn(...args));
}
once(event, fn) {
const wrap = (...a) => { fn(...a); this.off(event, wrap); };
this.on(event, wrap);
}
}
```
**Memory leak warning:** listeners registered with `.on()` keep a reference to the callback. If you attach listeners to a long-lived emitter from a short-lived component (e.g. a React component), you *must* call `.off()` on unmount, otherwise the callback and everything it closes over stays in memory:
```js
// BUG: handler is never removed
class Widget {
mount() { bus.on('data', this.handleData); }
// destroy() is missing — memory leak!
}
// CORRECT:
class Widget {
mount() { bus.on('data', this.handleData); }
destroy() { bus.off('data', this.handleData); }
}
```
**Strategy pattern — swap algorithms at runtime**
```js
class Sorter {
constructor(strategy) { this.strategy = strategy; }
sort(arr) { return this.strategy([...arr]); }
}
const asc = arr => arr.sort((a, b) => a - b);
const desc = arr => arr.sort((a, b) => b - a);
const s = new Sorter(asc);
s.sort([3, 1, 2]); // [1, 2, 3]
s.strategy = desc;
s.sort([3, 1, 2]); // [3, 2, 1]
```
In JavaScript, Strategy is often just 'pass a function as an argument' — no class needed.
Factory, Decorator (HOF + pipe), Command with undo/redo
**Pattern comparison**
| Pattern | Problem it solves | JS idiom |
|---|---|---|
| Observer | Decouple event producers from consumers | `EventEmitter`, `addEventListener` |
| Strategy | Swap algorithm/behaviour at runtime | Pass function as argument |
| Factory | Hide object creation complexity | Function returning object/class |
| Decorator | Add behaviour without modifying original | Higher-order function |
| Command | Encapsulate actions; enable undo/queue | Object with `execute`/`undo` |
| Singleton | One shared instance app-wide | Module-level `const inst = new X()` |
**Functional alternatives — often simpler in JS**
```js
// Strategy — just pass the function:
function process(data, transform) { return transform(data); }
process(data, x => x * 2);
process(data, x => x + 10);
// Decorator — compose with pipe:
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const sanitize = pipe(trim, lowercase, removeSpecialChars);
// Singleton — module itself acts as singleton:
// config.js
export const config = { debug: false, version: '1.0' };
// Everyone who imports config gets the same object
```
**When NOT to use patterns**
- Don't use Observer when a function is called in one place — just call it directly
- Don't use Factory when `new MyClass(arg)` is already readable enough
- Don't use Singleton for stateless utilities — just export functions
- Patterns solve *communication* problems between components, not computation. If you're applying a pattern to a single function, step back — it's probably overkill
**Recognising patterns in the wild**
| You see... | Pattern |
|---|---|
| `.addEventListener` / `.on()` / `.subscribe()` | Observer |
| Function passed as config option | Strategy |
| `createX()` function instead of `new X()` | Factory |
| Function wrapping function (`withX(fn)`) | Decorator |
| `execute()` + `undo()` pair | Command |
| Module-level cached instance | Singleton |
Implement an `EventEmitter` class with three methods: `on(event, listener)` — register a listener; `off(event, listener)` — remove a listener; `emit(event, ...args)` — call all listeners for that event with the given args.
Create a `Sorter` class with a `sort(arr)` method. The sorting algorithm is injected via the constructor as a strategy function. Support at least two strategies: bubble sort and built-in sort. Demonstrate swapping strategies at runtime.
Create a `Checkout` class with a `pay(amount)` method. Three payment strategies: `creditCard`, `paypal`, and `crypto` — each is a function that takes an amount and logs a payment message. The strategy is set via `checkout.setStrategy(fn)`.
const creditCard = amount => console.log(`Charged $${amount} to credit card`);
const paypal = amount => console.log(`Sent $${amount} via PayPal`);
const crypto = amount => console.log(`Transferred $${amount} in BTC`);
class Checkout {
setStrategy(strategy) {
this.strategy = strategy;
}
pay(amount) {
// call this.strategy
}
}
const checkout = new Checkout();
checkout.setStrategy(creditCard);
checkout.pay(50); // Charged $50 to credit card
checkout.setStrategy(paypal);
checkout.pay(30); // Sent $30 via PayPal
Solution
const creditCard = amount => console.log(`Charged $${amount} to credit card`);
const paypal = amount => console.log(`Sent $${amount} via PayPal`);
const crypto = amount => console.log(`Transferred $${amount} in BTC`);
class Checkout {
setStrategy(strategy) {
this.strategy = strategy;
}
pay(amount) {
if (!this.strategy) throw new Error('No payment strategy set');
this.strategy(amount);
}
}
const checkout = new Checkout();
checkout.setStrategy(creditCard);
checkout.pay(50); // Charged $50 to credit card
checkout.setStrategy(paypal);
checkout.pay(30); // Sent $30 via PayPal
checkout.setStrategy(crypto);
checkout.pay(100); // Transferred $100 in BTC
Write a factory function `createShape(type, ...dims)` that creates shape objects. Supported types: `'circle'` (radius), `'rect'` (width, height). Each shape object must have an `area()` method. Throw an error for unknown types.
function createShape(type, ...dims) {
// return shape object based on type
}
const c = createShape('circle', 5);
console.log(c.area().toFixed(2)); // 78.54
const r = createShape('rect', 4, 3);
console.log(r.area()); // 12
createShape('triangle', 3, 4, 5); // Error: Unknown shape: triangle
Solution
function createShape(type, ...dims) {
switch (type) {
case 'circle': {
const [r] = dims;
return { type: 'circle', area: () => Math.PI * r * r };
}
case 'rect': {
const [w, h] = dims;
return { type: 'rect', area: () => w * h };
}
default:
throw new Error(`Unknown shape: ${type}`);
}
}
const c = createShape('circle', 5);
console.log(c.area().toFixed(2)); // 78.54
const r = createShape('rect', 4, 3);
console.log(r.area()); // 12
Write a `withLogging(fn)` decorator that wraps any function. Before calling the original, log `'Calling <fn.name> with <args>'`. After it returns, log `'<fn.name> returned <result>'`. Return a new function with the same signature.
function withLogging(fn) {
return function(...args) {
// log before call
// call fn
// log after
// return result
};
}
function add(a, b) { return a + b; }
const loggedAdd = withLogging(add);
loggedAdd(2, 3);
// Calling add with 2,3
// add returned 5
Solution
function withLogging(fn) {
return function(...args) {
console.log(`Calling ${fn.name} with ${args}`);
const result = fn(...args);
console.log(`${fn.name} returned ${result}`);
return result;
};
}
function add(a, b) { return a + b; }
const loggedAdd = withLogging(add);
loggedAdd(2, 3);
// Calling add with 2,3
// add returned 5
Write a `memoize(fn)` decorator that caches results by arguments. On repeated calls with the same args, return the cached value without re-running `fn`. Use a `Map` for the cache. Test with a slow `factorial` that logs when it actually runs.
function memoize(fn) {
const cache = new Map();
return function(...args) {
// check cache, compute if miss, store and return
};
}
function factorial(n) {
console.log(`Computing factorial(${n})`);
return n <= 1 ? 1 : n * factorial(n - 1);
}
const memoFactorial = memoize(factorial);
console.log(memoFactorial(5)); // logs Computing 5..1, returns 120
console.log(memoFactorial(5)); // no 'Computing' logs — cached
console.log(memoFactorial(3)); // logs Computing 3..1
Solution
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(...args);
cache.set(key, result);
return result;
};
}
function factorial(n) {
console.log(`Computing factorial(${n})`);
return n <= 1 ? 1 : n * factorial(n - 1);
}
const memoFactorial = memoize(factorial);
console.log(memoFactorial(5));
console.log(memoFactorial(5)); // cached, no Computing logs
Implement a `Logger` singleton using the ES module pattern. The module exports a single `logger` instance. All importers should share the same instance — logged messages accumulate across calls. Show that calling `logger.log()` from two different 'files' adds to the same log.
// logger.js
class Logger {
constructor() {
this.messages = [];
}
log(msg) {
this.messages.push(msg);
console.log(`[LOG] ${msg}`);
}
getAll() { return this.messages; }
}
export const logger = new Logger(); // single instance
// fileA.js
import { logger } from './logger.js';
logger.log('Event from A');
// fileB.js
import { logger } from './logger.js';
logger.log('Event from B');
console.log(logger.getAll()); // ['Event from A', 'Event from B']
Solution
// logger.js
class Logger {
constructor() { this.messages = []; }
log(msg) { this.messages.push(msg); console.log(`[LOG] ${msg}`); }
getAll() { return this.messages; }
}
export const logger = new Logger();
// In Node.js or bundled code, both imports return the same object.
// Simulating two files in one script:
const logger1 = { messages: [], log(m) { this.messages.push(m); }, getAll() { return this.messages; } };
const logger2 = logger1; // same reference
logger1.log('Event from A');
logger2.log('Event from B');
console.log(logger1.getAll()); // ['Event from A', 'Event from B']
Write a `compose(...fns)` function that returns a new function applying the given functions right-to-left. Then use it to build a text pipeline: `trim` -> `lowercase` -> `exclaim` (add `!`). Composing these three produces a function that applies all three in sequence.
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const trim = s => s.trim();
const lowercase = s => s.toLowerCase();
const exclaim = s => s + '!';
const process = compose(exclaim, lowercase, trim);
console.log(process(' Hello World ')); // hello world!
Solution
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const trim = s => s.trim();
const lowercase = s => s.toLowerCase();
const exclaim = s => s + '!';
const process = compose(exclaim, lowercase, trim);
console.log(process(' Hello World ')); // hello world!
// Also try pipe (left-to-right):
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const process2 = pipe(trim, lowercase, exclaim);
console.log(process2(' Hello World ')); // hello world!
Create an `EventBus` where events carry typed payloads. `subscribe(type, handler)` — register a handler; `publish(type, payload)` — call all handlers for that type with the payload; `unsubscribe(type, handler)` — remove a handler. Demonstrate with a 'user:login' event carrying `{ userId, name }`.
class EventBus {
constructor() { this._handlers = {}; }
subscribe(type, handler) {
// register handler
}
unsubscribe(type, handler) {
// remove handler
}
publish(type, payload) {
// call all handlers
}
}
const bus = new EventBus();
const onLogin = ({ userId, name }) => console.log(`User ${name} (${userId}) logged in`);
bus.subscribe('user:login', onLogin);
bus.publish('user:login', { userId: 42, name: 'Alice' });
// User Alice (42) logged in
bus.unsubscribe('user:login', onLogin);
bus.publish('user:login', { userId: 99, name: 'Bob' }); // (nothing)
We use necessary cookies to run the site. With your permission, we can also save your site preferences and use analytics and advertising cookies to understand usage and support the project.
Open tools in tabs.Exercises, IDE tools, and trainers stay available as site tabs.
Switch without losing context.Move between explanations, code, and utilities while keeping your place.
Use the sidebar as your map.The left panels hold navigation, settings, files, libraries, and tool controls.
PythonJavaScriptSQLite
One IDE, three practical modes
Python in the browser.Run small scripts, try libraries, and practice API requests without installing anything.
JavaScript for quick experiments.Test browser-friendly code and compare ideas next to your learning materials.
SQLite for data practice.Open the database explorer to inspect tables, write queries, and learn SQL workflows locally.
TopicIDE
Work side by side with split tabs
Keep instructions visible.Open an exercise or reference page beside the IDE instead of jumping back and forth.
Compare tools while you learn.Place regex checks, explanations, and code experiments next to each other when the task needs it.
Close the split when you are done.The workspace returns to a single focused tab, and your open site tabs remain available.
Code Typing Trainer
Or plain text
This trainer is designed for a physical keyboard.Open this section on a laptop or desktop with a wide screen. Touch typing practice will not work correctly on a phone.
Speed: 0 chars/min
0 words/min
Best speed (60s): 0 chars/min
0 words/min
Errors: 0
Total time: 0.0 s
To practice touch typing, avoid looking at your physical keyboard.