← All lessons
JavaScript
All JavaScript snippets · 200
Every snippet has its own focus page with an explanation and the output it produces.
Variables · 5
- let vs constlet allows reassignment; const binds the variable permanently to its initial value.
- const configconst for values that never change, let for counters or state that updates over time.
- const mutationconst prevents reassignment of the variable itself, but the object it points to is still mutable.
- var hoistingvar declarations are hoisted to the top of their function scope and initialized as undefined.
- var scope leakvar ignores block scope like if/for, while let and const are confined to their block.
Types · 5
- typeof operatortypeof is the primary way to check a value's type, but null and arrays are known gotchas.
- typeof nulltypeof null returns 'object' which is a JavaScript bug kept for backwards compatibility — always use === null instead.
- implicit coercionJavaScript converts types automatically in arithmetic — + with a string causes string concatenation, while -, *, / convert to numbers.
- loose equality== performs type coercion before comparing — use === to avoid surprising results.
- explicit conversionAlways convert types explicitly when combining user input (strings) with numbers to avoid concatenation instead of addition.
Operators · 7
- strict equalityStrict equality === never coerces types; always prefer it over == to write predictable comparisons.
- logical operators&& returns the first falsy or last value; || returns the first truthy or last value — used heavily for defaults.
- nullish coalescing?? differs from || by only treating null and undefined as missing — 0, '', and false are valid values.
- nullish defaults?? lets 0 and false be valid config values while still providing fallbacks for truly missing options.
- optional chaining?. short-circuits to undefined instead of throwing when a property doesn't exist on null or undefined.
- nested accessCombining ?. with ?? gives a clean way to safely read nested data and fall back to a default without if-chains.
- logical assignmentLogical assignment operators combine a logical check with assignment, useful for initializing or updating values conditionally.
Conditionals · 4
- if/else chainif/else if chains evaluate conditions top to bottom and execute the first matching block.
- ternary operatorThe ternary operator is best for simple inline decisions that return a value.
- switch statementswitch cases fall through to the next unless broken — useful when multiple values share the same outcome.
- switch fallthroughWithout break, execution falls through into the next case — often a bug but sometimes intentional.
Loops · 6
- for loopThe for loop gives full control over initialization, condition, and increment.
- for...of loopfor...of works on any iterable (arrays, strings, maps, sets) and gives the value directly without needing an index.
- for...in loopfor...in iterates the enumerable property keys of an object, not values directly.
- for...in arraysfor...in on an array gives string index keys not values — use for...of for arrays to avoid this trap.
- while loopsdo-while always runs the body at least once; while may never run if the condition starts false.
- break/continuebreak stops the entire loop; continue jumps to the next iteration skipping remaining statements in the current one.
Functions · 18
- function hoistingFunction declarations are hoisted completely — you can call them before they appear in the source.
- function expressionsFunction expressions are assigned at runtime — they cannot be called before their definition like declarations can.
- arrow functionsArrow functions with a single expression implicitly return it — wrap objects in () to distinguish from a block body.
- arrow thisArrow functions inherit 'this' from their enclosing lexical scope — never use them as object methods that need 'this'.
- default paramsDefault parameters activate only when the argument is undefined — not when it is null or 0.
- rest paramsRest parameters always produce a real array — unlike the old arguments object which is array-like but not an array.
- IIFE patternIIFE (Immediately Invoked Function Expression) creates an isolated scope — the classic pre-module encapsulation pattern.
- higher-order functionsHigher order functions accept or return functions — the foundation of composition, callbacks, and most array methods.
- recursionEvery recursive function needs a base case that stops the recursion — without it you get a stack overflow.
- curryingA curried function collects arguments one at a time and only runs when it has received enough.
- curried pipelineCurried functions become building blocks — each one partially applied creates a new reusable step in a pipeline.
- pipe/composepipe and compose do the same thing in opposite orders — pipe reads like a sequence of steps, compose like nested calls.
- data pipelinepipe makes the data flow readable — each step does one job and passes its result cleanly to the next.
- once functiononce is useful for initialization logic that should only run once — subsequent calls return the cached result silently.
- debouncedebounce collapses rapid calls into one — the function only fires after the user pauses, ideal for search inputs.
- throttlethrottle ensures a function fires at most once per interval — useful for scroll, resize, or mousemove handlers.
- debounce vs throttledebounce waits for silence before firing; throttle fires immediately but caps frequency — they solve different problems.
- generator sendPassing a value to next(value) injects it as the result of the yield expression — enabling two-way communication with a generator.
Scope · 2
Closures · 7
- closure basicsinner retains access to count even after outer has returned — this is a closure.
- closure counterThe returned object methods all share the same closed-over count — exposing controlled mutations on private state.
- var loop bindingvar is function-scoped so all callbacks close over the same variable; let creates a new binding per loop iteration.
- closure factoryEach function returned by makeMultiplier closes over its own factor — closures enable parameterized function generation.
- memoizationThe cache object lives in the closure — subsequent calls with the same args skip the computation entirely.
- partial applicationPartial application fixes some arguments upfront and returns a function waiting for the rest — a practical use of closures.
- private closureFactory functions with closures provide true privacy — unlike class properties, the private variables are physically inaccessible.
Objects · 13
- object literalsObject literals use dot or bracket notation for access — bracket notation is needed for dynamic or special-character keys.
- computed keysComputed keys with [] allow dynamic property names determined at runtime — useful for building objects from variables.
- getters/settersGetters and setters let you add logic to property reads and writes without changing how the API looks to callers.
- object iterationkeys/values/entries return arrays letting you use array methods like map and filter on object data.
- object transformObject.fromEntries combined with entries lets you map or filter objects the same way you would an array.
- Object.freezeFrozen objects silently ignore writes in non-strict mode — use for constants like config objects you never want mutated.
- object spreadSpread copies top-level properties — later keys override earlier ones, but nested objects are still shared by reference.
- shallow copySpread only clones the top level — nested objects remain the same reference, so mutations affect both copies.
- this keywordthis is determined at call time — when you detach a method and call it as a plain function, this is no longer the object.
- this bindingRegular functions in callbacks get their own this (usually undefined in strict mode); arrow functions inherit this from the class.
- ES6 shorthandWhen a variable name matches the key name, you can omit the colon and value — keeps object literals concise.
- Object.createObject.create lets you set a specific prototype without using classes — the base of prototypal inheritance patterns.
- definePropertyProperty descriptors give you fine-grained control over how properties behave — the foundation of how freeze and getters work internally.
Arrays · 17
- array basicsat() accepts negative indices as a clean alternative to arr[arr.length - n] for accessing from the end.
- push/pop/shiftpush/pop work on the end; unshift/shift work on the front — all four mutate the original array.
- array mapmap always returns a new array of the same length — the original is never modified.
- array filterfilter returns a new array containing only the elements for which the callback returns true.
- array reducereduce takes an accumulator and each element — the initial value is the starting accumulator.
- reduce to objectreduce is not just for numbers — it can build objects, maps, or any accumulated structure from an array.
- find/findIndexfind returns the element itself or undefined; findIndex returns the index or -1 if not found.
- some/everyevery short-circuits on the first false; some short-circuits on the first true — both return a boolean.
- array flatflat(1) flattens one level deep; flatMap is map then flat(1) — useful for one-to-many transformations.
- slice/spliceslice returns a new array and never mutates; splice modifies the array in place and returns removed elements.
- array sortWithout a comparator, sort() converts to strings — '10' < '2' alphabetically, so always pass (a, b) => a - b for numbers.
- Array.fromArray.from is the clean way to turn strings, Sets, Maps, and NodeLists into real arrays — the optional map function adds power.
- Array.from dataArray.from with a map function is the cleanest way to generate arrays of computed values without a loop.
- method chainingChaining filter → sort → map reads like a description of what you want — each step passes a new array to the next.
- sort mutationsort, reverse, and splice mutate the original array — always spread or slice first when you want a non-destructive sort.
- reduceRightreduceRight works right to left — directly mirrors how compose applies functions from innermost to outermost.
- destructure loopDestructuring in for...of loops unpacks each element on the fly — much cleaner than accessing [0] and [1] manually.
Destructuring · 6
- array destructureSkip positions with empty commas; collect the rest with ...rest — positional unpacking unlike object destructuring.
- object destructureRename with key: newName and provide fallbacks with key = default — all within the same destructuring pattern.
- nested destructureDeep destructuring can be expressive but quickly becomes hard to read — know when to just use dot notation.
- param destructureDestructuring params with defaults makes function signatures self-documenting and removes the need for options.x inside the body.
- swap variablesArray destructuring on the left side of an assignment is the cleanest way to swap two variables in place.
- iterable destructureAny iterable — strings, Sets, Maps, generators — can be destructured using array destructuring syntax.
Spread · 3
- spread operatorSpreading arrays creates a shallow copy — mutations to the copy don't affect the original for flat arrays.
- spread argsSpreading into a function call replaces the old Function.apply(null, args) pattern with cleaner syntax.
- string spreadSpreading a string creates an array of its characters — combine with Set to get unique characters instantly.
Strings · 4
- string methodsStrings have dozens of built-in methods — includes, startsWith, endsWith are cleaner than indexOf for existence checks.
- trim/split/replacereplace only replaces the first match — use replaceAll or a global regex to replace every occurrence.
- template literalsTemplate literals support any JavaScript expression inside ${} and preserve whitespace and newlines.
- tagged templatesTagged templates give you full control over how a template string is assembled — used in libraries like styled-components and SQL builders.
Numbers · 2
Math · 2
Classes · 8
- class syntaxClasses wrap constructor functions and prototype assignments in a cleaner syntax — under the hood it's still prototypes.
- class extendssuper() must be called in a child constructor before accessing this — it runs the parent's constructor.
- static membersStatic methods and fields are called on the class itself — they don't exist on instances and don't need new.
- private fieldsPrivate class fields with # are enforced by the engine — they cannot be accessed or patched from outside the class.
- fluent chainingReturning this from every mutating method enables fluent chaining — makes the API read like a sentence.
- abstract methodsJavaScript has no abstract keyword — throwing in the base method forces subclasses to override it or crash loudly.
- mixinsMixins compose behavior by wrapping base classes — avoids deep inheritance chains while sharing logic across classes.
- class iterableClasses that implement Symbol.iterator work with for...of, spread, and destructuring — making them feel like native collections.
Prototypes · 2
Error Handling · 6
- try/catchfinally always executes whether or not an error was thrown — ideal for cleanup like closing connections.
- custom errorsCustom error classes let you distinguish error types with instanceof and attach extra context like field names or codes.
- error typesDifferent error types help you identify what went wrong — TypeError for type issues, ReferenceError for missing variables, etc.
- unhandled rejectionAn unhandled promise rejection is a bug — always add .catch() or wrap await in try/catch to handle async failures.
- error causeError cause (ES2022) lets you wrap errors in higher-level errors while preserving the original — making stack traces much more useful.
- Result typeThe Result pattern makes errors visible in return types — callers are forced to handle both cases instead of forgetting try/catch.
Promises · 5
- promise basicsPromises have three states: pending, fulfilled, rejected — once settled they never change state.
- promise chainingEach .then receives the previous return value — if a then throws, execution jumps to the nearest .catch.
- Promise.allPromise.all rejects immediately if any promise rejects — use Promise.allSettled if you want all results regardless.
- Promise.allSettledallSettled never rejects — every result comes back with a status of fulfilled or rejected plus the value or reason.
- race/anyrace takes the first to settle (even rejected); any takes the first to fulfill and only rejects if all fail.
Async/Await · 9
- async/awaitAn async function always returns a Promise — await unwraps it, making async code look and read like synchronous code.
- await errorstry/catch with await works just like synchronous error handling — any rejected promise inside try is caught.
- parallel awaitAwaiting in a loop runs each promise one after another — use Promise.all to run independent async tasks concurrently.
- async generatorsAsync generators combine generators and async/await — use for...await...of to consume them one value at a time.
- lazy paginationAsync generators are perfect for paginated APIs — each page is fetched only when the next iteration is requested.
- retry backoffRetry with exponential backoff is a standard pattern for unstable network calls — doubling the delay reduces server pressure.
- promise timeoutPromise.race with a timeout promise is the standard way to cancel a hanging async operation.
- async methodsAsync methods on classes work exactly like async functions — await can be used inside and they return Promises.
- for await...offor await...of works on any object with [Symbol.asyncIterator] — the standard way to consume streams and async generators.
Generators · 4
- generatorsGenerators execute lazily — each next() call resumes from the last yield until the next one or the function returns.
- generator iterableBecause generators implement the iterator protocol, they work anywhere an iterable is expected — spread, for...of, destructuring.
- infinite generatorInfinite generators are safe because they are lazy — take() breaks out of the loop after pulling only what it needs.
- lazy pipelineGenerator pipelines are entirely lazy — no intermediate arrays are created, and values are computed only as consumed.
Iterators · 2
Map · 3
- Map basicsUnlike plain objects, Maps accept any value as a key (including objects and numbers) and maintain insertion order.
- Map vs ObjectObject keys collide with prototype properties like toString — Map has no such issue and allows any value as a key.
- frequency MapMap preserves insertion order and handles any key type — ideal for frequency counting and histogram building.
Set · 2
Proxy · 4
- proxy getThe get trap fires on every property read — use it to add default values, logging, or validation without changing the source object.
- proxy setThe set trap runs on every property write — perfect for building type-safe or validated data objects without a class.
- proxy loggingA logging Proxy is transparent to the rest of the code — no changes needed to the consumer, yet every access is recorded.
- proxy schemaA validation Proxy enforces rules on writes without exposing validation logic in the rest of the code.
Symbols · 4
- Symbol uniqueSymbols are guaranteed unique primitives — two Symbols with identical descriptions are still not equal to each other.
- Symbol keysSymbol-keyed properties don't show in for...in, Object.keys, or JSON.stringify — useful for attaching private metadata.
- well-known SymbolsWell-known Symbols like Symbol.iterator and Symbol.toStringTag let you hook into language-level behaviors on your own classes.
- Symbol.forSymbol.for() registers Symbols in a global registry — two calls with the same key return the same Symbol unlike Symbol().
Regex · 5
- regex basicstest() checks for a match; match() returns matches; replace() substitutes them — the g flag finds all, not just the first.
- capture groupsCapture groups () let you extract specific parts of a match — index 0 is the full match, 1+ are the groups.
- named groupsNamed capture groups (?<name>...) make your regex self-documenting and let you access parts by name not index.
- regex flagsi=case-insensitive, g=global (all matches), m=multiline (^ matches start of each line) — flags combine freely.
- stateful regexA regex with /g is stateful — it remembers lastIndex between calls. Create a new instance each time or reset lastIndex = 0.
Date · 3
- date basicsMonths are 0-indexed in JavaScript Date — January is 0, December is 11 — always add 1 when displaying.
- date differenceDates are numbers under the hood — subtracting two Date objects gives milliseconds, which you convert to any unit.
- date formatIntl.DateTimeFormat handles locale-aware date formatting — no manual string building needed.
JSON · 3
- JSON basicsJSON.stringify converts objects to strings for storage or transfer; JSON.parse reconstructs them — always returns a deep copy.
- JSON replacerThe replacer filters what gets serialized; the reviver transforms values back — use it to restore Dates, Maps, or sensitive-field stripping.
- JSON limitsJSON only handles strings, numbers, booleans, null, arrays, and plain objects — functions, undefined, and Symbols are silently dropped.
Design Patterns · 7
- observer patternObserver decouples producers from consumers — emitters don't know who's listening, listeners don't know who emits.
- factory patternFactory functions centralize object creation logic — callers just specify what they want, not how it's built.
- singletonThe Singleton pattern ensures shared global state like config or a DB connection is only initialized once.
- strategy patternStrategy replaces conditionals — instead of if-else on algorithm type, you swap in a different function at runtime.
- builder patternBuilder is ideal when object construction needs many optional steps — each step is explicit and the final build() creates the object.
- state machineA finite state machine makes all valid transitions explicit — any illegal event throws instead of causing silent corruption.
- command patternCommand pattern encapsulates each action as an object with execute and undo — making history and undo trivially composable.
Data Structures · 4
- stack LIFOStack's LIFO property is perfect for matching open/close pairs — the last opened must be the first closed.
- queue FIFOQueues process items in arrival order — used in BFS, task schedulers, and message brokers.
- linked listLinked lists use node references instead of contiguous memory — O(1) prepend but O(n) access by index.
- binary search treeBST inorder traversal yields values in sorted order — left subtree is always smaller, right is always larger.
Algorithms · 8
- binary searchBinary search is O(log n) — each comparison eliminates half the remaining candidates. Requires a sorted array.
- merge sortMerge sort is O(n log n) and stable — it divides the array in half recursively, then merges sorted halves back together.
- two pointersTwo pointers from both ends of a sorted array find pairs in O(n) instead of the brute-force O(n²).
- sliding windowSliding window reuses the previous sum by adding the new element and removing the old one — O(n) instead of O(n*k).
- dynamic programmingBottom-up DP builds the answer from smaller subproblems — dp[i] is the minimum coins to make exactly i.
- flatten arrayRecursion handles unknown depth naturally — the base case (non-array) pushes the value, the recursive case digs deeper.
- BFS traversalBFS uses a queue to visit nodes level by level — the first path found to any node is the shortest (in unweighted graphs).
- DFS traversalDFS goes as deep as possible before backtracking — naturally implemented with recursion using the call stack.
Functional Patterns · 6
- immutable updateImmutable updates spread each level — never mutate state directly, always return a new object with the changed parts.
- compose reduceCombining filter and map into one reduce avoids creating an intermediate array — useful when working with large datasets.
- lensesLenses abstract getting and setting nested fields — they are composable and always produce new objects without mutation.
- tap functiontap injects logging or debugging into a pipeline without mutating the value or breaking the chain.
- Maybe monadMaybe prevents null reference errors by wrapping values — map skips the function if the value is null, enabling safe chaining.
- pipe orderpipe applies left to right (first function first); compose applies right to left (last function first) — different results for the same functions.
Performance · 3
- lazy propertiesLazy evaluation defers expensive computation until the value is needed — and caches it so the cost is paid only once.
- object poolObject pools avoid repeated allocation and GC — acquire a pre-made object, use it, then release it back for reuse.
- closure leaksClosures keep the entire outer scope alive — if you close over a large object you no longer need, null it out to allow GC.
Intl · 2
Web APIs · 3
- URL APIThe URL API parses and mutates URLs structurally — safer than string manipulation and handles encoding automatically.
- AbortControllerAbortController is the standard way to cancel pending fetch calls and other async operations in the browser.
- TextEncoderTextEncoder/Decoder convert between strings and Uint8Array bytes — essential for binary protocols, crypto, and WebSockets.