JavaScript ES6+ Features Cheatsheet

// var is hoisted and function-scoped — causes bugs
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3  (not 0, 1, 2!)

// let is block-scoped — behaves as expected
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2

// const: use for values that should never be reassigned
const API_URL = 'https://api.example.com';
const config = { timeout: 5000, retries: 3 };

// const prevents reassignment but NOT mutation
config.timeout = 10000; // This works
// config = {};          // TypeError: Assignment to constant variable

// Traditional function
const double = function(n) { return n * 2; };

// Arrow function — equivalent
const double = (n) => n * 2;

// Multiple params — parentheses required
const add = (a, b) => a + b;

// No params — empty parens required
const getTimestamp = () => Date.now();

// Multi-line body — curly braces + explicit return
const processUser = (user) => {
    const name = user.name.trim();
    return { ...user, name };
};

// Returning an object literal — wrap in parens to avoid ambiguity
const toPoint = (x, y) => ({ x, y });

// Lexical 'this' — the key difference
class Timer {
    constructor() {
        this.seconds = 0;
    }

    start() {
        // Arrow function captures 'this' from start() method
        setInterval(() => {
            this.seconds++; // 'this' correctly refers to Timer instance
            console.log(this.seconds);
        }, 1000);
    }

    startBroken() {
        // Regular function — 'this' is undefined in strict mode
        setInterval(function() {
            this.seconds++; // TypeError: Cannot read properties of undefined
        }, 1000);
    }
}

// === OBJECT DESTRUCTURING ===
const user = { id: 1, name: 'Alice', role: 'admin', age: 30 };

// Basic extraction
const { name, role } = user;
console.log(name); // 'Alice'

// Rename while destructuring
const { name: userName, role: userRole } = user;
console.log(userName); // 'Alice'

// Default values
const { name, department = 'Engineering' } = user;
console.log(department); // 'Engineering' (not in user object)

// Nested destructuring
const response = {
    status: 200,
    data: { user: { id: 42, email: 'alice@example.com' } }
};
const { data: { user: { email } } } = response;
console.log(email); // 'alice@example.com'

// Rest in objects
const { id, ...rest } = user;
console.log(rest); // { name: 'Alice', role: 'admin', age: 30 }


// === ARRAY DESTRUCTURING ===
const colors = ['red', 'green', 'blue', 'yellow'];

// Basic extraction
const [first, second] = colors;
console.log(first);  // 'red'
console.log(second); // 'green'

// Skip elements with commas
const [, , third] = colors;
console.log(third); // 'blue'

// Rest in arrays
const [head, ...tail] = colors;
console.log(tail); // ['green', 'blue', 'yellow']

// Swap variables — no temp variable needed
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

// Destructuring function return values
function getMinMax(arr) {
    return [Math.min(...arr), Math.max(...arr)];
}
const [min, max] = getMinMax([3, 1, 4, 1, 5, 9, 2]);


// === FUNCTION PARAMETER DESTRUCTURING ===
// Instead of: function render(options) { const title = options.title; ... }
function render({ title, subtitle = 'No subtitle', theme = 'light' }) {
    console.log(title, subtitle, theme);
}

render({ title: 'Hello', theme: 'dark' });
// 'Hello', 'No subtitle', 'dark'

// === SPREAD OPERATOR ===

// Clone arrays (shallow)
const original = [1, 2, 3];
const clone = [...original];
clone.push(4); // original is unchanged

// Merge arrays
const nums = [1, 2, 3];
const moreNums = [4, 5, 6];
const all = [...nums, ...moreNums, 7, 8]; // [1,2,3,4,5,6,7,8]

// Clone objects (shallow)
const user = { name: 'Alice', role: 'admin' };
const userClone = { ...user };

// Merge/override objects (later keys win)
const defaults = { theme: 'light', lang: 'en', fontSize: 14 };
const userPrefs = { theme: 'dark', fontSize: 16 };
const config = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'en', fontSize: 16 }

// Immutable state updates (React pattern)
const state = { count: 0, user: null, loading: false };
const newState = { ...state, count: state.count + 1, loading: true };

// Spread into function call
function sum(a, b, c) { return a + b + c; }
const args = [1, 2, 3];
console.log(sum(...args)); // 6


// === REST PARAMETERS ===

// Collect remaining arguments
function log(level, ...messages) {
    console.log(`[${level}]`, messages.join(' '));
}
log('INFO', 'Server', 'started', 'on', 'port', '3000');
// [INFO] Server started on port 3000

// Better than arguments object — is a real array
function sum(...nums) {
    return nums.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3, 4, 5); // 15

const name = 'Alice';
const role = 'admin';

// ES5 — painful concatenation
const msg = 'Hello, ' + name + '! You are logged in as ' + role + '.';

// ES6 template literal — clean and readable
const msg = `Hello, ${name}! You are logged in as ${role}.`;

