Modern JavaScript Cheatsheet: ES6+ Syntax, Array Methods, Async and Modules

Fast reference for modern JavaScript: let and const, destructuring, spread, template literals, the array methods that matter, async/await, modules and classes.

🧪

Run & Edit this Code Live in Browser Zero setup required. Supports Python 3, modern JavaScript, and SQL.

▶ Run in Playground →

1. Variables, Destructuring and Spread

ES6+ replaced var with block-scoped declarations and made copying data immutable by default. These are the patterns you will type every day.

CODE SNIPPET

const user = { name: "Ana", role: "admin", active: true };
let score = 10;               // reassignable, block-scoped

// Destructuring (objects and arrays)
const { name, role } = user;
const [first, second = 0] = [7];

// Spread: copy and merge without mutating
const copy = { ...user, active: false };
const merged = [...[1, 2], ...[3, 4]];   // [1, 2, 3, 4]

// Rest parameters
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);

// Template literals, optional chaining, nullish coalescing
const label = `User: ${user.name}`;
const city = user.address?.city ?? "unknown";

2. Array Methods That Matter

Modern JavaScript favors transforming arrays over writing loops. Every method below returns a new array (or value) and leaves the original untouched, except sort and reverse.

Method	Returns	Example
`map(fn)`	New array, same length	`nums.map(n => n * 2)`
`filter(fn)`	Items that pass the test	`nums.filter(n => n > 5)`
`reduce(fn, init)`	A single accumulated value	`nums.reduce((a, n) => a + n, 0)`
`find(fn)`	First matching item (or undefined)	`users.find(u => u.id === 3)`
`some(fn) / every(fn)`	true if any / all items pass	`nums.some(n => n < 0)`
`flatMap(fn)`	Map, then flatten one level	`words.flatMap(w => w.split(""))`
`at(-1)`	Item by index (negatives allowed)	`items.at(-1)`
`includes(x)`	true if the value is present	`tags.includes("ai")`
`sort((a, b) => a - b)`	Sorted array (mutates!)	`nums.sort((a, b) => b - a)`

3. Async: Promises and async/await

Anything involving network, files or timers is asynchronous. async/await is the readable default; Promise combinators handle concurrency.

CODE SNIPPET

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("loadUser failed:", err);
    return null;
  }
}

// Run requests in parallel, not one after another
const [user, posts] = await Promise.all([loadUser(1), loadPosts(1)]);

// First settled result wins (timeouts, fallbacks)
const fastest = await Promise.race([primary(), backup()]);

4. Modules and Classes

One file, one responsibility: export what other modules need and import it by name. Classes bundle data with the methods that operate on it.

CODE SNIPPET

// math.js
export const PI2 = Math.PI * 2;
export function area(r) { return Math.PI * r ** 2; }
export default class Circle {
  #radius;                       // truly private field
  constructor(r) { this.#radius = r; }
  get area() { return Math.PI * this.#radius ** 2; }
}

// app.js
import Circle, { area } from "./math.js";
const c = new Circle(3);
console.log(c.area, area(3));