$devvkit resources --cheatsheet javascript-es6+-cheatsheet

JavaScript ES6+ Cheatsheet

[programming]

Every essential modern JavaScript pattern: variables, functions, arrays, objects, promises, async/await, and modules, with syntax and real use cases.88 commands · 8 sections

Modern JavaScript (ES6+) changed how the language is written. This cheatsheet covers the patterns you use daily: variables and scoping, arrow functions, destructuring, spread, template literals, array methods, promises and async/await, modules, and classes.

Every entry shows real syntax followed by the use case: when and why you reach for it.

Variables & Scoping8

$const x = 42

Use case: Constant binding: use by default; reassignment throws.Example: const apiUrl = "https://www.devvkit.com"

$let x = 42

Use case: Reassignable block-scoped variable: for counters and mutable state.Example: let count = 0; count++

$var x = 1

Use case: Function-scoped legacy declaration: avoid in modern code.Example: var old = true // avoid

$typeof x

Use case: Check a value's type at runtime.Example: if (typeof id !== "number") throw ...

$x ?? "default"

Use case: Nullish coalescing: fallback only for null/undefined, not 0 or "".Example: const port = process.env.PORT ?? 3000

$x || "default"

Use case: Logical OR fallback: falls back for ALL falsy values.Example: const name = user.name || "Anonymous"

$x?.prop

Use case: Optional chaining: safe access without TypeError.Example: const city = user?.address?.city

$let x = 1, y = 2; [x, y] = [y, x]

Use case: Swap variables without a temp.Example: [a, b] = [b, a]

Functions & Arrow Functions8

$const add = (a, b) => a + b

Use case: Arrow function with implicit return: short callbacks.Example: const double = n => n * 2

$const add = (a, b) => { return a + b }

Use case: Arrow function with explicit body: multiple statements.Example: const validate = (v) => { if (!v) throw Error(); return v }

$function greet(name) { ... }

Use case: Function declaration: hoisted, has its own this.Example: function slugify(s) { return s.toLowerCase().replace(/\s+/g, "-") }

$(arg) => arg

Use case: Implicit-return arrow: the standard map/filter callback.Example: names.map(u => u.name)

$function f(...args) { }

Use case: Rest parameters: collect remaining arguments.Example: const sum = (...nums) => nums.reduce((a, b) => a + b, 0)

$function f(a = 10) { }

Use case: Default parameter values.Example: function fetchData(url, timeout = 3000) { }

$f.bind(this)

Use case: Bind this explicitly: legacy; prefer arrows.Example: btn.addEventListener("click", handler.bind(this))

$fn.call(thisArg, a, b) / fn.apply(thisArg, [a, b])

Use case: Invoke with a custom this: call vs apply differ in args style.Example: Math.max.apply(null, [1, 5, 3])

Objects & Arrays25

$const o = { name: "x" }; o.age = 30

Use case: Create and mutate an object: even const objects are mutable.Example: const user = { name: "Jane" }; user.plan = "pro"

$const { name, age } = o

Use case: Object destructuring: pull properties into variables.Example: const { data, error } = await api.get()

$const { a = 1 } = o

Use case: Destructure with a default: missing keys get fallback.Example: const { port = 3000 } = config

$const { a: alias } = o

Use case: Destructure with renaming.Example: const { data: payload } = response

$const { ...rest } = o

Use case: Object rest: everything except the named keys.Example: const { password, ...safeUser } = user

$const merged = { ...a, ...b }

Use case: Spread merge: b overrides a. Shallow only.Example: const defaults = { ...base, ...overrides }

$Object.keys(o) / Object.values(o) / Object.entries(o)

Use case: Iterate over an object.Example: Object.entries(config).forEach(([k, v]) => ...)

$Object.fromEntries(arr)

Use case: Build an object from [key, value] pairs.Example: const map = Object.fromEntries(pairs)

$Object.assign({}, a, b)

Use case: Shallow merge into a new object: legacy spread alternative.Example: const cfg = Object.assign({}, def, over)

$arr.map(x => x * 2)

