JavaScript ES6+ Features Reference
Key JavaScript features from ES6 through ES2022: arrow functions, template literals, destructuring, spread, async/await, optional chaining, nullish coalescing, and top-level await.
JavaScript features introduced from ES2015 onward, each with the version and an example: arrow functions, template literals, destructuring, spread, async/await, optional chaining, nullish coalescing and top-level await, plus classes, modules, promises, generators, maps and sets, BigInt, private fields and newer array methods.
Use it when
- You need the ECMAScript version that introduced a feature and its syntax.
- You are deciding what a browser or Node version supports.
Watch out for
- Browser and runtime support lags the specification; check compatibility tables or a transpiler configuration.
- Newer proposals appear on the standards track before they are final; the list covers shipped features.
The data
Features
20 rows
| Name | Version | Description | Example |
|---|---|---|---|
| Arrow Functions | ES6 (2015) | Concise function syntax with lexical this binding | const add = (a, b) => a + b; |
| Template Literals | ES6 (2015) | String interpolation with backticks and ${} | `Hello, ${name}!` |
| Destructuring | ES6 (2015) | Unpack values from arrays or objects into variables | const {name, age} = person; |
| Spread Operator | ES6 (2015) | Expand iterables into individual elements | const merged = [...arr1, ...arr2]; |
| Async/Await | ES8 (2017) | Syntactic sugar over Promises for async code | const data = await fetch(url); |
| Optional Chaining | ES2020 | Safe nested property access without null check | user?.profile?.name |
| Nullish Coalescing | ES2020 | Fallback for null/undefined only (not falsy) | const x = value ?? defaultValue; |
| Top-level Await | ES2022 | Use await outside async functions in modules | const config = await loadConfig(); |
| Classes | ES6 (2015) | Syntax for constructor functions and prototype-based inheritance | class Animal { constructor(name) { this.name = name; } speak() { return this.name; } } |
| Modules | ES6 (2015) | Standard import and export of code between files | import { add } from './math.js'; export const pi = 3.14; |
| Promises | ES6 (2015) | Objects representing the eventual result of an asynchronous operation | fetch(url).then(res => res.json()).catch(console.error) |
| Generators | ES6 (2015) | Functions that can pause and resume, producing a sequence of values | function* count() { yield 1; yield 2; } |
| Map and Set | ES6 (2015) | Collections with arbitrary keys and unique values | const m = new Map([['a', 1]]); const s = new Set([1, 2, 2]); |
| Array.prototype.flat and flatMap | ES2019 | Flatten nested arrays and map then flatten | [1, [2, [3]]].flat(2) // [1, 2, 3] |
| Object.fromEntries | ES2019 | Builds an object from key-value pairs | Object.fromEntries([['a', 1], ['b', 2]]) // { a: 1, b: 2 } |
| BigInt | ES2020 | Arbitrary-precision integers | 2n ** 64n |
| Logical Assignment | ES2021 | Combine logical operators with assignment | a ||= 1; b &&= 2; c ??= 3; |
| Private Class Fields | ES2022 | Fields that are only accessible inside the class | class C { #secret = 1; get() { return this.#secret; } } |
| Array.prototype.at | ES2022 | Index with negative positions counting from the end | [10, 20, 30].at(-1) // 30 |
| Array.prototype.toSorted | ES2023 | Sort a copy of an array without mutating it | const sorted = arr.toSorted((a, b) => a - b); |
Fields
The shape of this dataset, read from the data itself: every column, its type and a real value. Agents can use this to plan a query without fetching the whole document.
| Section | Field | Type | Example |
|---|---|---|---|
| features | name | string | Arrow Functions |
| features | version | string | ES6 (2015) |
| features | description | string | Concise function syntax with lexical this bindi… |
| features | example | string | const add = (a, b) => a + b; |
Fetch the same bytes
The static files contain the same reference rows as the API, with no API rate limit. Live metadata, such as view counts, may differ. Use the API for content negotiation; use the static files for a cacheable snapshot.
curl "https://yjtoon.com/api/dataset/javascript-es6-features?format=toon"
const res = await fetch( "https://yjtoon.com/static-data/dataset/javascript-es6-features.toon" ); const toon = await res.text();
Rate limit: 120 requests per minute per IP, no key and no signup. API reference →