Click any code to copy it
Done 0/0
To review 0
Old way, still asked about
The usual way today
Newer, 2020 or later
The model
- Scope is lexical, set by where code is written. A closure keeps outer variables alive after their function returns.
this is set by how a function is called, not where it's written. Arrow functions take this from the code around them.- Objects inherit through a prototype chain. If an object lacks a property, JavaScript checks each prototype in turn, up to
null. - A variable holds a primitive or a reference to an object. A function gets a copy of that value, never the object itself.
- Code runs on one thread. Async work queues a callback, and the event loop runs it once the call stack is empty.
.then callback beats a zero-delay setTimeout.Variables & types
declare values and check what they holdDeclare variables
Declare a variableconst x = 1let n = 0const can't be reassigned
Declare one the old wayvar x = 1Function-scoped
Use one before its linevar gives undefined, let throws
Traplet and const are hoisted, but can't be read until their line runs. That gap is the temporal dead zone.
Check a value's type
List the 7 primitivesstring, number, bigint, boolean, symbol, null, undefined
Test a value's typetypeof xArray.isArray(x)
Traptypeof null and typeof [] both give "object".
Numbers
Add 0.1 and 0.20.30000000000000004
Store a huge integer123nCan't mix with numbers
TipBinary floats can't store 0.1 exactly. Compare with a small tolerance, and count money in whole cents.
null, undefined and not defined
Read an unassigned variableundefinedJavaScript sets it
Use an undeclared nameReferenceError
Tipnull is empty on purpose. x == null matches it and undefined. typeof is safe on undeclared names.
Equality, coercion and falsy values
Compare strictlya === bBut 5 == "5" is true
Mix a string and a number"5" + 3"5" - 3"53", then 2
List the falsy valuesfalse, 0, -0, 0n, empty string, null, undefined, NaN
Trap[] and {} are truthy. if (!x) also rejects 0 and "".
Functions & scope
closures, this, and functions as valuesWrite a function
Declare a functionfunction f() {}Callable before its line
Assign one to a variableconst f = () => {}Callable only after its line
TrapArrow functions have no this or arguments of their own, and new can't call them.
Scope
Look up a variableBlock, then function, then global, by where it's written
Closures
function counter() { let count = 0;private return () => ++count;closes over count}const next = counter();next(); next(); // 2
Say what a closure keepsIts outer variables, after the outer function returns
TrapTimers in a var loop share one i, so they all log its final value. let gives each pass its own.
The this keyword
Call as a methodobj.f()The object before the dot
Call as a plain functionf()undefined in strict mode, else the global object
Set this yourselff.call(o, a)f.bind(o)f.apply(o, [a])
TrapA method passed as a callback loses this. Pass () => obj.f() instead.
Parameters and arguments
Default a parameterfunction f(x = 1) {}Applies only to undefined
Collect extra argumentsfunction f(...args) {}
Read every argument, old wayargumentsArray-like, and not in arrows
Higher-order functions
Curry a functiona => b => a + b
Compose f after gx => f(g(x))
TipA higher-order function takes or returns a function, like map or bind.
Pure functions and immutability
Spot a pure functionSame input, same output, no side effects
Update without mutating[...arr, x]{ ...obj, a: 1 }
TipFunctional style keeps logic pure and data immutable. The cost is extra copies.
Objects & classes
build objects, share methods, lock them downCreate, read and serialize objects
Create an object{ a: 1 }Object.create(proto)
Read a key from a variableobj[key]Also for keys with spaces
Convert to and from JSONJSON.stringify(obj)JSON.parse(text)
TipJSON.parse throws on bad input. stringify skips functions and undefined in objects.
Copy, compare and pass objects
Copy the top level{ ...obj }
Copy every levelstructuredClone(obj)
Deep copy, the old wayJSON.parse( JSON.stringify(o) )
Compare two objectsa === bSame object only
Compare by contentsShallow checks top-level keys, deep recurses
Pass one to a functionIt gets a copy of the reference
TrapA spread copy shares nested objects with the original.
Prototypes
Read the prototypeObject.getPrototypeOf
Read it the old wayo.__proto__
Trapprototype lives on the constructor. Instances link to it through __proto__ and share its methods.
Classes and the new operator
Define a subclassclass B extends A {}
Write it before ES2015function A(x) { this.x = x; }
Say what new doesMakes an object, links its prototype, runs the constructor
TipClasses are prototypes underneath. They need new and always run in strict mode.
Private fields, getters and flags
Make a field private#count = 0;
Run code on read or writeget total() {}set total(v) {}
TipObject.defineProperty sets flags like writable. Any you leave out are false.
Freeze, seal and preventExtensions
AddDeleteChange
Object.preventExtensionsBlock new keys
Object.sealAlso block deletes
Object.freezeMake it read-only
blockedstill allowed
TrapAll three are shallow, so nested objects can still change.
Map, Set, WeakMap and Symbol
Remove duplicates[...new Set(arr)]
Key data by any valuenew Map()
Make a clash-free keySymbol("id")
TrapA WeakMap drops an entry once its key object is garbage collected. You can't loop over it.
Proxy and Reflect
Intercept property readsnew Proxy(obj, { get })
Run the default in a trapReflect.get(t, k)
Arrays, loops & syntax
loop, transform and unpackArray methods
Transform each itemarr.map(x => x * 2)
Keep matching itemsarr.filter(x => x > 2)
Combine into one valuearr.reduce((a, x) => a + x, 0)
Loop for side effectsarr.forEach(fn)Returns undefined
Copy part of an arrayarr.slice(1, 3)
Remove or insert in placearr.splice(1, 2, x)Returns what it removed
Trapreduce with no start value throws on an empty array.
Loops, iterators and generators
Loop over valuesfor (const x of arr)
Loop over keysfor (const k in obj)
Write a lazy sequencefunction* gen() {}An iterator that pauses at each yield
Trapfor...in on an array gives indexes as strings, and inherited keys too.
Destructuring and spread
Unpack an arrayconst [a, ...b] = arr
Unpack an objectconst { a, b = 1 } = o
Spread into argumentsMath.max(...nums)
Optional chaining and nullish coalescing
Read nested data safelya?.b?.cobj.fn?.()
Default on null or undefinedx ?? 10
Default or guard, old wayx || 10a && a.b
Trap0 || 10 is 10, but 0 ?? 10 keeps the 0.
Template literals
Insert values in a string`Hi ${name}`
Tag a templatetag`Hi ${name}`The tag gets the strings, then the values
Ternary and comma operators
Choose a value inlineok ? "yes" : "no"
Run two updates in one fori++, j--The comma returns the last value
Async & the event loop
promises, await, and what runs whenPredict the event loop
const log = console.log;log(1);syncsetTimeout(() => log(2), 0);taskPromise.resolve().then(() => log(3));microtasklog(4);sync// prints 1, 4, 3, 2
Queue a microtaskqueueMicrotask(fn)
Call stack and execution context
Say the stack's orderLast in, first out. Going too deep throws a RangeError
Name the context typesGlobal, function and eval
Callbacks and promises
Handle async, the old waygetData(cb)Steps nest into callback hell
Create a promisenew Promise((res, rej) => {})
Chain stepsp.then(f).catch(g)
TipA promise settles once. Handlers always run as microtasks.
async/await and Promise.all
Await, and catch a rejectiontry { await p } catch {}
Run in parallel, fail fastPromise.all(ps)
Run in parallel, keep allPromise.allSettled(ps)
TrapAwaiting independent calls one by one adds up their time.
Promise.race and Promise.any
Take the first to settlePromise.race(ps)
Take the first successPromise.any(ps)AggregateError if all fail
Errors & strict mode
make mistakes throw, then catch themThrow and catch errors
Catch and clean uptry {} catch (e) {} finally {}
Name the error typesTypeError, ReferenceError, SyntaxError, RangeError
Make a custom errorclass E extends Error {}Set this.name in it
Traptry only catches rejections you await inside it.
Strict mode
Turn on strict mode"use strict";
Scope names to an objectwith (obj) {}Banned in strict mode
TipModules and classes are strict already. Strict mode makes an undeclared assignment throw.
DOM & events
find elements, change them, react to inputFind and watch elements
Say what the DOM isThe live page as a tree of objects
Get the first match, or allel.querySelector(s)el.querySelectorAll(s)
Watch for DOM changesMutationObserver
Change the page
Create and add an elementdocument.createElementparent.append(el)
Set text safelyel.textContent = s
Set HTMLel.innerHTML = sNever pass it user input
Read only the visible textel.innerTextSlower, because it forces a layout
TipThe value attribute keeps the HTML's first value. The value property holds what the user typed.
Handle events
Listen for an eventel.addEventListener(t, fn)
Set a handler, old wayel.onclick = fnOnly one per event
Cancel the default, or stop bubblinge.preventDefault()e.stopPropagation()
TrappreventDefault doesn't stop bubbling, and stopPropagation doesn't cancel the default.
Bubbling and delegation
Listen during captureel.addEventListener(t, fn, true)
Listen on the parente.target.closest("li")
Get the clicked or listening elemente.targete.currentTarget
TrapEvents go down to the target, then bubble up. focus doesn't bubble, so delegation misses it.
Load scripts and wait for the page
A plain script blocks parsing. async runs as soon as it downloads. defer runs after parsing, in page order.
Load a script without blocking<script defer><script async>
Wait for the DOM"DOMContentLoaded"load waits for images too
Browser APIs
storage, network, lazy loading and workersStore data in the browser
Keep a value until clearedlocalStorage.setItem(k, v)
Keep it for one tabsessionStorageSame API
Send with each requestdocument.cookie = "a=1"
TrapAny script can read Web Storage. Keep tokens in HttpOnly cookies.
Fetch, cancel and CORS
Fetch JSONawait fetch(url)await res.json()
Cancel or time out a requestcontroller.abort()AbortSignal.timeout(ms)
Let another origin read your APIThe server sends Access-Control-Allow-Origin
Trapfetch resolves on a 404. Check res.ok.
Lazy loading
Lazy-load an imageloading="lazy"
Watch for visibilityIntersectionObserver
Load code on demandawait import("./m.js")
Animation frames and workers
Animate once per framerequestAnimationFrame
Offload heavy worknew Worker("w.js")
Work offlineA service worker with a cache
TrapWorkers can't touch the DOM. Service workers also need HTTPS, or localhost.
Modules & builds
split code into files and ship itES modules and CommonJS
Export and importexport const x = 1import { x } from "./m.js"
Import, Node's old wayrequire("./m.js")
Drop unused exportsTree shaking, via static imports
IIFEs and the module pattern
Run a function at once(function () {})()
Hide state behind an APIThe module pattern. An IIFE returns the API
Polyfills and transpilers
Add a missing methodA polyfill, like core-js
Support new syntaxA transpiler, like Babel
Patch a built-inDon't. Write a plain function
Nothing matches. Try a shorter word, or clear the search.
Found this useful? Pass it on.
This sheet stays free. With Pro, you can:
- Every answer on this sheet. Read the full answer to all 126 questions it links, not just the 16 free ones.
- My sheet. The cards you star and the ones you miss in Quiz me, from every sheet, on one page to quiz and print.
- PDFs. Download this sheet and My sheet, laid out for A4, with every question a link to its answer.
- The rest of Pro. Every answer in the question library, and 1,000 AI credits a month.