Use case: Transform every element into a new array.Example: const ids = users.map(u => u.id)

$arr.filter(x => x > 0)

Use case: Keep only matching elements.Example: const active = users.filter(u => u.status === "active")

$arr.reduce((acc, x) => acc + x, 0)

Use case: Fold an array into a single value.Example: const total = items.reduce((s, i) => s + i.price, 0)

$arr.find(x => x.id === 42)

Use case: First matching element (the element itself).Example: const user = users.find(u => u.id === id)

$arr.findIndex(x => x.id === 42)

Use case: Index of the first match: -1 if absent.Example: const i = items.findIndex(it => it.id === id)

$arr.some(x => x > 10) / arr.every(x => x > 10)

Use case: Any / all elements match a condition.Example: const hasAdmins = users.some(u => u.role === "admin")

$arr.includes(x)

Use case: Primitive membership check.Example: if (allowedRoles.includes(role))

$arr.sort((a, b) => a - b)

Use case: Numeric sort: always pass a comparator.Example: scores.sort((a, b) => b - a) // descending

$arr.slice(1, 3)

Use case: Copy a subarray: slice is non-destructive.Example: const page = items.slice(0, 10)

$arr.splice(1, 1, "new")

Use case: Remove/replace items IN PLACE: mutates the array.Example: items.splice(index, 1) // remove one

$arr.flat(2)

Use case: Flatten nested arrays.Example: const flat = [[1, 2], [3]].flat() // [1,2,3]

$arr.flatMap(x => [x, x * 2])

Use case: Map then flatten one level: one-to-many transforms.Example: const pairs = ids.flatMap(id => [id, -id])

$[...new Set(arr)]

Use case: Deduplicate an array.Example: const unique = [...new Set(tags)]

$Array.from({ length: 5 }, (_, i) => i)

Use case: Generate arrays: ranges and fills.Example: Array.from({length: 3}, () => []) // 3 empty arrays

$arr.forEach(x => ...)

Use case: Side-effect iteration: logging, DOM updates.Example: errors.forEach(e => console.error(e.message))

$arr.at(-1)

Use case: Last element without arr[arr.length - 1].Example: const last = items.at(-1)

Destructuring & Spread9

$const [first, second] = arr

Use case: Array destructuring: pull by position.Example: const [head, ...tail] = list

$const [, second] = arr

Use case: Skip elements with empty slots.Example: const [, b, , d] = coords

$const [a = 0] = arr

Use case: Array destructure with default: empty slots get fallback.Example: const [x = 1, y = 1] = point

$const [...rest] = arr

Use case: Rest element: everything after the named ones.Example: const [first, ...others] = args

$const { length } = "hello"

Use case: Destructure from any object: even strings.Example: const { length } = str

$function f({ name, age }) { }

Use case: Destructure parameters: named options objects.Example: function connect({ host, port = 5432 }) { }

$function f({ a = 1 } = {}) { }

Use case: Fully defaulted options parameter: no undefined destructure crash.Example: function render({ width = 800 } = {}) { }

$const copy = [...arr]

Use case: Shallow-copy an array: safe to sort/mutate the copy.Example: const sorted = [...scores].sort((a, b) => a - b)

$[...a, ...b]

Use case: Concatenate arrays.Example: const all = [...admins, ...users]

Strings & Template Literals10

$`Hello ${name}`

Use case: Template literal: interpolation.Example: `User ${id} is ${status}`

`multi
line
string`

Use case: Multi-line strings without \n escaping.Example: const sql = `SELECT * FROM users WHERE active = true`

$str.trim()

Use case: Strip surrounding whitespace.Example: const email = input.trim()

$str.split(",")

Use case: Split into an array.Example: const tags = csv.split(",")

$arr.join(", ")

Use case: Join an array into a string.Example: const label = names.join(", ")

$str.includes("x") / str.startsWith("a") / str.endsWith("b")

Use case: Substring checks: the modern indexOf replacements.Example: if (email.includes("@"))

$str.replaceAll("a", "b")

