JavaScript Complete Cheatsheet: Modern ES6+, DOM & Async Step-by-Step Guide

Step 1: Modern ES6 to ES2024 Syntax Essentials

// 1. Destructuring & Defaults
const student = { name: "Priyanka", city: "Kolkata", score: 95 };
const { name, city, rank = "Tier-1" } = student;

// 2. Spread & Rest Operator (...)
const baseSettings = { theme: "dark", lang: "en" };
const userSettings = { ...baseSettings, sound: true }; // Merging objects

const sumAll = (...numbers) => numbers.reduce((acc, curr) => acc + curr, 0);

// 3. Optional Chaining (?.) & Nullish Coalescing (??)
const user = { profile: { address: null } };
const street = user?.profile?.address?.street ?? "Default Address"; // Safe navigation

Step 2: Functional Array Methods (map, filter, reduce, find)

const courses = [
    { title: "DCA", fee: 4999, category: "Diploma" },
    { title: "Tally Prime", fee: 3499, category: "Accounting" },
    { title: "Python", fee: 4999, category: "Coding" },
    { title: "PGDCA", fee: 9999, category: "Diploma" }
];

// 1. Filter: extract only Diploma courses
const diplomas = courses.filter(c => c.category === "Diploma");

// 2. Map: extract titles in uppercase
const titles = courses.map(c => c.title.toUpperCase());

// 3. Reduce: compute total fees
const totalRevenue = courses.reduce((sum, c) => sum + c.fee, 0); // 23496

// 4. Find: find first course with fee > 5000
const premiumCourse = courses.find(c => c.fee > 5000); // PGDCA

Step 3: Asynchronous JavaScript (Promises & async/await)

// Real-World Fetch API with async/await and robust error handling
async function fetchStudentResults(rollNumber) {
    try {
        const response = await fetch(`/api/verify-certificate?roll=${encodeURIComponent(rollNumber)}`);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        console.log("Certificate Verified:", data);
        return data;
    } catch (error) {
        console.error("Verification failed:", error.message);
        return { success: false, error: "Unable to verify certificate" };
    }
}

// Parallel execution with Promise.all
async function loadDashboardData() {
    const [coursesRes, locationsRes] = await Promise.all([
        fetch('/api/courses'),
        fetch('/api/locations')
    ]);
    return {
        courses: await coursesRes.json(),
        locations: await locationsRes.json()
    };
}

Step 4: DOM Manipulation & Event Delegation

// Efficient Event Delegation: 1 listener for all dynamically added buttons
document.querySelector('#course-container').addEventListener('click', (e) => {
    const enrollBtn = e.target.closest('.enroll-btn');
    if (enrollBtn) {
        const courseId = enrollBtn.dataset.courseId;
        console.log(`Enrolling in course ID: ${courseId}`);
    }
});

// Debounce Utility for high-speed live search inputs
function debounce(fn, delay = 300) {
    let timeoutId;
    return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn(...args), delay);
    };
}

const handleSearch = debounce((query) => {
    console.log(`Searching database for: ${query}`);
}, 400);