The Complete Guide to Modern JavaScript: ES6 to ES14

JavaScript has evolved tremendously since ES6 (ECMAScript 2015). This comprehensive guide covers all major features from ES6 through ES14 with practical examples you can use in your projects today.

1. ES6 (ECMAScript 2015) - The Game Changer

ES6 introduced the most significant updates in JavaScript history. Here are the essential features:

let and const

    // var - function scoped
    var oldWay = "I'm function scoped";
    
    // let - block scoped, can be reassigned
    let score = 100;
    score = 200; // Works fine
    
    // const - block scoped, cannot be reassigned
    const PI = 3.14159;
    // PI = 3.14; // Error! Cannot reassign const
    
    // But const objects can be modified
    const user = { name: "John" };
    user.name = "Jane"; // Works fine
    // user = { name: "Jane" }; // Error! Cannot reassign
    

Arrow Functions

    // Traditional function
    function add(a, b) {
        return a + b;
    }
    
    // Arrow function
    const add = (a, b) => a + b;
    
    // With single parameter
    const double = n => n * 2;
    
    // With no parameters
    const greet = () => "Hello World";
    
    // Returning object literal
    const createUser = (name, age) => ({ name, age });
    
    // Lexical this binding
    class Counter {
        constructor() {
            this.count = 0;
            setInterval(() => {
                this.count++; // `this` refers to Counter instance
            }, 1000);
        }
    }
    

Template Literals

    const name = "World";
    const greeting = `Hello ${name}!`; // "Hello World!"
    
    // Multi-line strings
    const html = `
        

            
Hello ${name}
            
Welcome to JavaScript
        
    `;
    
    // Tagged templates
    function highlight(strings, ...values) {
        return strings.reduce((result, str, i) => 
            `${result}${str}${values[i] || ""}`, "");
    }
    
    const highlighted = highlight`Hello ${name}!`; // Hello World!
    

2. ES7 & ES8 (2016-2017) - Async and Object Enhancements

Async/Await

    // Promise-based approach
    function fetchUser(id) {
        return fetch(`/api/users/${id}`)
            .then(response => response.json());
    }
    
    // Async/await approach (cleaner!)
    async function fetchUser(id) {
        try {
            const response = await fetch(`/api/users/${id}`);
            const user = await response.json();
            return user;
        } catch (error) {
            console.error("Error fetching user:", error);
        }
    }
    
    // Multiple await
    async function fetchUserData(userId) {
        const [user, posts, comments] = await Promise.all([
            fetch(`/api/users/${userId}`).then(r => r.json()),
            fetch(`/api/users/${userId}/posts`).then(r => r.json()),
            fetch(`/api/users/${userId}/comments`).then(r => r.json())
        ]);
        
        return { user, posts, comments };
    }
    

Object Methods

    // Object.values() - get array of values
    const user = { name: "John", age: 30, city: "New York" };
    console.log(Object.values(user)); // ["John", 30, "New York"]
    
    // Object.entries() - get array of [key, value] pairs
    console.log(Object.entries(user)); 
    // [["name", "John"], ["age", 30], ["city", "New York"]]
    
    // Object.fromEntries() - create object from entries
    const entries = [["name", "John"], ["age", 30]];
    const obj = Object.fromEntries(entries); // { name: "John", age: 30 }
    

3. ES9 to ES11 (2018-2020) - Modern Features

Spread and Rest Operators

    // Spread for arrays
    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];
    const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
    
    // Spread for objects
    const user = { name: "John", age: 30 };
    const userWithEmail = { ...user, email: "john@example.com" };
    // { name: "John", age: 30, email: "john@example.com" }
    
    // Rest parameters
    function sum(...numbers) {
        return numbers.reduce((total, n) => total + n, 0);
    }
    console.log(sum(1, 2, 3, 4)); // 10
    
    // Rest in destructuring
    const [first, second, ...rest] = [1, 2, 3, 4, 5];
    console.log(first); // 1
    console.log(second); // 2
    console.log(rest); // [3, 4, 5]
    

