JavaScript ES6+ Cheat Sheet

New

Modern JavaScript features: arrow functions, destructuring, modules, and more

Arrow Functions

Basic Arrow Function

Shorter function syntax

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

Single Parameter

Parentheses optional for single parameter

const square = x => x * x;

No Parameters

Empty parentheses required

const getRandom = () => Math.random();

Object Return

Return object with parentheses

const makeObject = (x, y) => ({ x, y });

Destructuring

Array Destructuring

Extract values from arrays

const [first, second, ...rest] = [1, 2, 3, 4, 5];

Object Destructuring

Extract properties from objects

const { name, age, ...otherProps } = user;

Default Values

Provide fallback values

const { name = "Anonymous", age = 0 } = user;

Renaming

Rename destructured properties

const { name: userName, age: userAge } = user;

Template Literals

Basic Interpolation

Embed expressions in strings

const message = `Hello, ${name}!`;

Multi-line Strings

Create strings with line breaks

const html = ` <div> <h1>${title}</h1> <p>${content}</p> </div>`;

Tagged Templates

Process template literals with functions

const result = tag`Hello ${name}!`;

Spread & Rest

Spread Operator

Expand arrays and objects

const combined = [...array1, ...array2];

Rest Parameters

Collect multiple arguments

const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);

Object Spread

Merge and clone objects

const newObj = { ...obj1, ...obj2, newProp: "value" };

Classes

Class Declaration

Define classes with constructor

class Person { constructor(name) { this.name = name; } greet() { return `Hello, ${this.name}!`; } }

Inheritance

Extend classes with super

class Employee extends Person { constructor(name, role) { super(name); this.role = role; } }

Static Methods

Class methods that don't need instance

static create(name) { return new Person(name); }

Modules

Named Exports

Export specific functions or variables

export const add = (a, b) => a + b;

Default Export

Export main function or class

export default class Calculator {}

Import Statements

Import modules and specific exports

import { add, subtract } from "./math.js";

Import All

Import all exports as namespace

import * as math from "./math.js";

Promises & Async/Await

Promise Creation

Create promises for async operations

const promise = new Promise((resolve, reject) => { // async operation resolve(result); });

Async Function

Function that returns a promise

async function fetchData() { return await api.get("/data"); }

Await Keyword

Wait for promise to resolve

const data = await fetchData();

Promise.all

Wait for multiple promises

const results = await Promise.all([promise1, promise2]);

Common Patterns

Array Methods

Modern array manipulation

// Map
const doubled = numbers.map(n => n * 2);

// Filter
const evens = numbers.filter(n => n % 2 === 0);

// Reduce
const sum = numbers.reduce((acc, n) => acc + n, 0);

// Find
const firstEven = numbers.find(n => n % 2 === 0);

// Some/Every
const hasEven = numbers.some(n => n % 2 === 0);
const allPositive = numbers.every(n => n > 0);

Object Methods

Modern object manipulation

// Object.keys
const keys = Object.keys(obj);

// Object.values
const values = Object.values(obj);

// Object.entries
const entries = Object.entries(obj);

// Object.assign
const merged = Object.assign({}, obj1, obj2);

// Object spread
const cloned = { ...obj };

Optional Chaining

Safe property access

// Safe property access
const name = user?.profile?.name;

// Safe method call
const result = user?.getData?.();

// Nullish coalescing
const value = data ?? defaultValue;

Tips & Best Practices

Use arrow functions for short, single-expression functions

Prefer const and let over var

Use destructuring for cleaner code and default values

Use template literals for string interpolation and multi-line strings

Prefer async/await over raw promises for better readability