// Multi-line strings — no \n needed
const html = `
    <div class="user-card">
        <h2>${name}</h2>
        <span>${role}</span>
    </div>
`;

// Expressions inside ${}
const price = 29.99;
const tax = 0.08;
const receipt = `
    Subtotal: $${price.toFixed(2)}
    Tax:      $${(price * tax).toFixed(2)}
    Total:    $${(price * (1 + tax)).toFixed(2)}
`;

// Tagged templates — advanced use
function highlight(strings, ...values) {
    return strings.reduce((acc, str, i) => {
        const val = values[i] !== undefined
            ? `<mark>${values[i]}</mark>`
            : '';
        return acc + str + val;
    }, '');
}

const searchTerm = 'JavaScript';
const result = highlight`Learn ${searchTerm} in 2026`;
// 'Learn <mark>JavaScript</mark> in 2026'

// Safe SQL queries with tagged templates (prevents injection)
function sql(strings, ...values) {
    const query = strings.join('?');
    return { query, params: values };
}
const userId = 42;
const { query, params } = sql`SELECT * FROM users WHERE id = ${userId}`;

// === PROMISES ===

// Creating a Promise
function fetchUser(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (id > 0) {
                resolve({ id, name: 'Alice' });
            } else {
                reject(new Error('Invalid user ID'));
            }
        }, 100);
    });
}

// Consuming — .then() / .catch()
fetchUser(1)
    .then(user => console.log(user.name))
    .catch(err => console.error(err.message))
    .finally(() => console.log('Done'));

// Promise.all — run in parallel, wait for all
const [user, posts, comments] = await Promise.all([
    fetchUser(1),
    fetchPosts(1),
    fetchComments(1)
]);

// Promise.allSettled — wait for all, don't fail fast
const results = await Promise.allSettled([
    fetchUser(1),
    fetchUser(-1), // will reject
]);
results.forEach(r => {
    if (r.status === 'fulfilled') console.log(r.value);
    else console.error(r.reason);
});

// Promise.race — first one wins
const fastest = await Promise.race([fetch('/api/a'), fetch('/api/b')]);


// === ASYNC / AWAIT ===

// async function always returns a Promise
async function loadDashboard(userId) {
    try {
        // await pauses execution until Promise resolves
        const user = await fetchUser(userId);
        const [posts, notifications] = await Promise.all([
            fetchPosts(user.id),
            fetchNotifications(user.id),
        ]);

        return { user, posts, notifications };
    } catch (error) {
        // Errors from rejected Promises land here
        console.error('Failed to load dashboard:', error.message);
        throw error; // re-throw if you want caller to handle
    }
}

// Top-level await (ES2022, works in modules)
const data = await loadDashboard(1);
console.log(data.user.name);

// === EXPORTING ===

// math.js — named exports (multiple per file)
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }

// Can also export at the bottom
const subtract = (a, b) => a - b;
export { subtract };

// Default export (one per file — usually the main thing)
// user.js
export default class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }
    greet() { return `Hi, I'm ${this.name}`; }
}

// Re-exporting (barrel files / index.js pattern)
// utils/index.js
export { add, multiply, subtract } from './math.js';
export { default as User } from './user.js';


// === IMPORTING ===

// Named imports — must match export name
import { add, multiply } from './math.js';

// Rename on import
import { add as sum, multiply as product } from './math.js';

// Default import — you choose the name
import User from './user.js';

// Import all named exports as namespace
import * as MathUtils from './math.js';
MathUtils.add(2, 3); // 5

// Import default AND named together
import User, { PI } from './utils/index.js';

// Dynamic import — loads module on demand (code splitting)
const { default: Chart } = await import('./chart.js');
const chart = new Chart(canvas);

// Conditional dynamic import
if (userPreference === 'dark') {
    const { darkTheme } = await import('./themes.js');
    applyTheme(darkTheme);
}

class Animal {
    // Private fields — not accessible outside the class
    #name;
    #sound;

    // Static field
    static count = 0;

    constructor(name, sound) {
        this.#name = name;
        this.#sound = sound;
        Animal.count++;
    }

    // Getter — access like a property
    get name() { return this.#name; }

    // Method
    speak() {
        return `${this.#name} says ${this.#sound}!`;
    }

    // Static method — called on class, not instance
    static getCount() {
        return `${Animal.count} animals created`;
    }
}

// Inheritance with extends
class Dog extends Animal {
    #breed;

    constructor(name, breed) {
        super(name, 'Woof'); // must call super() before 'this'
        this.#breed = breed;
    }

    // Override parent method
    speak() {
        return `${super.speak()} (${this.#breed})`;
    }

