Executive Summary
JavaScript in 2026 is a mature, multi-paradigm language that runs everywhere: browsers, servers, edge functions, embedded devices, and even spacecraft control systems. The language has evolved dramatically since ES2015, with each yearly release adding features that reduce boilerplate, improve safety, and enable patterns that previously required external libraries. The ES2024-2026 specifications bring Object.groupBy, Promise.withResolvers, Iterator Helpers, Set methods, and the long-awaited Temporal API, fundamentally changing how developers work with collections, async code, and dates.
This report covers every major JavaScript feature, from the seven primitive types through the prototype chain, closures, and the event loop, to the newest ES2026 proposals. Every section includes reference tables, practical code examples, and data on adoption and runtime support. Whether you are learning JavaScript for the first time or are a senior engineer looking up a specific API, this guide is designed to be the single reference you need.
- React remains the most popular framework at 78%, but Svelte (42%) and SolidJS (22%) have seen the fastest growth. Vanilla JavaScript usage is rising (48%) as the language itself absorbs functionality that previously required frameworks.
- Bun handles 110,000 HTTP requests/second compared to Node.js at 48,000, making it 2.3x faster for HTTP workloads. Bun also installs 100 dependencies 4x faster than npm. The runtime landscape is genuinely competitive for the first time in JavaScript history.
- ES2025 Iterator Helpers and Set methods are the most impactful additions since async/await. Iterator.prototype.map/filter/take work lazily on any iterable, and Set.union/intersection/difference bring native mathematical set operations to JavaScript for the first time.
- The Temporal API (Stage 3) will finally replace the Date object with immutable, timezone-aware, calendar-aware date/time handling. This eliminates the need for Moment.js, date-fns, and Luxon for new projects.
78%
React usage share 2026
110K
Bun HTTP req/s
88%
ES2025 feature adoption
45%
ES2026 early adoption
Part 1: JavaScript Data Types
JavaScript has seven primitive data types and one structural type. Understanding the distinction between primitives and reference types is the foundation of everything else in the language, because it determines how values are stored, compared, and passed to functions.
The Seven Primitives
string: A sequence of UTF-16 code units. Strings are immutable: methods like toUpperCase() return new strings. Template literals (backtick strings) support interpolation and multi-line content. Strings are iterable: for...of iterates over characters, correctly handling emoji and other surrogate pairs when combined with the spread operator or Array.from().
number: A 64-bit IEEE 754 double-precision floating-point value. This means JavaScript numbers have about 15-17 significant decimal digits of precision. Integers are safe up to 2^53 - 1 (Number.MAX_SAFE_INTEGER = 9,007,199,254,740,991). Beyond this, use BigInt. Special values: Infinity, -Infinity, NaN (Not a Number). NaN is the only value in JavaScript that is not equal to itself: NaN !== NaN.
bigint: Arbitrary-precision integers, introduced in ES2020. Created with the n suffix (42n) or BigInt() constructor. Cannot be mixed with Number in arithmetic without explicit conversion. No precision loss for any integer size. Useful for cryptography, financial calculations, and working with large IDs from databases.
boolean: true or false. JavaScript has eight falsy values: false, 0, -0, 0n, "" (empty string), null, undefined, and NaN. Everything else is truthy, including empty arrays [] and empty objects which catch many developers off guard. The double-bang (!!) operator is a common pattern to convert any value to its boolean equivalent.
undefined: The default value of uninitialized variables, missing function parameters, and non-existent object properties. typeof undefined returns "undefined". It is both a type and the sole value of that type.
null: Represents the intentional absence of any object value. Often used to explicitly clear a variable. typeof null returns "object" due to a historical bug in the first JavaScript implementation that can never be fixed because too much code on the web depends on it.
symbol: A unique identifier created with Symbol("description"). Every call to Symbol() creates a new, unique symbol, even with the same description. Symbols are used for private-ish object properties, avoiding name collisions in libraries, and well-known symbols like Symbol.iterator, Symbol.toPrimitive, and Symbol.toStringTag that control object behavior.
Reference Types
Everything that is not a primitive is an object: plain objects, arrays, functions, dates, regular expressions, Maps, Sets, WeakMaps, WeakSets, and Promises. Reference types are stored in the heap, and variables hold references (pointers) to them. This means assignment copies the reference, not the value: if you assign an array to two variables and push to one, the other sees the change. Use structuredClone() for deep copies, spread ({...obj}) or Object.assign() for shallow copies.
Type Coercion and Comparisons
JavaScript is dynamically typed and performs implicit type coercion in many contexts. The + operator converts to string when one operand is a string ("5" + 3 = "53") but other arithmetic operators convert to number ("5" - 3 = 2). The == operator coerces types before comparison (1 == "1" is true), while === does not coerce (1 === "1" is false). Always use === except for the specific pattern == null, which checks for both null and undefined in a single comparison. Object.is() is the most precise comparison: it treats NaN === NaN as true and distinguishes +0 from -0.
Part 2: Functions and Closures
Functions are first-class citizens in JavaScript, meaning they can be assigned to variables, passed as arguments, returned from other functions, and stored in data structures. This first-class nature is the foundation of JavaScript functional programming capabilities and enables patterns like higher-order functions, callbacks, closures, and partial application.
Function Declarations vs. Expressions
Function declarations (function add(a, b) { return a + b; }) are fully hoisted: they can be called before they appear in the source code. Function expressions (const add = function(a, b) { return a + b; }) are not hoisted (the variable is hoisted but initialized as undefined). Arrow functions (const add = (a, b) => a + b) are the most concise syntax and have no own this binding, making them ideal for callbacks.
Arrow Functions and this
Arrow functions differ from traditional functions in several critical ways. They do not have their own this, arguments, super, or new.target. Instead, they inherit this from the enclosing lexical scope. This makes them perfect for callbacks where you want to preserve the outer this (event handlers, array methods, Promise chains). However, they cannot be used as constructors (no new keyword), and they cannot be used as methods on objects if you need this to refer to the object.
Closures
A closure is formed whenever a function is created inside another function. The inner function retains a reference to the outer function's variables, even after the outer function has returned and its execution context has been destroyed. This is because JavaScript uses lexical scoping: functions are linked to the scope in which they were defined, not the scope in which they are called. Closures are the mechanism behind data privacy (module pattern), factory functions, memoization, partial application, and stateful callbacks.
A classic example: a counter factory. function createCounter() { let count = 0; return { increment() { return ++count; }, getCount() { return count; } }; }. The count variable is inaccessible from outside, but the returned methods can still access and modify it. Each call to createCounter() creates a new, independent closure with its own count.
Higher-Order Functions
A higher-order function is one that takes a function as an argument, returns a function, or both. JavaScript built-in higher-order functions include array methods (map, filter, reduce, sort), addEventListener, setTimeout, and Promise.then. Writing your own higher-order functions enables powerful abstractions: debounce, throttle, memoize, retry logic, and middleware chains.
Default Parameters, Rest, and Spread
ES2015 introduced default parameters (function greet(name = "World")), rest parameters (function sum(...numbers) collects remaining args into an array), and spread syntax (fn(...args) expands an array into individual arguments). Rest parameters replace the deprecated arguments object, which was array-like but not a real Array. Destructuring in parameters enables named arguments: function createUser({ name, age = 0, role = "user" }).
Part 3: Prototypes and Classes
JavaScript uses prototypal inheritance, not classical inheritance. Every object has an internal [[Prototype]] link to another object (its prototype). When accessing a property that does not exist on an object, JavaScript walks up the prototype chain until it finds the property or reaches the end of the chain (null). This prototype chain is the mechanism by which all JavaScript inheritance works, including ES2015 classes.
The Prototype Chain
When you create an array with [1, 2, 3], the array object itself has properties like length and the indexed values. When you call .map(), JavaScript does not find map on the array itself, so it follows the [[Prototype]] link to Array.prototype, where map is defined. Array.prototype in turn has a [[Prototype]] link to Object.prototype, which provides toString(), hasOwnProperty(), and other base methods. Object.prototype's [[Prototype]] is null, ending the chain. This chain is why every object in JavaScript has access to Object.prototype methods.
ES2015 Classes
Classes in JavaScript are syntactic sugar over the prototype mechanism. class Dog { constructor(name) { this.name = name; } bark() { return "Woof!"; } } is equivalent to creating a constructor function and adding methods to its prototype. Classes support: constructors, instance methods, static methods, getters/setters, computed property names, and extends for inheritance with super calls. Despite being sugar, classes provide a cleaner, more familiar syntax for developers coming from other languages.
Private Fields and Methods (ES2022)
ES2022 introduced true private class fields using the # prefix. #name is genuinely inaccessible from outside the class, unlike the _name convention which is merely a hint. Private fields are per-class, not per-instance: a class method can access private fields of other instances of the same class. Private methods (#method()) and static private fields (static #count) are also supported. Static blocks (static { ... }) allow complex initialization of static properties.
The this Keyword
The value of this depends on how a function is called, not where it is defined. In a method call (obj.method()), this is the object. In a standalone function call (fn()), this is undefined in strict mode or globalThis in sloppy mode. In an event handler, this is the DOM element. In an arrow function, this is inherited from the enclosing scope. With call/apply/bind, this is explicitly set. Understanding this binding is one of the most important (and confusing) aspects of JavaScript.
Part 4: Async/Await and Promises
JavaScript is single-threaded but non-blocking. It achieves concurrency through the event loop, which processes asynchronous callbacks without creating additional threads. The evolution of async patterns in JavaScript has gone through four phases: callbacks (2009), Promises (2015), async/await (2017), and top-level await with AbortController (2022+).
Promises
A Promise represents a value that may not be available yet but will be resolved in the future (or rejected with an error). Promises exist in one of three states: pending, fulfilled, or rejected. Once settled, a Promise cannot change state. Promises are consumed with .then(onFulfilled, onRejected), .catch(onRejected), and .finally(onFinally). Chaining .then() calls creates sequential async pipelines.
Promise Combinators
Promise.all() resolves when all promises fulfill; rejects on the first rejection. Promise.allSettled() waits for all promises to settle regardless of outcome. Promise.race() settles with the first promise to settle (either fulfill or reject). Promise.any() resolves with the first fulfilled promise; rejects only if all reject. Promise.withResolvers() (ES2024) returns { promise, resolve, reject } for more flexible construction.
async/await
The async keyword declares a function that always returns a Promise. The await keyword pauses execution until the awaited Promise settles. Error handling uses standard try/catch blocks instead of .catch() chains. This makes asynchronous code read and maintain like synchronous code. Parallel execution uses await Promise.all([...]) to run multiple operations concurrently. Sequential await in a loop processes items one at a time.
The Event Loop
The event loop is JavaScript's concurrency mechanism. It continuously processes: (1) the call stack (synchronous code), (2) the microtask queue (Promise callbacks, queueMicrotask), and (3) the macrotask queue (setTimeout, setInterval, I/O, UI rendering). The critical insight: ALL microtasks are drained between each macrotask. This means a Promise.then() callback will execute before a setTimeout(..., 0) callback, even if the setTimeout was registered first. Understanding this order is essential for predicting execution timing.
AbortController and Cancellation
AbortController provides a standardized mechanism for cancelling asynchronous operations. Create a controller, pass its signal to fetch() or other signal-aware APIs, and call controller.abort() to cancel. AbortSignal.timeout(ms) creates a signal that auto-aborts after a timeout. AbortSignal.any([signal1, signal2]) creates a signal that aborts when any input signal aborts. This pattern is essential for search-as-you-type, navigation cancellation, and resource cleanup.
Part 5: JavaScript Modules
Modules are the standard way to organize JavaScript code into reusable, encapsulated units. The ES Module (ESM) system, introduced in ES2015, uses import and export syntax and is now the official standard for both browsers and Node.js. CommonJS (require/module.exports) remains widely used in Node.js but is being gradually replaced by ESM.
ES Module Syntax
Named exports: export function add(a, b) { return a + b; } or export { add, subtract }. Default export: export default class MyClass {}. Named imports: import { add, subtract } from "./math.js". Default imports: import MyClass from "./MyClass.js". Namespace import: import * as math from "./math.js". Re-exports: export { add } from "./math.js". Modules are strict mode by default, have their own scope, are evaluated once (singleton), and support static analysis.
Dynamic Imports
The import() expression loads a module asynchronously at runtime, returning a Promise that resolves to the module namespace. Unlike static imports, dynamic imports can: appear anywhere in code (not just at the top level), accept expressions as the module specifier, and load modules conditionally. This is the foundation of code splitting and lazy loading in modern bundlers and frameworks.
Top-Level Await (ES2022)
ES2022 allows using await at the top level of a module, outside of any async function. This enables module-level async initialization: const config = await fetch("/config.json").then(r => r.json()). When a module with top-level await is imported, the importing module waits for the awaited Promise to settle before executing its own code.
CommonJS vs. ESM
CommonJS: synchronous loading, dynamic require() calls, module.exports object, runs in Node.js. ESM: asynchronous loading, static import declarations, named/default exports, runs in browsers and Node.js. ESM enables tree-shaking because imports are statically analyzable. CJS cannot be tree-shaken because require() calls can be conditional and computed. Modern Node.js supports ESM with "type": "module" in package.json or .mjs file extensions.
Part 6: Iterators and Generators
The iteration protocol defines a standard way for objects to produce a sequence of values. Any object implementing Symbol.iterator (returning an iterator with a next() method) can be used with for...of loops, spread syntax, destructuring, Array.from(), and the new ES2025 Iterator Helpers. Built-in iterables include arrays, strings, Maps, Sets, NodeLists, and generators.
The Iterator Protocol
An iterator is an object with a next() method that returns { value, done } objects. When done is true, the sequence is complete. Iterators are lazy: they produce values on demand, one at a time, without materializing the entire sequence in memory. This makes them ideal for large datasets, infinite sequences, and streaming data.
Generator Functions
Generator functions (function*) create iterators with a more convenient syntax. The yield keyword pauses execution and produces a value. Execution resumes when next() is called again. Generators can receive values via next(value), throw errors via throw(error), and clean up with return(). They are the easiest way to create custom iterators and implement lazy evaluation patterns.
ES2025 Iterator Helpers
ES2025 adds methods directly to Iterator.prototype, enabling lazy transformation of any iterable without converting to an array first. The new methods include: .map(fn), .filter(fn), .take(n), .drop(n), .flatMap(fn), .reduce(fn, init), .toArray(), .forEach(fn), .some(fn), .every(fn), and .find(fn). Iterator.from(iterable) wraps any iterable into an iterator with these helpers available. This enables pipelines like: Iterator.from(users).filter(u => u.active).map(u => u.name).take(10).toArray().
Async Iteration
ES2018 introduced async iterators and the for-await-of loop. Async iterators have an async next() method that returns a Promise. for await (const chunk of stream) consumes async iterables, waiting for each Promise to settle before proceeding. Async generators (async function*) can use both yield and await, making them perfect for paginated API results, event streams, and readable streams.
Part 7: Proxy and Reflect
Proxy and Reflect are JavaScript metaprogramming facilities introduced in ES2015. A Proxy wraps an object and intercepts fundamental operations through handler traps. Reflect provides static methods that match each Proxy trap, used to perform the default behavior. Together, they enable validation, logging, reactive data systems, access control, and more without modifying the target object.
Proxy Traps
There are 13 Proxy traps, each intercepting a specific fundamental operation: get (property access), set (property assignment), has (in operator), deleteProperty (delete operator), apply (function call), construct (new operator), getPrototypeOf, setPrototypeOf, isExtensible, preventExtensions, getOwnPropertyDescriptor, defineProperty, and ownKeys. Each trap receives the target object and operation-specific arguments, and must return the expected result type.
Practical Proxy Patterns
Validation proxy: intercept set to reject invalid values. Logging proxy: intercept get/set to log access. Negative array index: intercept get to translate negative indices. Default values: intercept get to return defaults for missing properties. Revocable proxy: Proxy.revocable() creates a proxy that can be permanently disabled. Vue 3 and other reactive frameworks use Proxy to detect property changes and trigger re-renders.
Reflect API
Reflect methods mirror Proxy traps: Reflect.get(target, prop, receiver), Reflect.set(target, prop, value, receiver), etc. Always use Reflect inside Proxy traps to forward the default behavior: handler.get(target, prop, receiver) { console.log(`get ${prop}`); return Reflect.get(target, prop, receiver); }. Reflect methods return booleans for success/failure instead of throwing, making them safer than direct operations.
Part 8: Error Handling
Proper error handling is the difference between applications that crash mysteriously and applications that fail gracefully with useful information. JavaScript provides try/catch/finally for synchronous code, .catch() for Promises, and global handlers for unhandled errors.
try/catch/finally
The try block contains code that might throw. The catch block receives the error and handles it. The finally block runs regardless of whether an error occurred, making it ideal for cleanup (closing connections, releasing resources). Since ES2019, the catch binding is optional: catch { /* no variable needed */ }. Avoid empty catch blocks that silently swallow errors.
Error Types
JavaScript has several built-in error types: Error (base), TypeError (wrong type operation), ReferenceError (accessing undeclared variable), SyntaxError (invalid syntax), RangeError (value out of range), URIError (malformed URI), and AggregateError (multiple errors, used by Promise.any). Create custom errors: class AppError extends Error { constructor(message, code) { super(message); this.code = code; this.name = "AppError"; } }.
Error.cause (ES2022)
ES2022 added the cause option to Error constructors for error chaining: throw new Error("Failed to save user", { cause: originalDatabaseError }). This preserves the original error while providing context about what higher-level operation failed. Error.cause creates a chain that tools and error monitoring services can walk to find the root cause.
Async Error Handling
For async/await, wrap await calls in try/catch. For Promise chains, use .catch(). For unhandled rejections, add global listeners: window.addEventListener("unhandledrejection", handler) in browsers or process.on("unhandledRejection", handler) in Node.js. Starting in Node.js 15+, unhandled rejections terminate the process. Always handle or propagate errors; never let them disappear silently.
Part 9: DOM Manipulation
The Document Object Model (DOM) is the browser's tree representation of an HTML document. JavaScript interacts with the DOM to create, read, update, and delete elements, attributes, and content. While frameworks abstract DOM manipulation, understanding the underlying APIs is essential for performance optimization, debugging, and working with Web Components.
Selecting Elements
document.querySelector(selector) returns the first matching element. document.querySelectorAll(selector) returns a static NodeList of all matches. document.getElementById(id) returns a single element by ID (fastest). element.closest(selector) traverses up the DOM tree to find the nearest ancestor matching the selector, including the element itself. These methods accept any CSS selector, making them extremely flexible.
Creating and Modifying Elements
document.createElement(tagName) creates a new element. element.textContent sets text safely (no HTML parsing). element.innerHTML sets HTML content (sanitize user input to prevent XSS). element.setAttribute(name, value) and element.removeAttribute(name) manage attributes. element.classList provides add(), remove(), toggle(), contains(), and replace() for CSS class manipulation. element.dataset accesses data-* attributes.
Event Handling
element.addEventListener(type, handler, options) is the standard way to attach event handlers. Options include: once (auto-remove after firing), passive (improved scroll performance), capture (capture phase instead of bubble), and signal (AbortSignal for removal). Event delegation attaches a single listener to a parent and uses event.target to identify the actual source element. This pattern is efficient for dynamic content and large lists.
Performance Considerations
Batch DOM reads and writes to avoid layout thrashing (forced reflows). Use DocumentFragment for batch insertions. Prefer textContent over innerHTML for text-only changes. Use requestAnimationFrame for visual updates. Use IntersectionObserver for lazy loading instead of scroll listeners. Use MutationObserver instead of polling for DOM changes. Minimize live collection usage (getElementsByClassName returns a live HTMLCollection that updates on DOM changes).
Part 10: Web APIs
Modern browsers expose hundreds of Web APIs beyond the core JavaScript language. These APIs provide access to network requests, local storage, device sensors, graphics rendering, audio processing, and much more. Understanding which APIs are available and how to use them is essential for building rich web applications.
Web API Browser Support Matrix
20 rows
| API | Category | Description | Support % | Use Case |
|---|---|---|---|---|
| Fetch API | Network | Modern HTTP request API replacing XMLHttpRequest. | 99 | API calls, resource loading |
| WebSocket | Network | Full-duplex communication channel over TCP. | 99 | Real-time apps, chat, live data |
| Web Workers | Threading | Background thread execution for CPU tasks. | 99 | Image processing, parsing, crypto |
| Service Workers | Threading | Programmable network proxy for offline/caching. | 97 | PWAs, offline first, push notifications |
| IntersectionObserver | DOM | Element visibility detection in viewport. | 98 | Lazy loading, infinite scroll, analytics |
| ResizeObserver | DOM | Element size change detection. | 97 | Responsive components, chart resizing |
| MutationObserver | DOM | DOM tree change detection. | 99 | Framework reactivity, accessibility tools |
| Clipboard API | Interaction | Read/write to system clipboard. | 95 | Copy buttons, paste handling |
| File System Access API | Storage | Read/write to local file system. | 72 | File editors, IDEs, save dialogs |
| Web Crypto API | Security | Cryptographic operations in the browser. | 99 | Hashing, encryption, key generation |
| IndexedDB | Storage | Client-side structured data storage. | 99 | Offline data, large datasets, caching |
| Cache API | Storage | Request/response pair caching. | 97 | Service worker caching strategies |
| Geolocation API | Device | User location access (with permission). | 97 | Maps, location-based services |
| Web Audio API | Media | Audio processing and synthesis. | 98 | Music apps, audio effects, games |
| Canvas API | Graphics | 2D drawing and pixel manipulation. | 99 | Charts, image editing, games |
| WebGL / WebGPU | Graphics | 3D graphics and GPU compute. | 98 | 3D rendering, ML inference, simulations |
| Broadcast Channel | Communication | Communication between same-origin tabs/windows. | 96 | Tab synchronization, shared state |
| Navigation API | Routing | Modern client-side routing API. | 78 | SPA routing without hash/history hacks |
| View Transitions API | Animation | Animated transitions between page states. | 84 | Page transitions, SPA state changes |
| Scheduler API | Performance | Priority-based task scheduling. | 70 | Yielding to main thread, task prioritization |
The Fetch API has universally replaced XMLHttpRequest for network requests. Web Workers enable multi-threaded JavaScript for CPU-intensive tasks. Service Workers power Progressive Web Apps with offline capabilities and push notifications. The Observer APIs (Intersection, Resize, Mutation) provide efficient, declarative ways to react to DOM changes without polling. Storage APIs (IndexedDB, Cache API, localStorage) provide client-side persistence with different tradeoffs in capacity, structure, and performance.
Newer APIs like the File System Access API (direct file read/write), Navigation API (client-side routing), View Transitions API (animated page transitions), and Scheduler API (priority-based task scheduling) are expanding what web applications can do. WebGPU is replacing WebGL for 3D graphics and GPU compute, bringing near-native GPU performance to the browser.
Part 11: ES2024-2026 Features
The TC39 committee continues to enhance JavaScript with yearly releases. ES2024 brought Object.groupBy and Promise.withResolvers. ES2025 delivers Iterator Helpers and Set methods. ES2026 targets the Temporal API, pattern matching, and the pipeline operator. Each addition addresses real developer pain points and reduces the need for utility libraries.
ECMAScript Feature Timeline: ES2015-2026
12 rows
| Version | Year | Key Feature | Adoption % | All Features |
|---|---|---|---|---|
| ES2015 (ES6) | 2015 | Arrow functions & modules | 99 | let/const, arrow functions, classes, template literals, destructuring, Promises, Map/Set, Symbol, iterators, generators, modules, Proxy, Reflect, default/rest/spread parameters |
| ES2016 | 2016 | Array.includes() | 99 | Array.prototype.includes(), exponentiation operator (**) |
| ES2017 | 2017 | async/await | 99 | async/await, Object.values/entries, String padding, SharedArrayBuffer, Atomics |
| ES2018 | 2018 | Object spread & async iteration | 99 | Rest/spread for objects, async iteration (for-await-of), Promise.finally(), RegExp lookbehind/named groups/Unicode escapes |
| ES2019 | 2019 | Array.flat() | 99 | Array.flat/flatMap, Object.fromEntries, String.trimStart/trimEnd, optional catch binding, Symbol.description |
| ES2020 | 2020 | Optional chaining | 99 | Optional chaining (?.), nullish coalescing (??), BigInt, Promise.allSettled, globalThis, dynamic import(), String.matchAll |
| ES2021 | 2021 | Logical assignment | 99 | String.replaceAll, Promise.any, WeakRef/FinalizationRegistry, logical assignment (??=, &&=, ||=), numeric separators (1_000_000) |
| ES2022 | 2022 | Top-level await & class fields | 98 | Top-level await, class fields (public/private), private methods, static blocks, at() method, Object.hasOwn, Error.cause, RegExp /d flag |
| ES2023 | 2023 | Immutable array methods | 97 | Array findLast/findLastIndex, Hashbang syntax, Symbols as WeakMap keys, change Array by copy (toSorted, toReversed, toSpliced, with) |
| ES2024 | 2024 | Object.groupBy & Promise.withResolvers | 95 | Promise.withResolvers, Object.groupBy, Map.groupBy, ArrayBuffer.resize, ArrayBuffer.transfer, String.isWellFormed/toWellFormed, Atomics.waitAsync, RegExp /v flag (Unicode sets) |
| ES2025 | 2025 | Iterator helpers & Set methods | 88 | Iterator helpers (map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every, find), Set methods (union, intersection, difference, symmetricDifference, isSubsetOf, isSupersetOf, isDisjointFrom), RegExp modifiers, Import attributes, JSON modules, Duplicate named capture groups, Promise.try |
| ES2026 (Stage 3+) | 2026 | Temporal API & Pattern matching | 45 | Temporal API (date/time replacement), Record & Tuple (immutable data), Pattern matching, Pipeline operator (|>), Decorators, Explicit Resource Management (using/await using), ShadowRealm, Structs, Module expressions |
ES2024: Object.groupBy and Promise.withResolvers
Object.groupBy() groups elements of an iterable by a callback return value, returning a null-prototype object. This replaces the extremely common lodash groupBy pattern. Map.groupBy() does the same but returns a Map, useful for non-string keys. Promise.withResolvers() returns { promise, resolve, reject } without nesting inside a Promise constructor callback, simplifying patterns where resolve/reject need to be stored or passed elsewhere.
ES2025: Iterator Helpers and Set Methods
Iterator Helpers add .map(), .filter(), .take(), .drop(), .flatMap(), .reduce(), .toArray(), .forEach(), .some(), .every(), .find() to Iterator.prototype. These methods are lazy: they do not materialize intermediate arrays, making them memory-efficient for large datasets. Set methods add .union(), .intersection(), .difference(), .symmetricDifference(), .isSubsetOf(), .isSupersetOf(), .isDisjointFrom() for mathematical set operations.
ES2026: Temporal API
The Temporal API replaces the broken Date object with a comprehensive, immutable date/time library. Key types: Temporal.PlainDate (date without time), Temporal.PlainTime (time without date), Temporal.PlainDateTime (date and time without timezone), Temporal.ZonedDateTime (full date/time/timezone), Temporal.Duration (time span), and Temporal.Instant (exact moment in time). All operations are immutable and return new instances. Timezone handling is correct by default. Calendar systems beyond Gregorian are natively supported.
JavaScript Framework Popularity 2018-2026 (% usage)
Source: OnlineTools4Free Research
ES Feature Adoption Rate in 2026 (%)
Source: OnlineTools4Free Research
Array Methods Reference (39 Methods)
Arrays are the most-used data structure in JavaScript. The language provides 39+ built-in methods for creating, reading, transforming, searching, sorting, and iterating arrays. Understanding which methods mutate the original array and which return new arrays is essential for writing predictable code, especially with immutable state patterns in React and other frameworks.
JavaScript Array Methods — Complete Reference
39 rows
| Method | Mutates? | Returns | Category | Description | Example | Time |
|---|---|---|---|---|---|---|
| push() | Yes | New length | Add/Remove | Adds one or more elements to the end of an array. | [1,2].push(3) // [1,2,3], returns 3 | O(1) amortized |
| pop() | Yes | Removed element | Add/Remove | Removes the last element from an array. | [1,2,3].pop() // [1,2], returns 3 | O(1) |
| unshift() | Yes | New length | Add/Remove | Adds one or more elements to the beginning of an array. | [2,3].unshift(1) // [1,2,3], returns 3 | O(n) |
| shift() | Yes | Removed element | Add/Remove | Removes the first element from an array. | [1,2,3].shift() // [2,3], returns 1 | O(n) |
| splice() | Yes | Array of removed | Add/Remove | Changes contents by removing, replacing, or adding elements at any index. | [1,2,3].splice(1,1,"a") // [1,"a",3] | O(n) |
| concat() | No | New array | Combine | Merges two or more arrays into a new array. | [1,2].concat([3,4]) // [1,2,3,4] | O(n+m) |
| slice() | No | New array | Extract | Returns a shallow copy of a portion of an array. | [1,2,3,4].slice(1,3) // [2,3] | O(n) |
| map() | No | New array | Transform | Creates a new array by calling a function on every element. | [1,2,3].map(x => x*2) // [2,4,6] | O(n) |
| filter() | No | New array | Transform | Creates a new array with elements that pass the test function. | [1,2,3,4].filter(x => x>2) // [3,4] | O(n) |
| reduce() | No | Accumulated value | Transform | Executes a reducer function on each element, resulting in a single value. | [1,2,3].reduce((a,b) => a+b, 0) // 6 | O(n) |
| reduceRight() | No | Accumulated value | Transform | Like reduce() but processes elements from right to left. | [[1],[2],[3]].reduceRight((a,b) => a.concat(b)) // [3,2,1] | O(n) |
| forEach() | No | undefined | Iterate | Executes a function for each element. Cannot break out early. | [1,2,3].forEach(x => console.log(x)) | O(n) |
| find() | No | Element or undefined | Search | Returns the first element that satisfies the test function. | [1,2,3].find(x => x>1) // 2 | O(n) |
| findIndex() | No | Index or -1 | Search | Returns the index of the first element that satisfies the test. | [1,2,3].findIndex(x => x>1) // 1 | O(n) |
| findLast() | No | Element or undefined | Search | Returns the last element that satisfies the test function. ES2023. | [1,2,3,2].findLast(x => x>1) // 2 | O(n) |
| findLastIndex() | No | Index or -1 | Search | Returns the index of the last element that satisfies the test. ES2023. | [1,2,3,2].findLastIndex(x => x>1) // 3 | O(n) |
| indexOf() | No | Index or -1 | Search | Returns the first index of a value, or -1 if not found. | [1,2,3].indexOf(2) // 1 | O(n) |
| lastIndexOf() | No | Index or -1 | Search | Returns the last index of a value, or -1 if not found. | [1,2,1].lastIndexOf(1) // 2 | O(n) |
| includes() | No | boolean | Search | Determines whether an array includes a certain value. ES2016. | [1,2,3].includes(2) // true | O(n) |
| some() | No | boolean | Test | Tests whether at least one element passes the test function. | [1,2,3].some(x => x>2) // true | O(n) |
Page 1 of 2
String Methods Reference (28 Methods)
Strings in JavaScript are immutable: every string method returns a new string. The methods below cover accessing characters, extracting substrings, transforming content, searching, and working with Unicode.
JavaScript String Methods — Complete Reference
28 rows
| Method | Returns | Category | Description | Example |
|---|---|---|---|---|
| charAt() | string | Access | Returns the character at the specified index. | "hello".charAt(1) // "e" |
| at() | string | undefined | Access | Returns character at index. Supports negative indices. ES2022. | "hello".at(-1) // "o" |
| charCodeAt() | number | Access | Returns the UTF-16 code unit at the specified index. | "A".charCodeAt(0) // 65 |
| codePointAt() | number | undefined | Access | Returns the Unicode code point at the specified index. Handles surrogate pairs. | "\u{1F600}".codePointAt(0) // 128512 |
| slice() | string | Extract | Extracts a section of a string. Supports negative indices. | "hello".slice(1,3) // "el" |
| substring() | string | Extract | Returns the part of the string between two indices. No negative support. | "hello".substring(1,3) // "el" |
| split() | string[] | Transform | Splits a string into an array of substrings using a separator. | "a,b,c".split(",") // ["a","b","c"] |
| trim() | string | Transform | Removes whitespace from both ends of a string. | " hi ".trim() // "hi" |
| trimStart() | string | Transform | Removes whitespace from the beginning. ES2019. | " hi".trimStart() // "hi" |
| trimEnd() | string | Transform | Removes whitespace from the end. ES2019. | "hi ".trimEnd() // "hi" |
| toUpperCase() | string | Transform | Converts all characters to uppercase. | "hello".toUpperCase() // "HELLO" |
| toLowerCase() | string | Transform | Converts all characters to lowercase. | "HELLO".toLowerCase() // "hello" |
| replace() | string | Transform | Replaces first occurrence of a pattern with a replacement. | "hello".replace("l","L") // "heLlo" |
| replaceAll() | string | Transform | Replaces all occurrences of a pattern. ES2021. | "hello".replaceAll("l","L") // "heLLo" |
| repeat() | string | Transform | Returns a string repeated the specified number of times. | "ab".repeat(3) // "ababab" |
| padStart() | string | Transform | Pads the start of a string to a target length. ES2017. | "5".padStart(3,"0") // "005" |
| padEnd() | string | Transform | Pads the end of a string to a target length. ES2017. | "5".padEnd(3,"0") // "500" |
| includes() | boolean | Search | Checks if a string contains the specified substring. | "hello".includes("ell") // true |
| startsWith() | boolean | Search | Checks if a string starts with the specified substring. | "hello".startsWith("he") // true |
| endsWith() | boolean | Search | Checks if a string ends with the specified substring. | "hello".endsWith("lo") // true |
Page 1 of 2
Object Static Methods Reference
Object Static Methods — Complete Reference
15 rows
| Method | Returns | Description | Example |
|---|---|---|---|
| Object.keys() | string[] | Returns an array of the object own enumerable property names. | Object.keys({a:1,b:2}) // ["a","b"] |
| Object.values() | any[] | Returns an array of the object own enumerable property values. ES2017. | Object.values({a:1,b:2}) // [1,2] |
| Object.entries() | [string,any][] | Returns an array of the object own enumerable [key, value] pairs. ES2017. | Object.entries({a:1}) // [["a",1]] |
| Object.fromEntries() | object | Creates an object from an iterable of [key, value] pairs. ES2019. | Object.fromEntries([["a",1]]) // {a:1} |
| Object.assign() | object | Copies enumerable own properties from sources to a target. Shallow. | Object.assign({},{a:1},{b:2}) // {a:1,b:2} |
| Object.freeze() | object | Freezes an object: no adding, removing, or modifying properties. Shallow. | Object.freeze({a:1}).a = 2 // silent fail |
| Object.seal() | object | Seals an object: existing properties can change, but none can be added/removed. | Object.seal({a:1}); obj.b=2; // ignored |
| Object.create() | object | Creates a new object with the specified prototype and optional properties. | Object.create(null) // no prototype |
| Object.defineProperty() | object | Defines a new property or modifies an existing one with detailed descriptors. | Object.defineProperty(obj,"x",{value:42}) |
| Object.getPrototypeOf() | object | null | Returns the prototype of the specified object. | Object.getPrototypeOf([]) === Array.prototype |
| Object.hasOwn() | boolean | Checks if an object has the specified own property. ES2022. Replaces hasOwnProperty. | Object.hasOwn({a:1},"a") // true |
| Object.is() | boolean | Determines if two values are the same value. Unlike ===, treats NaN===NaN as true. | Object.is(NaN, NaN) // true |
| Object.groupBy() | object | Groups iterable elements by a callback return value. ES2024. | Object.groupBy([1,2,3],n=>n%2?"odd":"even") |
| Object.getOwnPropertyNames() | string[] | Returns all own property names, including non-enumerable. | Object.getOwnPropertyNames({a:1}) |
| Object.getOwnPropertyDescriptor() | descriptor | Returns the property descriptor for an own property. | Object.getOwnPropertyDescriptor(obj,"x") |
Map vs. WeakMap vs. Object Comparison
Choosing between Object, Map, and WeakMap depends on your key types, performance requirements, and garbage collection needs. This table compares them across every relevant dimension.
Map vs. WeakMap vs. Object — When to Use Each
10 rows
| Aspect | Object | Map | WeakMap | Recommendation |
|---|---|---|---|---|
| Key Types | Strings and Symbols only | Any value (objects, functions, primitives) | Objects only (no primitives) | Use Map when you need non-string keys |
| Key Order | Insertion order (with integer key exceptions) | Insertion order (guaranteed) | No iteration (not enumerable) | Map for reliable ordering |
| Size | Manual counting: Object.keys(obj).length | map.size property | Not available | Map.size is O(1) vs Object.keys is O(n) |
| Iteration | for...in, Object.keys/values/entries | for...of, forEach, keys/values/entries | Not iterable | Map has native iterability |
| Performance (frequent add/delete) | Slower due to shape transitions | Optimized for frequent operations | Same as Map | Map for high-churn key-value stores |
| Default Keys | Has prototype chain (toString, etc.) | No default keys | No default keys | Map/WeakMap avoid prototype pollution |
| Garbage Collection | Values retained while object lives | Values retained while map lives | Values GC-ed when key object is GC-ed | WeakMap for private data and caches on objects |
| JSON Serialization | Native via JSON.stringify | Manual: [...map.entries()] | Not serializable | Object for JSON interchange |
| Destructuring | Natively supported | Not supported directly | Not supported | Object for parameter patterns |
| TypeScript Support | Index signatures, interfaces, type literals | Map<K, V> generic | WeakMap<K, V> generic | Object types more ergonomic in TS |
JavaScript Runtime Comparison: Node.js vs. Deno vs. Bun
The JavaScript server-side landscape is no longer Node.js alone. Deno (2020) prioritizes security and web standards. Bun (2023) prioritizes raw speed with a JavaScriptCore engine. All three are production-ready in 2026, and the choice depends on your priorities: ecosystem maturity (Node), security model (Deno), or performance (Bun).
Runtime Performance Benchmarks 2026
7 rows
| Benchmark | Node.js | Deno | Bun | Unit |
|---|---|---|---|---|
| HTTP Hello World (req/s) | 48000 | 72000 | 110000 | req/s |
| File Read 1MB (ms) | 2.1 | 1.8 | 0.9 | ms |
| JSON Parse 10MB (ms) | 45 | 42 | 28 | ms |
| Cold Start (ms) | 35 | 28 | 12 | ms |
| Install 100 deps (s) | 12.5 | 8.2 | 3.1 | s |
| Bundle Size React App (s) | 8.4 | 7.1 | 2.8 | s |
| Test Suite 500 tests (s) | 14.2 | 11.8 | 5.4 | s |
Glossary (70+ Terms)
A comprehensive glossary of JavaScript terminology covering data types, scope, functions, async programming, objects, prototypes, modules, iterators, metaprogramming, DOM, Web APIs, tooling, and upcoming features.
Primitive
Data TypesOne of the seven immutable data types in JavaScript: string, number, bigint, boolean, undefined, symbol, and null. Primitives are compared by value, not by reference. They are immutable: you cannot change the value 42, only create new values. When you call methods on primitives (like "hello".toUpperCase()), JavaScript briefly wraps them in a temporary object.
Reference Type
Data TypesNon-primitive values (objects, arrays, functions, dates, etc.) stored as references in memory. Two variables can point to the same object. Assignment copies the reference, not the value, so modifying one variable affects all variables pointing to the same object. Use structuredClone() or spread to create independent copies.
undefined
Data TypesA primitive value automatically assigned to variables that have been declared but not yet assigned a value. Also returned by functions without a return statement, and accessing non-existent object properties. typeof undefined returns "undefined". It is a type with exactly one value.
null
Data TypesA primitive value representing the intentional absence of any object value. Often used to explicitly clear a variable or indicate "no value". typeof null returns "object" (a historical bug in JavaScript that can never be fixed). Use === null to check for null.
Symbol
Data TypesA primitive data type introduced in ES2015 for creating unique identifiers. Every Symbol() call creates a new, unique symbol, even with the same description. Used for: private-ish object properties, avoiding name collisions, well-known symbols (Symbol.iterator, Symbol.toPrimitive). Symbols are not enumerable in for...in loops.
BigInt
Data TypesA numeric data type for arbitrarily large integers, introduced in ES2020. Created with the n suffix (42n) or BigInt() constructor. Cannot be mixed with Number in arithmetic operations without explicit conversion. No precision loss for integers beyond Number.MAX_SAFE_INTEGER (2^53 - 1).
Type Coercion
Data TypesJavaScript automatic conversion of values from one type to another during operations. "5" + 3 returns "53" (string concatenation), but "5" - 3 returns 2 (numeric subtraction). == uses coercion (1 == "1" is true), === does not (1 === "1" is false). Always use === to avoid coercion surprises.
Truthy/Falsy
Data TypesAll values in JavaScript are either truthy or falsy in boolean contexts. The eight falsy values are: false, 0, -0, 0n, "" (empty string), null, undefined, and NaN. Everything else is truthy, including [] (empty array), {} (empty object), and "0" (string zero). This matters for if/while conditions and logical operators.
Hoisting
ScopeJavaScript behavior of moving variable and function declarations to the top of their scope during compilation. var declarations are hoisted and initialized as undefined. let and const are hoisted but NOT initialized, creating a Temporal Dead Zone (TDZ) from the start of the scope until the declaration. Function declarations are fully hoisted (can be called before their declaration).
Temporal Dead Zone (TDZ)
ScopeThe region between the start of a scope and the point where a let or const variable is declared. Accessing the variable in this zone throws a ReferenceError. This exists because let/const are hoisted but not initialized, unlike var which is hoisted and initialized as undefined. TDZ enforcement prevents use-before-declaration bugs.
Closure
FunctionsA function combined with references to its surrounding lexical scope, retained even after the outer function has returned. Closures let inner functions access variables from outer functions after those functions have finished executing. Used for data privacy, factories, partial application, and maintaining state in functional patterns. Every function in JavaScript creates a closure.
Lexical Scope
ScopeJavaScript scoping model where the accessibility of variables is determined by their position in the source code at write time, not at runtime. Inner functions can access variables from their enclosing scopes. This is in contrast to dynamic scoping where variable lookup follows the call chain. Also called static scoping.
Arrow Function
FunctionsA concise function syntax introduced in ES2015: (params) => expression. Arrow functions do not have their own this, arguments, super, or new.target bindings. They inherit this from the enclosing lexical scope. They cannot be used as constructors (no new keyword). Best for callbacks and short functions.
IIFE (Immediately Invoked Function Expression)
FunctionsA function that is executed immediately after it is created. Syntax: (function() { ... })() or (() => { ... })(). Historically used to create private scopes before let/const and modules. Still useful for one-time setup code and isolating side effects.
Higher-Order Function
FunctionsA function that takes one or more functions as arguments, returns a function, or both. Examples: map(), filter(), reduce(), addEventListener(). Higher-order functions are fundamental to functional programming in JavaScript. They enable composition, abstraction, and code reuse.
Callback
FunctionsA function passed as an argument to another function, to be called at a later time. Callbacks are JavaScript original async pattern: addEventListener("click", callback), setTimeout(callback, 1000), fs.readFile(path, callback). Nested callbacks create "callback hell", which Promises and async/await solve.
Promise
AsyncAn object representing the eventual completion or failure of an asynchronous operation. A Promise is in one of three states: pending, fulfilled (resolved with a value), or rejected (failed with a reason). Created with new Promise((resolve, reject) => {...}). Consumed with .then(), .catch(), .finally(). Chainable. Foundation of modern async JavaScript.
async/await
AsyncSyntactic sugar over Promises introduced in ES2017. async declares a function that always returns a Promise. await pauses execution until the Promise settles, then returns the resolved value. Makes asynchronous code look and read like synchronous code. Error handling with try/catch. Cannot use await outside an async function (except top-level await in modules).
Event Loop
AsyncThe mechanism that allows JavaScript to perform non-blocking operations despite being single-threaded. The event loop continuously checks: (1) execute all synchronous code in the call stack, (2) execute all microtasks (Promise callbacks, queueMicrotask), (3) execute one macrotask (setTimeout, setInterval, I/O), then repeat. Understanding the event loop is essential for predicting execution order.
Microtask
AsyncA short function executed after the currently running script and before returning to the event loop. Promise .then/.catch/.finally callbacks, queueMicrotask(), and MutationObserver callbacks are microtasks. Microtasks have higher priority than macrotasks (setTimeout, setInterval). All microtasks are flushed before the next macrotask.
Macrotask
AsyncA task queued by the browser or runtime, processed one per event loop iteration. Includes: setTimeout, setInterval, setImmediate (Node.js), I/O operations, UI rendering. Only one macrotask is executed per loop iteration, then all microtasks are flushed, then the next macrotask runs.
Prototype
ObjectsThe mechanism by which JavaScript objects inherit features from one another. Every object has an internal [[Prototype]] link to another object (its prototype). When accessing a property that does not exist on an object, JavaScript follows the prototype chain until it finds the property or reaches null. Object.getPrototypeOf() retrieves it.
Prototype Chain
ObjectsThe chain of prototype links from an object to Object.prototype (and finally null). Property lookup traverses this chain: obj.toString() works because toString is on Object.prototype. Arrays get array methods because Array.prototype is in their chain. Prototype chain is the foundation of JavaScript inheritance.
Class
ObjectsES2015 syntactic sugar over prototype-based inheritance. class declarations create constructor functions with a cleaner syntax. Features: constructor, instance methods, static methods, getters/setters, private fields (#field), static blocks. Under the hood, classes still use prototypes. Classes are not hoisted like function declarations.
this
ObjectsA keyword whose value depends on HOW a function is called, not where it is defined. In a method: this = the object. In a regular function: this = undefined (strict) or globalThis. In an event handler: this = the element. In an arrow function: this = enclosing lexical this. With call/apply/bind: this = the specified object. The "this" binding is one of JavaScript most confusing features.
Destructuring
SyntaxES2015 syntax for unpacking values from arrays or properties from objects into distinct variables. Array: const [a, b] = [1, 2]. Object: const { name, age } = person. Supports default values, renaming, rest elements, and nested destructuring. Extremely common in modern JavaScript, especially for function parameters and import statements.
Spread Operator
SyntaxThe ... syntax used to expand an iterable into individual elements. Array spread: [...arr1, ...arr2] merges arrays. Object spread: { ...obj1, ...obj2 } merges objects (shallow). Function call: fn(...args) spreads array as arguments. Creates shallow copies. Spread appeared in ES2015 for arrays/calls and ES2018 for objects.
Rest Parameters
SyntaxThe ... syntax in function parameter lists that collects remaining arguments into an array. function fn(first, ...rest) gathers all arguments after the first into the rest array. Replaces the old arguments object. Rest parameters are a real Array, unlike arguments which is array-like. Must be the last parameter.
Optional Chaining
SyntaxThe ?. operator that short-circuits to undefined when the left side is null or undefined, instead of throwing a TypeError. obj?.prop?.nested avoids "Cannot read property of undefined" errors. Works with property access (?.prop), method calls (?.method()), and bracket notation (?.[key]). Introduced in ES2020.
Nullish Coalescing
SyntaxThe ?? operator that returns the right-hand operand when the left-hand operand is null or undefined (but NOT for other falsy values like 0 or ""). value ?? "default" only uses the default if value is null or undefined. Unlike ||, which returns the right side for ANY falsy value. Introduced in ES2020.
Template Literal
SyntaxString literals delimited by backticks (`) that support embedded expressions (${expr}), multi-line strings without \n, and tagged templates. Tagged templates allow custom processing of template literals: html`<p>${text}</p>`. Foundation of many DSLs (styled-components, GraphQL queries, Lit HTML).
ES Module
ModulesThe standard JavaScript module system using import and export keywords. Named exports: export function fn() {}. Default exports: export default class {}. Imports: import { fn } from "./mod.js". Modules are strict mode by default, have their own scope, are evaluated once (singleton), and support static analysis for tree-shaking.
Dynamic Import
ModulesThe import() expression that loads a module asynchronously at runtime, returning a Promise. Used for code splitting, lazy loading, and conditional imports. Syntax: const mod = await import("./module.js"). Unlike static import declarations, dynamic imports can appear anywhere in code and accept variables as the module specifier.
CommonJS
ModulesNode.js original module system using require() and module.exports. Synchronous loading. Still widely used in Node.js but being gradually replaced by ES Modules. Cannot be tree-shaken by bundlers because require() calls can be dynamic. ESM interop with CJS requires careful handling.
Iterator
IteratorsAn object that implements the iterator protocol: it has a next() method that returns { value, done } objects. Arrays, strings, Maps, Sets, and generators are all iterable. Used by for...of loops, spread syntax, destructuring, and Array.from(). Custom iterables implement Symbol.iterator.
Generator
IteratorsA function declared with function* that can pause and resume execution using yield. Calling a generator returns an iterator. Generators produce values lazily (on demand), making them ideal for infinite sequences, pagination, and cooperative multitasking. Can receive values via next(value) and throw errors via throw().
for...of
IteratorsA loop that iterates over iterable objects (arrays, strings, Maps, Sets, generators). Unlike for...in (which iterates over enumerable property names), for...of iterates over values. The iteration is driven by the Symbol.iterator protocol. Supports break and continue. Introduced in ES2015.
Proxy
MetaprogrammingAn object that wraps another object and intercepts fundamental operations (property access, assignment, function calls, etc.) via handler traps. Enables: validation, logging, negative array indices, reactive data binding, and revocable references. Created with new Proxy(target, handler). 13 available traps.
Reflect
MetaprogrammingA built-in object that provides methods for interceptable JavaScript operations. Every Proxy trap has a corresponding Reflect method. Reflect.get(obj, "prop") is equivalent to obj.prop but returns a value instead of potentially throwing. Always use Reflect inside Proxy traps to forward the default behavior.
WeakRef
MemoryA class introduced in ES2021 that holds a weak reference to an object, allowing it to be garbage collected. WeakRef.deref() returns the object if it has not been GC-ed, or undefined. Used with FinalizationRegistry for cleanup callbacks. Useful for caches where you do not want to prevent garbage collection.
FinalizationRegistry
MemoryAn ES2021 class that lets you request a callback when an object is garbage collected. Register with registry.register(target, heldValue). The callback receives heldValue after target is GC-ed. Used for cleanup: closing file handles, clearing caches, releasing resources. GC timing is non-deterministic.
structuredClone()
ObjectsA global function introduced in 2022 (HTML spec) that creates a deep clone of a value. Handles circular references, Date, RegExp, Map, Set, ArrayBuffer, and most built-in types. Cannot clone functions, DOM nodes, or Error objects. Replaces JSON.parse(JSON.stringify()) which loses Dates, undefined, and fails on circular refs.
Temporal API
Date/TimeA Stage 3 TC39 proposal (expected ES2026) to replace the Date object with a modern date/time library. Provides Temporal.PlainDate, Temporal.PlainTime, Temporal.ZonedDateTime, and more. Immutable, timezone-aware, calendar-aware, and unambiguous. Eliminates the need for libraries like Moment.js and date-fns.
Promise.all()
AsyncTakes an iterable of Promises and returns a single Promise that resolves when ALL input promises resolve (with an array of results) or rejects when ANY input promise rejects (with the first rejection reason). Use for parallel operations where all must succeed. Short-circuits on first rejection.
Promise.allSettled()
AsyncTakes an iterable of Promises and returns a Promise that resolves when ALL have settled (fulfilled or rejected). Returns an array of { status, value/reason } objects. Unlike Promise.all, never rejects. Use when you need results from all promises regardless of individual success/failure. ES2020.
Promise.race()
AsyncTakes an iterable of Promises and returns a Promise that settles with the result of the first Promise to settle (either fulfilled or rejected). Use for timeout patterns: race a fetch against a setTimeout rejection. The other promises continue running but their results are ignored.
Promise.any()
AsyncTakes an iterable of Promises and returns a Promise that fulfills with the first fulfilled Promise value. Ignores rejections unless ALL promises reject, in which case it rejects with an AggregateError. Use for "first success wins" patterns like trying multiple API endpoints. ES2021.
Promise.withResolvers()
AsyncReturns an object { promise, resolve, reject } for more flexible Promise construction. Eliminates the need to extract resolve/reject from the constructor callback. ES2024. const { promise, resolve } = Promise.withResolvers(); someEmitter.on("done", resolve);
AbortController
AsyncA web API for cancelling asynchronous operations. Create with new AbortController(), pass controller.signal to fetch() or other AbortSignal-aware APIs, call controller.abort() to cancel. AbortSignal.timeout(ms) creates auto-aborting signals. Essential for cancelling fetch requests, event listeners, and streams.
Web Worker
Web APIsA browser API for running JavaScript in a background thread, separate from the main thread. Workers have their own global scope, cannot access the DOM, and communicate with the main thread via postMessage(). Use for CPU-intensive operations (image processing, parsing, encryption) to keep the UI responsive.
Service Worker
Web APIsA type of Web Worker that acts as a programmable network proxy, intercepting fetch requests. Enables offline functionality, push notifications, and background sync. Registered via navigator.serviceWorker.register(). Lifecycle: install, activate, fetch events. Foundation of Progressive Web Apps (PWAs).
Fetch API
Web APIsThe modern API for making HTTP requests, replacing XMLHttpRequest. Returns Promises. Syntax: const response = await fetch(url, options). Supports Request/Response objects, streams, AbortSignal, and various body types (JSON, FormData, Blob). Does NOT reject on HTTP error status codes (404, 500) — check response.ok.
DOM (Document Object Model)
Web APIsThe tree-structured representation of an HTML document that JavaScript interacts with. The DOM API provides methods to create, read, update, and delete elements. Key methods: document.querySelector(), element.addEventListener(), element.classList, element.dataset. Modern DOM APIs are more powerful and ergonomic than the jQuery era.
MutationObserver
Web APIsA web API for watching changes to the DOM tree. Observes: child additions/removals, attribute changes, text content changes. Created with new MutationObserver(callback). More performant than deprecated Mutation Events. Callbacks fire as microtasks. Used by frameworks for reactivity and by accessibility tools.
IntersectionObserver
Web APIsA web API for detecting when an element enters or exits the viewport (or another element). Used for: lazy loading images, infinite scrolling, triggering animations on scroll, analytics (viewability). More performant than scroll event listeners. Callback fires when intersection ratio crosses configured thresholds.
ResizeObserver
Web APIsA web API for watching size changes on elements. Fires when an element dimensions change (not just viewport resize). Used by container query polyfills, responsive components, and chart libraries. More efficient than window resize events for per-element sizing. Callback receives ResizeObserverEntry with contentRect dimensions.
Strict Mode
CoreA restricted variant of JavaScript activated with "use strict" or automatically in ES modules and class bodies. Strict mode: prevents accidental globals, throws on assignment to read-only properties, forbids duplicate parameter names, changes this to undefined in unbound functions, forbids with statement, and makes eval() safer. Always use strict mode.
Tree Shaking
ToolingA dead-code elimination technique used by bundlers (webpack, Rollup, Vite) to remove unused exports from the final bundle. Only works with ES Module syntax (import/export), not CommonJS (require). Code must be side-effect-free for safe tree shaking. Marked with "sideEffects": false in package.json.
Source Map
ToolingA file that maps minified/compiled code back to original source code. Enables debugging compiled code (TypeScript, bundled JS, minified code) in browser DevTools. Generated by build tools. Format: .map files with JSON mapping data. Should not be deployed to production in most cases (debug only).
Polyfill
ToolingCode that provides a modern feature on older browsers or environments that do not natively support it. For example, a polyfill for Array.flat() adds the method to Array.prototype if it is missing. Unlike transpilation (syntax transformation), polyfilling adds runtime implementations of missing APIs. core-js is the most comprehensive polyfill collection.
Transpilation
ToolingThe process of converting modern JavaScript syntax into older syntax that runs on more browsers. Babel converts ES2015+ arrow functions, classes, async/await into ES5 equivalents. TypeScript also transpiles TS to JS. Unlike polyfills (which add missing APIs), transpilation transforms syntax.
Event Delegation
DOMA pattern where a single event listener on a parent element handles events from its children, using event.target to identify the actual element that triggered the event. Efficient for dynamic content (no need to add/remove listeners as children change) and reduces memory usage. document.querySelector(".list").addEventListener("click", e => { if(e.target.matches("li")) {...} });
Event Bubbling
DOMThe default DOM event propagation model where events start at the target element and bubble up through its ancestors to the document root. When you click a button inside a div inside body, the click event fires on button, then div, then body, then document. Stop with event.stopPropagation(). Event delegation depends on bubbling.
Event Capturing
DOMThe opposite of bubbling: events travel from the document root down to the target element. Triggered by passing { capture: true } or true as the third argument to addEventListener. Capturing phase happens BEFORE the bubbling phase. Rarely used directly, but useful for intercepting events before they reach child elements.
Shadow DOM
Web ComponentsA web standard for encapsulating DOM trees and CSS styles within a component. Attached with element.attachShadow({ mode: "open" }). Styles inside shadow DOM do not leak out, and external styles do not penetrate in (with some exceptions via CSS custom properties and ::part()). Foundation of Web Components.
Custom Element
Web ComponentsA web standard for defining new HTML elements with custom behavior. Define with class MyElement extends HTMLElement and customElements.define("my-element", MyElement). Lifecycle callbacks: connectedCallback, disconnectedCallback, attributeChangedCallback. Combined with Shadow DOM to create reusable Web Components.
Garbage Collection
MemoryThe automatic memory management process in JavaScript engines. The garbage collector identifies objects that are no longer reachable (no references point to them) and reclaims their memory. Modern engines use generational mark-and-sweep algorithms. Memory leaks occur when references are accidentally retained (closures, event listeners, global variables, DOM references).
Tagged Template
SyntaxA function called with a template literal. The function receives the string parts as an array and the interpolated values as separate arguments. Syntax: tagFn`Hello ${name}!`. Used for: HTML sanitization (html``), internationalization, styled-components CSS, and SQL query builders (sql``). Powerful metaprogramming tool.
Iterator Helpers
IteratorsES2025 methods added to Iterator.prototype: .map(), .filter(), .take(), .drop(), .flatMap(), .reduce(), .toArray(), .forEach(), .some(), .every(), .find(). Enable lazy transformation of any iterable without converting to an array first. Compose pipelines on generators and custom iterators efficiently.
Set Methods
CollectionsES2025 methods on Set.prototype: .union(), .intersection(), .difference(), .symmetricDifference(), .isSubsetOf(), .isSupersetOf(), .isDisjointFrom(). Provide mathematical set operations natively, eliminating the need for manual implementations or lodash. All return new Set instances (non-mutating).
Pattern Matching
FutureA TC39 Stage 2 proposal for declarative value testing and destructuring. Syntax: match (value) { when ({ type: "success", data }) => ...; when ({ type: "error", message }) => ... }. Similar to switch but with destructuring, guards, and exhaustiveness checking. Expected in ES2026 or ES2027.
FAQ (25 Questions)
Try It Yourself
Use these embedded tools to practice JavaScript concepts discussed in this guide.
Try it yourself
Json Formatter
Try it yourself
Regex Tester
Raw Data Downloads
All datasets from this report are available for download in CSV format under a Creative Commons Attribution 4.0 license.
Citations and Sources
Try These Tools for Free
Put this knowledge into practice with our browser-based tools. No signup needed.
JSON Formatter
Format, validate, and beautify JSON data with syntax highlighting.
JS Minifier
Minify JavaScript code to reduce file size for production.
Regex Tester
Test and debug regular expressions with real-time matching and explanations.
Code Play
Write and run HTML, CSS, and JavaScript with live preview, console output, and shareable URLs.
JSON Editor
Visual JSON tree editor with add/remove keys, type changes, search, undo/redo, and import/export.
Timestamp
Convert Unix timestamps to human-readable dates and vice versa.
Epoch Convert
Convert Unix epoch timestamps to human-readable dates. Supports ms, s, ISO 8601, RFC 2822. Batch convert.
Related Research Reports
The Complete TypeScript Guide 2026: Types, Generics, Utility Types & Compiler Options
The definitive TypeScript reference for 2026. Covers basic types, interfaces vs types, generics, 21 utility types, conditional types, mapped types, template literal types, decorators, enums, modules, declaration files, 35 compiler options, and JS migration. 30,000+ words.
The Complete React Guide 2026: Hooks, Server Components, Next.js, State Management & Performance
The definitive React reference for 2026. Covers hooks, Server Components, Next.js, state management, rendering patterns, performance optimization, and the React Compiler. 28,000+ words.
The Complete Node.js Guide 2026: Event Loop, Streams, Express, Fastify, Bun & Deployment
The definitive Node.js reference for 2026. Covers the event loop, streams, clusters, Express, Fastify, NestJS, Bun comparison, built-in modules, and production deployment. 28,000+ words.