Use case: Replace EVERY occurrence (ES2021).Example: const kebab = name.replaceAll(" ", "-")

$str.padStart(5, "0")

Use case: Left-pad: zero-padded ids and numbers.Example: String(n).padStart(3, "0") // "007"

$str.slice(0, 10)

Use case: Substring by indices.Example: const snippet = text.slice(0, 140)

$str.repeat(3)

Use case: Repeat a string.Example: "-".repeat(width)

Promises & Async11

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

Use case: Create a promise: wrap async work.Example: const p = new Promise((res, rej) => setTimeout(() => res("done"), 1000))

$fetch(url).then(r => r.json())

Use case: Chain promises: fetch + parse.Example: fetch(url).then(r => r.json()).then(render)

$.then(...).catch(e => ...)

Use case: Handle rejection: attach catch at the end.Example: fetch(url).then(r => r.json()).catch(err => showError(err))

$Promise.all([p1, p2])

Use case: Wait for ALL promises: parallel requests; rejects fast on any failure.Example: const [users, posts] = await Promise.all([getUsers(), getPosts()])

$Promise.allSettled([p1, p2])

Use case: Wait for all, keeping successes AND failures: partial results.Example: const results = await Promise.allSettled(urls.map(fetch))

$Promise.race([p1, p2])

Use case: First to settle wins: timeouts.Example: const r = await Promise.race([fetch(url), timeout(5000)])

$Promise.any([p1, p2])

Use case: First to FULFILL wins: ignore early rejections.Example: const r = await Promise.any([cdn1.fetch(), cdn2.fetch()])

$async function f() { await x }

Use case: Async function: await inside without callback soup.Example: async function load() { const r = await fetch(url) return r.json() }

$try { await x } catch (e) { }

Use case: Handle async errors: try/catch works with await.Example: try { const r = await fetch(url) } catch { fallback() }

$async () => { }

Use case: Async arrow function: IIFE pattern for top-level await.Example: (async () => { const r = await fetch(url) })()

$const timeout = ms => new Promise(res => setTimeout(res, ms))

Use case: Sleep helper: await timeout(1000).Example: await timeout(1000)

Modules & Imports8

$import { x } from "./mod.js"

Use case: Named import.Example: import { slugify } from "./utils.js"

$import x from "./mod.js"

Use case: Default import: the module's main export.Example: import express from "express"

$import * as utils from "./mod.js"

Use case: Namespace import: everything under one object.Example: import * as fs from "node:fs/promises"

$import { x as y } from "./mod.js"

Use case: Rename imports.Example: import { default as Router } from "router"

$export const x = 42

Use case: Export a declaration inline.Example: export const VERSION = "1.0.0"

$export default function f() { }

Use case: Default export: main API of a module.Example: export default function main() { }

$export { a, b }

Use case: Export selected names from a module.Example: export { add, sub } from "./math.js"

$const m = await import("./mod.js")

Use case: Dynamic import: lazy-load heavy modules on demand.Example: const { parse } = await import("yaml")

Classes & Modern Syntax9

class User {
  constructor(name) { this.name = name }
}

Use case: ES6 class: constructor and methods.Example: class User { constructor(name) { this.name = name } greet() { return `Hi ${this.name}` } }

$class Admin extends User { }

Use case: Inheritance: subclass a class.Example: class Admin extends User { constructor(name) { super(name); this.role = "admin" } }

