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

JavaScript ES6+ Cheatsheet

[programming]

Modern JavaScript — arrow functions, destructuring, promises, modules, and ES2024 features.

JavaScript has evolved rapidly from ES6 (2015) onward. This cheatsheet covers the modern syntax and patterns you will actually use: arrow functions, template literals, destructuring, spread/rest, Promises, async/await, ES modules, and newer additions like optional chaining and nullish coalescing.

All examples target Node.js 20+ or modern browsers.

Variables & Scoping

$const x = 42

Block-scoped constant. Cannot be reassigned (but object contents can change).Example: const API_URL = "https://api.example.com"

$let x = 42

Block-scoped variable that can be reassigned.Example: let count = 0 count += 1

Functions

$() => { ... }

Arrow function — inherits this from enclosing scope. No arguments object.Example: const add = (a, b) => a + b

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

Creates a new array by transforming each element.Example: users.map(u => u.name)

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

Creates a new array with elements that pass the test.Example: nums.filter(n => n % 2 === 0)

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

Reduces array to a single value by accumulating.Example: orders.reduce((sum, o) => sum + o.total, 0)

Objects & Arrays

$const { name, age } = obj

Object destructuring — extract properties into variables.Example: const { title, author } = book

$const [first, ...rest] = arr

Array destructuring with rest element.Example: const [head, ...tail] = [1, 2, 3, 4]

$const merged = { ...obj1, ...obj2 }

Spread operator — shallow-merge objects or clone arrays.Example: const updated = { ...user, age: 31 }

Promises & Async

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

Create a promise for async operations. Resolve on success, reject on error.Example: const fetch = new Promise((res) => setTimeout(() => res("done"), 1000))

$async function fetchData() { ... }

Declare an async function that returns a Promise.Example: async function getUser(id) { const res = await fetch(`/api/users/${id}`) return res.json() }

$await promise

Pause execution until a Promise resolves. Can only be used inside async functions.Example: const data = await fetch("/api/data").then(r => r.json())

$Promise.all([p1, p2])

Wait for all promises to resolve. Rejects if any rejects.Example: const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()])

Modules & Imports

$import { name } from "./module"

Import named exports from an ES module.Example: import { readFile, writeFile } from "fs/promises"

$export default function() {}

Default export — one per module. Import without curly braces.Example: export default class Logger { ... }

$export const NAME = "value"

Named export — can import selectively with destructuring.Example: export const VERSION = "1.0.0"

Modern Syntax

$obj?.prop

Optional chaining — safely access nested properties without checking each level.Example: const city = user?.address?.city ?? "Unknown"

$val ?? "default"

Nullish coalescing — returns default only if val is null or undefined.Example: const count = response?.count ?? 0

$const url = `https://${host}/api/${id}`

Template literal — embed expressions in strings with ${}.Example: `Hello ${name}, you are ${age} years old`

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

Map each element then flatten the result by one level.Example: words.flatMap(w => [w, w.toUpperCase()])

JavaScript ES6+ Cheatsheet

Modern JavaScript — arrow functions, destructuring, promises, modules, and ES2024 features.

All examples target Node.js 20+ or modern browsers.

Variables & Scoping

const x = 42 — Block-scoped constant. Cannot be reassigned (but object contents can change).

Example: const API_URL = "https://api.example.com"

let x = 42 — Block-scoped variable that can be reassigned.

Example: let count = 0 count += 1

Functions

() => { ... } — Arrow function — inherits this from enclosing scope. No arguments object.

Example: const add = (a, b) => a + b

arr.map(x => x * 2) — Creates a new array by transforming each element.

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

arr.filter(x => x > 0) — Creates a new array with elements that pass the test.

Example: nums.filter(n => n % 2 === 0)

arr.reduce((acc, x) => acc + x, 0) — Reduces array to a single value by accumulating.

Example: orders.reduce((sum, o) => sum + o.total, 0)

Objects & Arrays

const { name, age } = obj — Object destructuring — extract properties into variables.

Example: const { title, author } = book

const [first, ...rest] = arr — Array destructuring with rest element.

Example: const [head, ...tail] = [1, 2, 3, 4]

const merged = { ...obj1, ...obj2 } — Spread operator — shallow-merge objects or clone arrays.

Example: const updated = { ...user, age: 31 }

Promises & Async

new Promise((resolve, reject) => { ... }) — Create a promise for async operations. Resolve on success, reject on error.

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

async function fetchData() { ... } — Declare an async function that returns a Promise.

Example: async function getUser(id) { const res = await fetch(`/api/users/${id}`) return res.json() }

await promise — Pause execution until a Promise resolves. Can only be used inside async functions.

Example: const data = await fetch("/api/data").then(r => r.json())

Promise.all([p1, p2]) — Wait for all promises to resolve. Rejects if any rejects.

Example: const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()])

Modules & Imports

import { name } from "./module" — Import named exports from an ES module.

Example: import { readFile, writeFile } from "fs/promises"

export default function() {} — Default export — one per module. Import without curly braces.

Example: export default class Logger { ... }

export const NAME = "value" — Named export — can import selectively with destructuring.

Example: export const VERSION = "1.0.0"

Modern Syntax

obj?.prop — Optional chaining — safely access nested properties without checking each level.

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

val ?? "default" — Nullish coalescing — returns default only if val is null or undefined.

Example: const count = response?.count ?? 0

const url = `https://${host}/api/${id}` — Template literal — embed expressions in strings with ${}.

Example: `Hello ${name}, you are ${age} years old`

arr.flatMap(x => [x, x * 2]) — Map each element then flatten the result by one level.

Example: words.flatMap(w => [w, w.toUpperCase()])