JavaScript Cheat Sheet

JS terminology from closures to callbacks

84 terms

Browser Runtime: The execution environment provided by a browser for running JavaScript and interacting with web platform APIs such as the DOM, fetch, storage, timers, and messaging. Browser runtimes differ from server runtimes because they include user-facing APIs, event loops tied to rendering, and browser-specifi
BuckleScript: A compiler (now rebranded as ReScript) that translates OCaml (and later its own syntax) to readable, optimized JavaScript, combining OCaml's powerful type system with the JavaScript ecosystem.
Bun: A JavaScript runtime, bundler, and package manager written in Zig, designed to be a faster drop-in replacement for Node.js. Claims dramatically faster startup and execution times. The new kid competing with Node and Deno.
Bundler: A tool that combines multiple source files (and their dependencies) into one or more optimized output files for deployment — in JavaScript, tools like Webpack, Rollup, esbuild, and Vite; in Ruby, the gem dependency manager.
Callback Hell: Callback Hell, also known as the pyramid of doom, is a code antipattern in asynchronous programming where multiple nested callback functions create deeply indented, hard-to-read code that is difficult to maintain and debug. It commonly occurs in JavaScript when handling sequential asynchronous opera
Closure: Closure is a programming concept where a function retains access to variables from its enclosing scope even after that outer function has finished executing. The inner function closes over the variables it references, capturing them in a persistent environment rather than just their values at the ti
Cloudflare Workers
Create React App: A Create React App is a development concept used to shape how software is built, executed, or maintained in real systems. Developers rely on it to make code easier to reason about, integrate, and operate as projects grow. It usually matters most when teams need predictable behavior, clearer abstract
Deno: A JavaScript/TypeScript runtime created by Ryan Dahl (who also created Node.js) to address Node's design mistakes. Built-in TypeScript support, secure by default (no file/network access without explicit permission), and ships with a standard library.
Dynamic Typing: A type system where variable types are determined and checked at runtime rather than at compile time. Python, JavaScript, and Ruby are dynamically typed — a variable can hold a string one moment and a number the next.
Event Loop: Event Loop is a programming construct that continuously monitors for and dispatches events or messages in a program, enabling asynchronous, non-blocking I/O despite running on a single thread. The event loop is the core mechanism behind JavaScript's concurrency model in both browsers and Node.js. It
Export: To make a function, variable, or class available for import by other modules. In JavaScript/TypeScript, 'export' controls the public API of a module. In shell scripting, 'export' makes a variable available to child processes.
Fable: A compiler that transpiles F# code to JavaScript (and more recently Python and Rust), enabling F# developers to build web applications with the full power of the F# type system.
Fetch API: The modern browser API for making HTTP requests, replacing the older XMLHttpRequest. Returns Promises, supports streaming responses, and integrates with Service Workers. Cleaner syntax than XHR but notably doesn't reject on HTTP error status codes (404, 500) — only on network failures.
Handlebars: A templating language and library used to generate HTML or text from data with logic-light templates.
Isomorphic: Describes code, usually JavaScript, that can run in both the server and browser environments with largely the same application logic. In web development the term is often used for apps that server-render initial HTML and then reuse the same components on the client for hydration.
JavaScript: JavaScript is a dynamic, interpreted programming language created in 10 days by Brendan Eich at Netscape in 1995. Originally designed to add interactivity to web pages, it has grown into one of the most widely used programming languages in the world, running in every web browser and on servers via N
JavaScript Engine: The component that parses, compiles, and executes JavaScript source code, often with a mix of interpretation and just-in-time optimization. Engines such as V8, SpiderMonkey, and JavaScriptCore implement the language itself, while host environments supply APIs like the DOM or filesystem access.
JavaScript Module: A JavaScript file or unit of code with explicit imports and exports, allowing functionality to be split into reusable, dependency-aware pieces. ES modules are the standardized format in the language, replacing older patterns such as global scripts and CommonJS in many environments.
JavaScript Runtime: The full execution environment that runs JavaScript, consisting of an engine plus host-provided APIs, event loop behavior, module loading, timers, and I/O facilities. Browsers, Node.js, Deno, and Bun are all JavaScript runtimes, but they expose different capabilities around the same language.
Jest: A JavaScript testing framework that provides test execution, assertions, mocking, snapshot testing, and parallelized runs out of the box. It is commonly used in Node and frontend projects because it bundles many testing utilities that otherwise require separate libraries.
Lexical Scope: A scoping rule in which a variable's visibility is determined by its position in the source code at write time — an inner function can access variables from its enclosing function because scope is resolved by the nesting structure of the code, not by the call stack at runtime (which would be dynamic
Module Bundler: A build tool — such as webpack, Rollup, or esbuild — that resolves the dependency graph of JavaScript (or TypeScript) modules, combines them into one or more optimized bundles, and applies transforms like transpilation, tree-shaking, and code-splitting for efficient browser delivery.
Module Federation: A webpack 5 feature that allows independently built and deployed JavaScript applications to share modules at runtime by exposing and consuming remote entry points, enabling micro-frontend composition without duplicating shared dependencies like React.
Module Loader: A runtime component that dynamically locates, fetches, and executes JavaScript modules on demand — historically embodied by RequireJS (AMD) and SystemJS — as distinct from a bundler, which resolves modules at build time.
Module System: The language-level mechanism for organizing code into self-contained units with explicit imports and exports — examples include ES Modules (import/export), CommonJS (require/module.exports), Python packages, and Rust crates — providing encapsulation, namespace isolation, and dependency management.
Node: Short for Node.js — a JavaScript runtime built on Chrome's V8 engine that enables server-side JavaScript execution with an event-driven, non-blocking I/O model.
Node.js: Node.js is a JavaScript runtime built on Chrome's V8 engine that enables JavaScript to run outside the browser, primarily on servers. Its event-driven, non-blocking I/O model makes it highly efficient for handling concurrent connections, which is why it became a popular choice for building web serve
Node Module: A reusable unit of JavaScript code in the Node.js ecosystem — either a single file or a directory with a package.json — that can be loaded via `require()` or `import`. Installed dependencies live in the `node_modules` directory, which is notorious for its depth and disk usage.
Node Modules Folder: Often referenced jokingly as the giant dense directory tree representing JavaScript dependency sprawl. In engineering slang, mentioning the node_modules folder usually means talking about size, fragility, or ecosystem absurdity.
npm: npm is the default package manager for Node.js, providing a command-line tool and an online registry that hosts over two million JavaScript packages. Originally standing for Node Package Manager (though the organization now says it is not an acronym), npm enables developers to install, share, and ma
NPM Community: The ecosystem of maintainers, package authors, and users around npm and the broader JavaScript package world. In software culture, the npm community is known for extraordinary scale, fast iteration, and sometimes dramatic dependency-chain fragility.
NPM Registry: The default public repository (registry.npmjs.org) that hosts over two million JavaScript packages as compressed tarballs with accompanying metadata, serving as the backend that the npm, yarn, and pnpm CLI tools query when installing dependencies.
Pnpm: A fast, disk-space-efficient Node.js package manager that stores all package versions in a single content-addressable store on disk and uses hard links into node_modules, avoiding the massive duplication that npm and Yarn create. It also enforces strict dependency isolation, preventing phantom depen
Polyfill: A piece of JavaScript code that implements a modern web API or language feature in older browsers that don't natively support it, allowing developers to use newer standards while maintaining backward compatibility. core-js is the most widely used polyfill library.
PostMessage: A browser API (window.postMessage) that enables safe cross-origin communication between a page and its iframes, pop-ups, or web workers by sending serialized messages with explicit origin targeting, bypassing the same-origin policy without compromising security.
Private Field: A class member variable that is only accessible within the class that declares it, enforcing encapsulation by preventing external code from reading or modifying internal state. In JavaScript, private fields are denoted with a # prefix; in languages like Java and C#, the private keyword is used.
Promise: Promise is an object in asynchronous programming that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. A promise exists in one of three states: pending (the operation is still in progress), fulfilled (the operation completed successfully with a re
Promise.all: A JavaScript method that takes an iterable of Promises and returns a single Promise that resolves with an array of all results when every input Promise fulfills, or rejects immediately when any single input Promise rejects — enabling parallel execution of independent async operations.
Promise Chain: A sequence of .then() calls on a JavaScript Promise where each callback receives the resolved value of the previous step and returns a new value or Promise, creating a linear pipeline of asynchronous transformations. A .catch() at the end handles any rejection in the chain.
Property Accessor: A getter or setter method that intercepts reads and writes to an object property, allowing computed values, validation, or side effects to occur transparently when the property is accessed with normal dot or bracket syntax. In JavaScript, they are defined with get/set keywords or via Object.definePr
Property Descriptor: In JavaScript, a plain object that defines the attributes of an object property — including value, writable, enumerable, configurable for data descriptors, or get/set for accessor descriptors. Property descriptors are read with Object.getOwnPropertyDescriptor and set with Object.defineProperty.
Prototype Chain: JavaScript's inheritance mechanism in which each object has an internal [[Prototype]] link to another object. When a property is accessed, the engine walks up this chain of linked prototypes until it finds the property or reaches null (the end of the chain, typically Object.prototype). This is how m
Proxy Object: In JavaScript, an object created with new Proxy(target, handler) that wraps another object and intercepts fundamental operations — such as property access, assignment, enumeration, and function invocation — through customizable trap functions defined in the handler. Vue 3's reactivity system is buil
Qwik
React: React is a JavaScript library for building user interfaces, created by Facebook (now Meta) and open-sourced in 2013. It introduced a component-based architecture where the UI is broken into reusable, self-contained pieces that manage their own state. React uses a virtual DOM, an in-memory representa
Ready State: A property (readyState) on browser objects like XMLHttpRequest and Document that indicates the current phase of a lifecycle — for XHR: 0 (UNSENT) through 4 (DONE); for Document: "loading", "interactive", or "complete". Kubernetes also uses a ready state to indicate a pod can accept traffic, gated by
Redux: A predictable state container for JavaScript applications that enforces unidirectional data flow: the UI dispatches actions, pure reducer functions compute the next state, and the single immutable store notifies subscribers of changes.
ReScript: A strongly-typed functional programming language that compiles to readable JavaScript, originally forked from ReasonML, emphasizing fast compilation and a pragmatic type system.
RxJS: The JavaScript implementation of Reactive Extensions, providing Observables, Subjects, and a rich library of operators for composing asynchronous streams. RxJS is a core dependency of Angular's HTTP client, forms, and router, and is widely used for complex event handling, WebSocket management, and s
Scroll Event: A browser DOM event fired when the user scrolls an element or the page, notorious for triggering at extremely high frequency and requiring throttling or debouncing to avoid performance degradation.
Solid.js
Stale Closure: A bug in JavaScript (especially React hooks) where a closure captures a variable by reference at a particular point in time and continues to use that now-outdated value in subsequent executions, rather than the current value. This commonly occurs when a useEffect or event handler closes over a state
Static Import: An import declaration evaluated at parse time before any code executes, allowing the module bundler or runtime to resolve the dependency graph statically. In JavaScript, `import x from 'y'` is static, in contrast to the dynamic `import()` function which loads modules at runtime.
Stimulus: A modest JavaScript framework from Basecamp (now 37signals) designed to augment server-rendered HTML by attaching behavior to existing DOM elements via data attributes like `data-controller`, `data-action`, and `data-target`, rather than taking over rendering like React or Vue.
Strict Mode: A restricted variant of JavaScript (activated by `"use strict"`) that disables error-prone features like implicit globals, silent assignment failures, and `with` statements, turning them into thrown errors. In TypeScript, `strict: true` enables the full suite of type-checking flags including `strict
Svelte: Svelte is a frontend framework created by Rich Harris that takes a fundamentally different approach to building user interfaces by shifting work from runtime to compile time. Unlike React and Vue, which ship a runtime library to the browser and do work in the virtual DOM, Svelte compiles your compon
Symbol: An immutable, unique primitive value used as an identifier — in JavaScript, Symbols are globally unique keys that avoid property name collisions; in Ruby and Lisp, symbols are interned strings used as lightweight identifiers and hash keys that share a single memory allocation.
Template Literal: A JavaScript string delimited by backticks (`) that supports embedded expressions via ${...} interpolation, multi-line content without escape sequences, and tagged templates where a function processes the literal's parts for custom behavior like SQL parameterization or styled-components CSS.
Temporal Dead Zone: The region in a JavaScript scope between the start of the block and the point where a let or const variable is declared, during which any reference to that variable throws a ReferenceError — unlike var, which is hoisted and initialized to undefined.
Top-Level Await: A JavaScript feature (ES2022) that allows the `await` keyword to be used at the module's top scope rather than only inside async functions, causing the module to asynchronously resolve before any dependent modules execute — useful for dynamic imports, config loading, and database connections at star
Transpiler: A source-to-source compiler that translates code from one programming language (or language version) to another at a similar level of abstraction. Babel transpiling modern JavaScript to older JavaScript is the canonical example.
Tree Shaking: A dead code elimination technique that removes unused exports from JavaScript bundles during the build step. Analyzes ES module import/export relationships to determine which code is actually used and drops the rest. The name comes from 'shaking a tree to drop dead leaves.' Requires ES modules (not
Turbo Repo: A build and task orchestration tool for JavaScript and TypeScript monorepos focused on caching and parallel execution.
Type Coercion: The automatic, implicit conversion of a value from one type to another performed by the language runtime when operand types don't match — most infamously in JavaScript, where `'5' + 3` yields `'53'` (string concatenation) but `'5' - 3` yields `2` (numeric subtraction). Coercion follows language-spec
Typed Array: A family of array-like JavaScript objects (`Uint8Array`, `Float32Array`, `Int16Array`, etc.) backed by a raw `ArrayBuffer` that provide efficient, fixed-type access to binary data. Unlike regular JS arrays, typed arrays store elements in contiguous memory with no boxing overhead, making them essenti
TypeScript: TypeScript is a strongly typed programming language created by Microsoft that builds on JavaScript by adding optional static type annotations. It compiles (or more precisely, transpiles) to plain JavaScript, meaning TypeScript code runs anywhere JavaScript runs: browsers, Node.js, Deno, and serverle
Universal Module Definition: A JavaScript module pattern (UMD) that wraps a module in a factory function with runtime checks to support multiple module systems — AMD (RequireJS), CommonJS (Node.js), and plain browser globals — from a single file. UMD was the standard way to ship libraries before ES modules became widely support
V8: Google's open-source, high-performance JavaScript and WebAssembly engine, written in C++, that powers Chrome, Node.js, and Deno. V8 compiles JavaScript directly to native machine code using its TurboFan optimizing compiler and manages memory with a generational garbage collector.
V8 Engine: The colloquial full name for V8 — Google's JavaScript and WebAssembly runtime engine. The term 'engine' emphasizes its role as the execution layer beneath higher-level platforms like Chrome's Blink renderer or Node.js's event loop and libuv I/O layer.
Var: The original variable declaration keyword in JavaScript, which is function-scoped (not block-scoped) and hoisted to the top of its enclosing function. Largely superseded by let and const in modern JavaScript because var's scoping rules are a notorious source of subtle bugs.
Vite: A next-generation frontend build tool by Evan You (creator of Vue.js) that uses native ES modules for instant dev server startup. French for 'fast,' and for once the name isn't hyperbole.
Vue: Vue (pronounced 'view') is a progressive JavaScript framework for building user interfaces, designed to be incrementally adoptable. Created by Evan You in 2014, Vue can be used as a simple library for adding interactivity to existing pages or as a full-featured framework for building complex single-
Vue.js: The full name of the Vue framework, emphasizing its JavaScript foundation. Vue.js uses a reactivity system that automatically tracks dependencies and updates the DOM when state changes, with a template syntax that compiles to optimized render functions.
Weak Map: A key-value collection (in JavaScript and similar languages) where keys must be objects and are held via weak references, meaning entries are automatically garbage-collected when no other references to the key exist — useful for associating metadata with objects without preventing their cleanup.
Weak Set: A JavaScript collection that holds object references weakly, meaning objects in the set can be garbage-collected if no other strong references exist. Unlike Set, a WeakSet is not iterable and only supports add, has, and delete operations.
Web Animation API: A browser API that provides a JavaScript interface for creating and controlling animations that run on the compositor thread, offering programmatic access to the same animation engine that powers CSS animations and transitions with full playback control (play, pause, reverse, seek).
Web Audio API: A high-level browser API for processing, synthesizing, and analyzing audio in real time by connecting AudioNode objects into a directed graph — from sources (oscillators, media elements, microphone input) through effects (gain, filters, convolution reverb) to a destination (speakers or a recorder).
Webpack: Webpack is a module bundler for JavaScript applications that takes all of a project's files, dependencies, and assets and bundles them into optimized output files for the browser. In modern frontend development, code is typically written across many modules and files, using import statements and npm
Window: The global object in browser JavaScript that represents the browser tab or frame, providing access to the DOM (document), navigation (location), timers (setTimeout), storage APIs, and serving as the default scope for global variables and functions.
XSS: XSS, or Cross-Site Scripting, is a web security vulnerability that allows an attacker to inject malicious JavaScript code into web pages viewed by other users. When a web application includes user-supplied data in its output without proper sanitization or encoding, attackers can insert scripts that
Yarn: A JavaScript package manager created by Facebook as an alternative to npm, introducing deterministic installs via a lockfile (yarn.lock), offline caching, and workspaces for monorepo support. Yarn 2+ (Berry) further introduced Plug'n'Play, which eliminates node_modules entirely.
Zone: An execution context that persists across asynchronous operations, allowing frameworks to intercept and track async activity (timers, promises, event listeners). Made prominent by Zone.js in Angular, where it automatically triggers change detection when async tasks complete.
Zustand: A small, unopinionated state management library for React that uses a hook-based API backed by a vanilla JavaScript store, avoiding the boilerplate of Redux while supporting selectors, middleware, and persistence with minimal setup.