JavaScript ES6+ Cheat Sheet

Since the monumental release of **ES6 (ECMAScript 2015)** and subsequent annual updates, JavaScript has evolved into a remarkably expressive, robust, and modern programming language. Modern syntax features have fundamentally transformed how developers write frontend and backend applications, improving code readability, maintainability, and asynchronous control flow.

This comprehensive, developer-focused JavaScript ES6+ Cheat Sheet covers essential modern features including block-scoped declarations, arrow functions, destructuring, spread and rest operators, promises, async/await, and ES modules.

1. Block Scope (`let`/`const`) and Arrow Functions

Replace traditional `var` declarations with block-scoped `let` and constants (`const`), and write concise functions using arrow syntax.

              
C

            // Block-scoped variables
let count = 10;
count = 15; // Allowed

const API_URL = "https://api.codecrown.in";
// API_URL = "other"; // TypeError: Assignment to constant variable

// Traditional vs Arrow Functions
const add = (a, b) => a + b;
console.log(add(5, 10)); // 15

// Single parameter without parentheses
const square = x => x * x;

2. Destructuring and Spread/Rest Operators (`...`)

Extract values from arrays and objects effortlessly, and combine or clone collections using the spread operator.

              
            
C

            
            // Object Destructuring
const user = { username: "alex_dev", role: "admin", age: 28 };
const { username, role } = user;

// Array Destructuring
const coordinates = [12.9716, 77.5946];
const [lat, lng] = coordinates;

// Spread Operator (...) for cloning/merging
const defaults = { theme: "dark", notifications: true };
const userSettings = { ...defaults, theme: "light" };

// Rest Operator in functions
const sumAll = (...numbers) => numbers.reduce((acc, n) => acc + n, 0);
console.log(sumAll(1, 2, 3, 4)); // 10
          

3. Template Literals and Enhanced Object Literals

Embed expressions and multi-line strings cleanly using backticks (`).

              
            
C

            
            // Template Literals
const name = "Alex";
const greeting = `Hello, ${name}! Welcome to CodeCrown.`;

// Multi-line strings
const htmlSnippet = `
    <div>
        <h1>${name}</h1>
    </div>
`;
          

4. Asynchronous JavaScript (Promises and `async/await`)

Handle asynchronous operations gracefully without callback hell using modern `async/await` syntax.

              
            
C

            
            // Fetching data using async/await
async function fetchUserProfile(userId) {
    try {
        const response = await fetch(`https://api.codecrown.in/users/${userId}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log("User Profile:", data);
    } catch (error) {
        console.error("Failed to fetch profile:", error.message);
    }
}

// fetchUserProfile(1);
          

5. ES Modules (`import` / `export`)

Modularize code across separate files using native ES module syntax.

              
C

            // mathUtils.js (Exporting)
export const add = (a, b) => a + b;
export default class Calculator {}

// app.js (Importing)
// import Calculator, { add } from './mathUtils.js';

Conclusion

Keep this JavaScript ES6+ reference cheat sheet handy to write clean, maintainable, and high-performance modern JavaScript code across your web applications.