$class X { #private = 1 }

Use case: Private fields: # prefix, truly private (ES2022).Example: class Account { #balance = 0 deposit(n) { this.#balance += n } }

$class X { static create() { } }

Use case: Static method: call without an instance.Example: class Config { static fromEnv() { return new Config() } }

$class X { get value() { } }

Use case: Getter: computed properties.Example: class User { get initials() { return this.name[0] } }

$Symbol("id")

Use case: Unique symbol: private-ish keys and well-known protocol markers.Example: const ITERATOR = Symbol.iterator

$for (const x of arr)

Use case: Iterate values: the modern loop.Example: for (const user of users) { ... }

$for (const k in obj)

Use case: Iterate object keys: with own/proto caveats; prefer Object.keys.Example: for (const key in config) { ... }

label:
  for (...) { break label }

Use case: Labeled loops: break/continue an outer loop.Example: outer: for (const a of as) { for (const b of bs) { if (b === target) break outer } }

JavaScript ES6+ Cheatsheet

Every essential modern JavaScript pattern: variables, functions, arrays, objects, promises, async/await, and modules, with syntax and real use cases.

Every entry shows real syntax followed by the use case: when and why you reach for it.

Variables & Scoping

const x = 42: Constant binding: use by default; reassignment throws.

Example: const apiUrl = "https://www.devvkit.com"

let x = 42: Reassignable block-scoped variable: for counters and mutable state.

Example: let count = 0; count++

var x = 1: Function-scoped legacy declaration: avoid in modern code.

Example: var old = true // avoid

typeof x: Check a value's type at runtime.

Example: if (typeof id !== "number") throw ...

x ?? "default": Nullish coalescing: fallback only for null/undefined, not 0 or "".

Example: const port = process.env.PORT ?? 3000

x || "default": Logical OR fallback: falls back for ALL falsy values.

Example: const name = user.name || "Anonymous"

x?.prop: Optional chaining: safe access without TypeError.

Example: const city = user?.address?.city

let x = 1, y = 2; [x, y] = [y, x]: Swap variables without a temp.

Example: [a, b] = [b, a]

Functions & Arrow Functions

const add = (a, b) => a + b: Arrow function with implicit return: short callbacks.

Example: const double = n => n * 2

const add = (a, b) => { return a + b }: Arrow function with explicit body: multiple statements.

Example: const validate = (v) => { if (!v) throw Error(); return v }

function greet(name) { ... }: Function declaration: hoisted, has its own this.

Example: function slugify(s) { return s.toLowerCase().replace(/\s+/g, "-") }

(arg) => arg: Implicit-return arrow: the standard map/filter callback.

Example: names.map(u => u.name)

function f(...args) { }: Rest parameters: collect remaining arguments.

Example: const sum = (...nums) => nums.reduce((a, b) => a + b, 0)

function f(a = 10) { }: Default parameter values.

Example: function fetchData(url, timeout = 3000) { }

f.bind(this): Bind this explicitly: legacy; prefer arrows.

Example: btn.addEventListener("click", handler.bind(this))

fn.call(thisArg, a, b) / fn.apply(thisArg, [a, b]): Invoke with a custom this: call vs apply differ in args style.

Example: Math.max.apply(null, [1, 5, 3])

Objects & Arrays

const o = { name: "x" }; o.age = 30: Create and mutate an object: even const objects are mutable.

Example: const user = { name: "Jane" }; user.plan = "pro"

const { name, age } = o: Object destructuring: pull properties into variables.

Example: const { data, error } = await api.get()

const { a = 1 } = o: Destructure with a default: missing keys get fallback.

Example: const { port = 3000 } = config

const { a: alias } = o: Destructure with renaming.

Example: const { data: payload } = response

const { ...rest } = o: Object rest: everything except the named keys.

Example: const { password, ...safeUser } = user

const merged = { ...a, ...b }: Spread merge: b overrides a. Shallow only.

Example: const defaults = { ...base, ...overrides }

Object.keys(o) / Object.values(o) / Object.entries(o): Iterate over an object.

Example: Object.entries(config).forEach(([k, v]) => ...)

Object.fromEntries(arr): Build an object from [key, value] pairs.

Example: const map = Object.fromEntries(pairs)

Object.assign({}, a, b): Shallow merge into a new object: legacy spread alternative.

Example: const cfg = Object.assign({}, def, over)

arr.map(x => x * 2): Transform every element into a new array.

Example: const ids = users.map(u => u.id)

arr.filter(x => x > 0): Keep only matching elements.

Example: const active = users.filter(u => u.status === "active")

arr.reduce((acc, x) => acc + x, 0): Fold an array into a single value.

Example: const total = items.reduce((s, i) => s + i.price, 0)

arr.find(x => x.id === 42): First matching element (the element itself).

Example: const user = users.find(u => u.id === id)

arr.findIndex(x => x.id === 42): Index of the first match: -1 if absent.

Example: const i = items.findIndex(it => it.id === id)

arr.some(x => x > 10) / arr.every(x => x > 10): Any / all elements match a condition.

Example: const hasAdmins = users.some(u => u.role === "admin")

arr.includes(x): Primitive membership check.

Example: if (allowedRoles.includes(role))

arr.sort((a, b) => a - b): Numeric sort: always pass a comparator.

Example: scores.sort((a, b) => b - a) // descending

arr.slice(1, 3): Copy a subarray: slice is non-destructive.

Example: const page = items.slice(0, 10)

arr.splice(1, 1, "new"): Remove/replace items IN PLACE: mutates the array.

Example: items.splice(index, 1) // remove one

arr.flat(2): Flatten nested arrays.

Example: const flat = [[1, 2], [3]].flat() // [1,2,3]

arr.flatMap(x => [x, x * 2]): Map then flatten one level: one-to-many transforms.

Example: const pairs = ids.flatMap(id => [id, -id])

[...new Set(arr)]: Deduplicate an array.

Example: const unique = [...new Set(tags)]

Array.from({ length: 5 }, (_, i) => i): Generate arrays: ranges and fills.

Example: Array.from({length: 3}, () => []) // 3 empty arrays

arr.forEach(x => ...): Side-effect iteration: logging, DOM updates.

Example: errors.forEach(e => console.error(e.message))

arr.at(-1): Last element without arr[arr.length - 1].

Example: const last = items.at(-1)

Destructuring & Spread

const [first, second] = arr: Array destructuring: pull by position.

Example: const [head, ...tail] = list

const [, second] = arr: Skip elements with empty slots.

Example: const [, b, , d] = coords

const [a = 0] = arr: Array destructure with default: empty slots get fallback.

Example: const [x = 1, y = 1] = point

const [...rest] = arr: Rest element: everything after the named ones.

Example: const [first, ...others] = args

const { length } = "hello": Destructure from any object: even strings.

Example: const { length } = str

function f({ name, age }) { }: Destructure parameters: named options objects.

Example: function connect({ host, port = 5432 }) { }

function f({ a = 1 } = {}) { }: Fully defaulted options parameter: no undefined destructure crash.

Example: function render({ width = 800 } = {}) { }

const copy = [...arr]: Shallow-copy an array: safe to sort/mutate the copy.

Example: const sorted = [...scores].sort((a, b) => a - b)

[...a, ...b]: Concatenate arrays.

Example: const all = [...admins, ...users]

Strings & Template Literals

`Hello ${name}`: Template literal: interpolation.

Example: `User ${id} is ${status}`

`multi
line
string`

: Multi-line strings without \n escaping.

Example: const sql = `SELECT * FROM users WHERE active = true`

str.trim(): Strip surrounding whitespace.

Example: const email = input.trim()

str.split(","): Split into an array.

Example: const tags = csv.split(",")

arr.join(", "): Join an array into a string.

Example: const label = names.join(", ")

str.includes("x") / str.startsWith("a") / str.endsWith("b"): Substring checks: the modern indexOf replacements.

Example: if (email.includes("@"))

str.replaceAll("a", "b"): Replace EVERY occurrence (ES2021).

Example: const kebab = name.replaceAll(" ", "-")

str.padStart(5, "0"): Left-pad: zero-padded ids and numbers.

Example: String(n).padStart(3, "0") // "007"

str.slice(0, 10): Substring by indices.

Example: const snippet = text.slice(0, 140)

str.repeat(3): Repeat a string.

Example: "-".repeat(width)

Promises & Async

new Promise((resolve, reject) => { ... }): Create a promise: wrap async work.

Example: const p = new Promise((res, rej) => setTimeout(() => res("done"), 1000))

fetch(url).then(r => r.json()): Chain promises: fetch + parse.

Example: fetch(url).then(r => r.json()).then(render)

.then(...).catch(e => ...): Handle rejection: attach catch at the end.

Example: fetch(url).then(r => r.json()).catch(err => showError(err))

Promise.all([p1, p2]): Wait for ALL promises: parallel requests; rejects fast on any failure.

Example: const [users, posts] = await Promise.all([getUsers(), getPosts()])

Promise.allSettled([p1, p2]): Wait for all, keeping successes AND failures: partial results.

Example: const results = await Promise.allSettled(urls.map(fetch))

Promise.race([p1, p2]): First to settle wins: timeouts.

Example: const r = await Promise.race([fetch(url), timeout(5000)])

Promise.any([p1, p2]): First to FULFILL wins: ignore early rejections.

Example: const r = await Promise.any([cdn1.fetch(), cdn2.fetch()])

async function f() { await x }: Async function: await inside without callback soup.

Example: async function load() { const r = await fetch(url) return r.json() }

try { await x } catch (e) { }: Handle async errors: try/catch works with await.

Example: try { const r = await fetch(url) } catch { fallback() }

async () => { }: Async arrow function: IIFE pattern for top-level await.

Example: (async () => { const r = await fetch(url) })()

const timeout = ms => new Promise(res => setTimeout(res, ms)): Sleep helper: await timeout(1000).

Example: await timeout(1000)

Modules & Imports

import { x } from "./mod.js": Named import.

Example: import { slugify } from "./utils.js"

import x from "./mod.js": Default import: the module's main export.

Example: import express from "express"

import * as utils from "./mod.js": Namespace import: everything under one object.

Example: import * as fs from "node:fs/promises"

import { x as y } from "./mod.js": Rename imports.

Example: import { default as Router } from "router"

export const x = 42: Export a declaration inline.

Example: export const VERSION = "1.0.0"

export default function f() { }: Default export: main API of a module.

Example: export default function main() { }

export { a, b }: Export selected names from a module.

Example: export { add, sub } from "./math.js"

const m = await import("./mod.js"): Dynamic import: lazy-load heavy modules on demand.

Example: const { parse } = await import("yaml")

Classes & Modern Syntax

class User {
  constructor(name) { this.name = name }
}

: ES6 class: constructor and methods.

Example: class User { constructor(name) { this.name = name } greet() { return `Hi ${this.name}` } }

class Admin extends User { }: Inheritance: subclass a class.

Example: class Admin extends User { constructor(name) { super(name); this.role = "admin" } }

class X { #private = 1 }: Private fields: # prefix, truly private (ES2022).

Example: class Account { #balance = 0 deposit(n) { this.#balance += n } }

class X { static create() { } }: Static method: call without an instance.

Example: class Config { static fromEnv() { return new Config() } }

class X { get value() { } }: Getter: computed properties.

Example: class User { get initials() { return this.name[0] } }

Symbol("id"): Unique symbol: private-ish keys and well-known protocol markers.

Example: const ITERATOR = Symbol.iterator

for (const x of arr): Iterate values: the modern loop.

Example: for (const user of users) { ... }

for (const k in obj): Iterate object keys: with own/proto caveats; prefer Object.keys.

Example: for (const key in config) { ... }

label:
  for (...) { break label }

: Labeled loops: break/continue an outer loop.

Example: outer: for (const a of as) { for (const b of bs) { if (b === target) break outer } }

Frequently asked questions

What is the difference between var, let and const?

var is function-scoped and hoisted with undefined initialization. let and const are block-scoped with temporal dead zones. Use const by default, let when rebinding, and avoid var entirely.

How do Promises and async/await work together?

A Promise represents an eventual value. await suspends an async function until a Promise settles, making async code read like sync code. Always wrap await in try/catch or attach .catch() to handle rejections.

What does destructuring do?

Destructuring unpacks values from arrays or properties from objects into variables: const { name, age } = user and const [first, second] = arr. It also works in function parameters and for swapping values.

What is the difference between == and ===?

=== compares both value and type without coercion, so 0 === false is false. == performs type coercion first, making 0 == false true. Always use === (and Object.is for special cases).