    fetch(item) {
        return `${this.name} fetches the ${item}!`;
    }
}

const dog = new Dog('Rex', 'Labrador');
console.log(dog.speak());   // 'Rex says Woof! (Labrador)'
console.log(dog.fetch('ball')); // 'Rex fetches the ball!'
console.log(Animal.getCount()); // '1 animals created'

// dog.#name;  // SyntaxError — private field not accessible

// === MAP ===
const userRoles = new Map();

// Any type as key — even objects
const alice = { id: 1, name: 'Alice' };
userRoles.set(alice, 'admin');
userRoles.set('guestToken', 'viewer');

console.log(userRoles.get(alice));       // 'admin'
console.log(userRoles.has('guestToken')); // true
console.log(userRoles.size);              // 2

// Iteration
for (const [key, value] of userRoles) {
    console.log(key, '->', value);
}

// Create from entries
const config = new Map([
    ['host', 'localhost'],
    ['port', 3000],
    ['debug', true],
]);

// Convert to/from object
const obj = Object.fromEntries(config);
const map = new Map(Object.entries(obj));


// === SET ===
const tags = new Set(['js', 'react', 'js', 'node', 'react']);
console.log([...tags]); // ['js', 'react', 'node'] — duplicates removed

tags.add('typescript');
tags.delete('node');
console.log(tags.has('react')); // true

// Remove duplicates from array
const arr = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(arr)]; // [1, 2, 3, 4]

// Set operations
const a = new Set([1, 2, 3, 4]);
const b = new Set([3, 4, 5, 6]);

const union        = new Set([...a, ...b]);         // {1,2,3,4,5,6}
const intersection = new Set([...a].filter(x => b.has(x))); // {3,4}
const difference   = new Set([...a].filter(x => !b.has(x))); // {1,2}

const user = {
    profile: {
        address: {
            city: 'Mumbai'
        }
    },
    getName: () => 'Alice',
    scores: [95, 87, 92]
};

// === OPTIONAL CHAINING (?.) ===

// Without optional chaining — verbose and error-prone
const city = user && user.profile && user.profile.address
    ? user.profile.address.city
    : undefined;

// With optional chaining — clean!
const city = user?.profile?.address?.city; // 'Mumbai'
const zip  = user?.profile?.address?.zip;  // undefined (no error)

// On methods
const name = user?.getName?.();   // 'Alice'
const age  = user?.getAge?.();    // undefined (method doesn't exist)

// On arrays
const firstScore = user?.scores?.[0]; // 95
const score4     = user?.scores?.[3]; // undefined


// === NULLISH COALESCING (??) ===

// ?? — only triggers on null or undefined
const port = process.env.PORT ?? 3000;
// If PORT is '0' (falsy), ?? keeps '0' — || would give 3000 (wrong!)

const config = {
    timeout: 0,       // valid value
    retries: null,    // explicitly unset
    debug: false,     // valid value
};

console.log(config.timeout  ?? 5000); // 0    (not 5000)
console.log(config.retries  ?? 3);    // 3    (was null)
console.log(config.debug    ?? true); // false (not true)

// Combining both
const displayName = user?.profile?.displayName ?? user?.getName?.() ?? 'Anonymous';

// Nullish assignment (??=) — assign only if null/undefined
config.retries ??= 3; // sets retries to 3 since it was null
config.timeout ??= 5000; // doesn't change — 0 is not null/undefined

// api.js — A modern API client using ES6+ features

const BASE_URL = 'https://api.example.com';

class ApiError extends Error {
    #statusCode;

    constructor(message, statusCode) {
        super(message);
        this.name = 'ApiError';
        this.#statusCode = statusCode;
    }

    get statusCode() { return this.#statusCode; }
}

async function request(endpoint, {
    method = 'GET',
    body,
    headers = {},
    timeout = 5000,
} = {}) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);

    try {
        const response = await fetch(`${BASE_URL}${endpoint}`, {
            method,
            headers: {
                'Content-Type': 'application/json',
                ...headers,
            },
            body: body ? JSON.stringify(body) : undefined,
            signal: controller.signal,
        });

        if (!response.ok) {
            throw new ApiError(
                `Request failed: ${response.statusText}`,
                response.status
            );
        }

        return await response.json();
    } finally {
        clearTimeout(timeoutId);
    }
}

// Named exports — tree-shakeable
export const get  = (url, opts) => request(url, { ...opts, method: 'GET' });
export const post = (url, body, opts) => request(url, { ...opts, method: 'POST', body });
export const put  = (url, body, opts) => request(url, { ...opts, method: 'PUT', body });
export const del  = (url, opts) => request(url, { ...opts, method: 'DELETE' });


// Usage with optional chaining + nullish coalescing
import { get, post } from './api.js';

async function loadUserProfile(userId) {
    const [user, posts] = await Promise.all([
        get(`/users/${userId}`),
        get(`/users/${userId}/posts`),
    ]);

    return {
        name: user?.profile?.displayName ?? user?.name ?? 'Anonymous',
        bio: user?.profile?.bio ?? '',
        postCount: posts?.length ?? 0,
        latestPost: posts?.at(-1)?.title ?? 'No posts yet',
    };
}