A quick reference for modern JavaScript (ES6+). Covers destructuring, spread/rest, arrow functions, array methods, promises, async/await, modules, and template literals.
Destructuring
| Syntax | Description |
|---|---|
| const { a, b } = obj | Object destructuring |
| const { a: x } = obj | Destructure with rename |
| const { a = 10 } = obj | Destructure with default value |
| const { a, ...rest } = obj | Destructure with rest |
| const [a, b] = arr | Array destructuring |
| const [a, , c] = arr | Skip elements in array |
| const [a, ...rest] = arr | Array destructure with rest |
| function f({ name, age }) {} | Destructure in function params |
Spread & Rest
| Syntax | Description |
|---|---|
| [...arr1, ...arr2] | Merge arrays |
| { ...obj1, ...obj2 } | Merge objects (shallow) |
| [...arr] | Shallow copy array |
| { ...obj } | Shallow copy object |
| function f(...args) {} | Rest parameters (variadic) |
| Math.max(...nums) | Spread array as function arguments |
| [...new Set(arr)] | Remove duplicates from array |
Arrow Functions
| Syntax | Description |
|---|---|
| const f = (a, b) => a + b | Implicit return (expression body) |
| const f = (a) => { return a * 2 } | Block body with explicit return |
| const f = a => a + 1 | Single param (parens optional) |
| const f = () => 42 | No params |
| const f = () => ({ key: val }) | Return object literal (wrap in parens) |
| arr.map(x => x * 2) | Inline callback |
| arr.filter((_, i) => i % 2 === 0) | Use index parameter |
Array Methods
| Method | Description |
|---|---|
| arr.map(fn) | Transform each element, return new array |
| arr.filter(fn) | Keep elements where fn returns true |
| arr.reduce(fn, init) | Reduce to single value with accumulator |
| arr.find(fn) | Return first element matching predicate |
| arr.findIndex(fn) | Return index of first match or -1 |
| arr.some(fn) | True if any element passes test |
| arr.every(fn) | True if all elements pass test |
| arr.flat(depth) | Flatten nested arrays to depth |
| arr.flatMap(fn) | Map then flatten one level |
Promises
| Pattern | Description |
|---|---|
| new Promise((resolve, reject) => {}) | Create a promise |
| promise.then(val => {}) | Handle fulfilled value |
| promise.catch(err => {}) | Handle rejection |
| promise.finally(() => {}) | Run after settled (fulfilled or rejected) |
| Promise.all([p1, p2]) | Wait for all, fail on first rejection |
| Promise.allSettled([p1, p2]) | Wait for all, never short-circuits |
| Promise.race([p1, p2]) | Resolve/reject with first settled |
| Promise.any([p1, p2]) | Resolve with first fulfilled |
Async / Await
| Pattern | Description |
|---|---|
| async function f() {} | Declare async function |
| const result = await promise | Wait for promise to resolve |
| try { await p } catch (err) {} | Error handling with async/await |
| const results = await Promise.all(ps) | Await multiple promises in parallel |
| for await (const x of stream) {} | Async iteration |
| await Promise.allSettled(ps) | Await all regardless of outcome |
Modules (ESM)
| Syntax | Description |
|---|---|
| export const x = 1 | Named export |
| export function f() {} | Named function export |
| export default function() {} | Default export |
| import { x } from './mod.js' | Named import |
| import f from './mod.js' | Default import |
| import { x as y } from './mod.js' | Import with rename |
| import * as mod from './mod.js' | Namespace import |
| const mod = await import('./mod.js') | Dynamic import |
Template Literals
| Syntax | Description |
|---|---|
| `Hello ${name}` | String interpolation |
| `${a + b}` | Expression evaluation |
| `line1\nline2` | Multiline strings |
| tag`hello ${x}` | Tagged template literal |
| `${cond ? "a" : "b"}` | Ternary inside template |
| String.raw`\n` | Raw string (no escape processing) |