ES6+ Cheatsheet - ES6+ JavaScript Syntax Reference

This reference is for JavaScript developers who want to write modern code instead of callback-and-var-era patterns, covering the ES2015+ features that reshaped daily use: let/const block scoping, arrow functions, destructuring, template literals, Promise/async flow, import/export modules, classes, Map/Set, and iterators. Unlike a dry spec list, entries are grouped by the situation each feature fixes — scope confusion, unwieldy callbacks, or verbose object access. After reading you should be able to replace var with block-scoped bindings, flatten nested callbacks with async/await, and structure multi-file projects with import/export.

Languages·44 commands·Last updated 2026-07-21

Variables & Functions 9

let x = 1

Block-scoped variable

const PI = 3.14

Block-scoped constant

const fn = (x) => x * 2

Arrow function

const fn = (x, y = 1) => x + y

Default parameter

const fn = (...args) => args

Rest parameters

fn(...[1, 2, 3])

Spread operator

user?.name

Optional chaining (short-circuits on null/undefined)

value ?? "default"

Nullish coalescing (only null/undefined fallback)

`Hello ${name}`

Template string interpolation

Destructuring 5

const [a, b] = [1, 2]

Array destructuring

const { name, age } = user

Object destructuring

const { name: userName } = user

Rename while destructuring

const [a, ...rest] = [1, 2, 3]

Destructuring with rest

function fn({ name, age = 18 }) {}

Function parameter destructuring

Asynchronous 8

new Promise((resolve, reject) => {})

Create a Promise

promise.then().catch().finally()

Chained calls

Promise.all([p1, p2])

Run all in parallel

Promise.race([p1, p2])

Take the first to finish

async function fn() { await promise }

async/await

try { await fn() } catch (e) {}

Error handling

Promise.allSettled([p1, p2])

All settled (success or fail)

Promise.any([p1, p2])

Any (first to succeed)

Modules 6

export const fn = () => {}

Named export

export default fn

Default export

import { fn } from "./module"

Named import

import fn from "./module"

Default import

import * as mod from "./module"

Import everything

import("./module").then(mod => {})

Dynamic import

Classes & Data Structures 8

class User { constructor() {} }

Class definition

class Admin extends User {}

Inheritance

const map = new Map()

Map (keys can be objects)

const set = new Set([1, 2, 3])

Set (deduplicated)

for (const [k, v] of map) {}

Iterate a Map

Array.from(set)

Set to array

Symbol("id")

Unique identifier

for (const item of iterable) {}

Iterator protocol

Proxy/Reflect & Generators 8

new Proxy(target, handler)

Create a proxy to intercept operations

handler.get(target, key, receiver)

Intercept property reads

handler.set(target, key, value)

Intercept property sets

Reflect.get(obj, key)

Reflect API (forward default behavior)

function* gen() { yield 1; yield 2; }

Generator function

const it = gen(); it.next(); it.next()

Manually iterate a generator

for (const v of gen()) {}

Consume a generator with for...of

const wm = new WeakMap()

WeakMap (object keys only, weak refs)

Tips

const objects/arrays are still mutable inside; only the reference is immutable.
Arrow functions have no this of their own; they inherit the enclosing scope.
async/await is syntactic sugar over Promises; catch errors with try/catch.
?. and ?? are ES2020: ?. short-circuits to undefined, ?? triggers only on null/undefined.
Proxy is commonly used for reactivity (e.g. Vue 3 reactive); Reflect forwards the matching default behavior.
A generator pauses at yield and returns a value; calling next() resumes execution.
WeakMap/WeakSet keys are weak references and don't block GC - good for caches.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Official Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.