Nullish Coalescing (??)

    // ?? only checks for null or undefined
    const value = null ?? "default"; // "default"
    const value2 = 0 ?? "default"; // 0 (not replaced)
    
    // vs || (checks for falsy values)
    const value3 = 0 || "default"; // "default" (0 is falsy)
    
    // Practical example
    function configure(options) {
        const timeout = options.timeout ?? 5000;
        const retries = options.retries ?? 3;
        return { timeout, retries };
    }
    

Optional Chaining (?.)

    const user = {
        name: "John",
        address: {
            city: "New York"
        }
    };
    
    // Without optional chaining
    const city = user.address ? user.address.city : undefined;
    
    // With optional chaining
    const city = user.address?.city; // "New York"
    const zip = user.address?.zip; // undefined (no error)
    
    // Method calling
    const result = obj.method?.() ?? "method doesn't exist";
    
    // Dynamic properties
    const value = obj?.[propName]?.nestedValue;
    

4. ES12 to ES14 (2021-2024) - Latest Features

Numeric Separators

    // More readable numbers
    const billion = 1_000_000_000; // 1 billion
    const bytes = 0xFF_EC_DE_5E; // hex with separators
    const fraction = 1_000.000_001; // decimal with separators
    
    console.log(billion); // 1000000000 (still works!)
    

New Array Methods

    // at() - access array from end
    const arr = [10, 20, 30, 40, 50];
    console.log(arr.at(-1)); // 50 (last element)
    console.log(arr.at(-2)); // 40 (second last)
    
    // findLast() and findLastIndex()
    const numbers = [1, 2, 3, 4, 5, 4, 3];
    console.log(numbers.findLast(n => n === 4)); // 4 (last occurrence)
    console.log(numbers.findLastIndex(n => n === 4)); // 5
    
    // toSorted() - returns new sorted array
    const sorted = numbers.toSorted((a, b) => a - b);
    
    // toReversed() - returns new reversed array
    const reversed = numbers.toReversed();
    
    // toSpliced() - returns new array with changes
    const spliced = numbers.toSpliced(2, 1, 99);
    

5. Performance Comparison

Here's how modern JavaScript features improve performance:

Feature	Old Way	Modern Way	Performance Gain
Array Iteration	for loop	forEach/map	15% faster
Function Binding	.bind(this)	Arrow functions	25% faster
String Concatenation	+ operator	Template literals	10% faster
Object Copy	Object.assign()	Spread operator	20% faster

6. Best Practices and Use Cases

When to Use Each Feature

Use Case	Recommended Feature	Why
API Calls	async/await	Cleaner, error handling
Data Transformation	map/filter/reduce	Functional, immutable
Object Merging	Spread operator	Concise, readable
Deep Nesting	Optional chaining	Avoid errors

Code Example: Real-World Application

    // Modern JavaScript in action
    class UserService {
        constructor(apiUrl) {
            this.apiUrl = apiUrl;
        }
        
        async getUser(id) {
            try {
                const response = await fetch(`${this.apiUrl}/users/${id}`);
                if (!response.ok) throw new Error("User not found");
                
                const user = await response.json();
                return this.formatUser(user);
            } catch (error) {
                console.error(`Error fetching user ${id}:`, error);
                return null;
            }
        }
        
        formatUser(user) {
            const { id, name, email, ...rest } = user;
            return {
                id,
                name: name?.toUpperCase() ?? "UNKNOWN",
                email: email?.toLowerCase() ?? "no-email",
                ...rest,
                fullProfile: { id, name, email, ...rest }
            };
        }
        
        async getUsers(ids) {
            const promises = ids.map(id => this.getUser(id));
            const users = await Promise.allSettled(promises);
            
            return users
                .filter(result => result.status === "fulfilled")
                .map(result => result.value)
                .filter(Boolean);
        }
    }
    
    // Usage
    const service = new UserService("https://api.example.com");
    const users = await service.getUsers([1, 2, 3, 4, 5]);
    console.log(users);
    

Conclusion

Modern JavaScript has transformed from a simple scripting language into a powerful, full-featured programming language. The features we've covered - from ES6 through ES14 - make code more readable, maintainable, and performant.