Performance, Tooling, and What to Learn Next

You have now covered the complete spectrum of JavaScript — from variables and loops to async generators, Proxies, and design patterns. This final lesson brings it all together: the performance techniques that separate good JavaScript from great JavaScript, the toolchain that powers modern development (bundlers, transpilers, linters, formatters), and a clear roadmap of what to learn next based on the path you want to take — frontend frameworks, backend development, full-stack, or specialised areas. Consider this lesson both a consolidation of everything you have learned and a launchpad for the next phase of your journey.

Core Performance Principles #

Modern JavaScript Toolchain #

What to Learn Next #

Basic Example #

// ── Memoisation — cache expensive function results ────────────────────────
function memoize(fn) {
    const cache = new Map();
    return function (...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

function slowFibonacci(n) {
    if (n <= 1) return n;
    return slowFibonacci(n - 1) + slowFibonacci(n - 2);
}

const fib = memoize(slowFibonacci);
console.time('first call');
console.log(fib(40));   // computed
console.timeEnd('first call');   // ~500ms

console.time('second call');
console.log(fib(40));   // cached
console.timeEnd('second call'); // ~0ms

// ── Debounce — delay until user stops ────────────────────────────────────
function debounce(fn, delay) {
    let timerId;
    return function (...args) {
        clearTimeout(timerId);
        timerId = setTimeout(() => fn.apply(this, args), delay);
    };
}

// Only fires when user stops typing for 300ms
const handleSearch = debounce(async (query) => {
    const results = await searchAPI(query);
    renderResults(results);
}, 300);

searchInput.addEventListener('input', e => handleSearch(e.target.value));

// ── Throttle — fire at most once per interval ─────────────────────────────
function throttle(fn, interval) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
            lastTime = now;
            return fn.apply(this, args);
        }
    };
}

// Scroll handler fires at most 10 times per second
const handleScroll = throttle(() => {
    updateScrollIndicator(window.scrollY);
}, 100);

window.addEventListener('scroll', handleScroll);

// ── Object pool — reuse expensive objects ────────────────────────────────
class ObjectPool {
    #available = [];
    #factory;
    #reset;

    constructor(factory, reset, initialSize = 10) {
        this.#factory = factory;
        this.#reset   = reset;
        for (let i = 0; i < initialSize; i++) {
            this.#available.push(factory());
        }
    }

    acquire() {
        return this.#available.pop() ?? this.#factory();
    }

    release(obj) {
        this.#reset(obj);
        this.#available.push(obj);
    }
}

// Reuse particle objects in a game instead of allocating new ones
const particles = new ObjectPool(
    () => ({ x: 0, y: 0, vx: 0, vy: 0, life: 0, active: false }),
    p  => { p.active = false; p.life = 0; }
);

// ── Virtual list — render only visible rows ───────────────────────────────
// (see Chapter 6, Lesson 5 for the full implementation)

// ── Lazy module loading ───────────────────────────────────────────────────
const chartBtn = document.querySelector('#show-chart');
chartBtn.addEventListener('click', async () => {
    // Chart library only loaded when button is clicked
    const { renderChart } = await import('./charts.js');
    renderChart('#canvas', data);
});

// ── TypeScript: the logical next step ────────────────────────────────────
// This JavaScript:
function getTotal(items) {
    return items.reduce((sum, item) => sum + item.price * item.qty, 0);
}

// Becomes this TypeScript — self-documenting, type-checked:
interface CartItem {
    id:     number;
    name:   string;
    price:  number;
    qty:    number;
}

function getTotal(items: CartItem[]): number {
    return items.reduce((sum, item) => sum + item.price * item.qty, 0);
}

// TypeScript catches this at BUILD time (not runtime):
getTotal([{ id: 1, name: 'Widget', price: '9.99', qty: 1 }]);
// Error: Type 'string' is not assignable to type 'number' for property 'price'

How It Works #

Step 1 — Memoisation Trades Memory for Speed #

A memoised function stores its return values in a cache keyed by the arguments. The second call with the same arguments returns the cached value instantly — no computation required. This is effective for pure functions (same inputs always produce same output) with expensive computations and repeated calls. Watch cache size in long-running applications — unbounded caches can grow indefinitely.

Step 2 — Debounce Waits for Inactivity #

Debounce resets a timer on every call. The wrapped function only executes when the timer completes without being reset — i.e., when calls stop. This is the right tool for search-as-you-type, auto-save, and window resize handlers where you want to respond to the final state, not every intermediate state.

Step 3 — Throttle Limits Call Rate #

Throttle records the last execution time and refuses to execute until enough time has passed. Unlike debounce (which delays until idle), throttle guarantees the function runs at most once per interval — including during continuous activity. This is the right tool for scroll and pointer move handlers where you want regular sampling, not just a final event.

Step 4 — Modern Tooling Enforces Quality Automatically #

ESLint catches bugs and enforces conventions (unused variables, missing await, incorrect equality). Prettier formats code consistently without debate. TypeScript catches type errors before runtime. Vitest runs your tests instantly on every save. A well-configured toolchain catches problems in milliseconds rather than hours of debugging production bugs.

Step 5 — Your JavaScript Foundation Is Transferable #

React components are JavaScript functions. Vue reactivity is a Proxy. Node.js uses the same event loop you learned about. TypeScript compiles to the JavaScript you already know. The patterns you learned — closures, prototypes, Promises, modules — appear everywhere. Every framework and library you encounter next will be more familiar than you expect, because you know the language underneath it all.

Real-World Example: Complete App Bootstrap #

// main.js — bootstrapping a well-structured frontend app

import { config }    from './config.js';
import { EventBus }  from './event-bus.js';
import { Router }    from './router.js';
import { Store }     from './store.js';

class App {
    #router;
    #store;
    #bus;

    async init() {
        // Load config (lazy — only what's needed to start)
        await this.#loadConfig();

        // Initialise core services
        this.#bus    = new EventBus();
        this.#store  = new Store({ user: null, theme: config.get('theme') });
        this.#router = new Router(this.#bus);

        // Register global error handler
        window.addEventListener('unhandledrejection', e => {
            console.error('Unhandled Promise rejection:', e.reason);
            this.#bus.emit('error', { type: 'unhandled', error: e.reason });
            e.preventDefault();
        });

        // Lazy-load non-critical features
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js').catch(console.error);
        }

        requestIdleCallback(() => {
            import('./analytics.js').then(({ init }) => init());
        });

        // Start routing
        this.#router.start();
        console.log('[App] Initialised');
    }

    async #loadConfig() {
        const savedTheme = localStorage.getItem('theme') ?? 'light';
        config.set('theme', savedTheme);
    }
}

// Entry point
const app = new App();
app.init().catch(err => {
    console.error('Failed to initialise app:', err);
    document.body.innerHTML = '<p>Failed to load. Please refresh.</p>';
});

Checklist: JavaScript Fundamentals Complete #

▶ Try It Yourself

Quick Reference: Performance #