JavaScript Advanced Concepts

1. Asynchronous JavaScript: Promises, Async/Await

Understanding non-blocking operations is crucial for modern web applications. We'll explore:

• Callbacks and the "callback hell" problem.
• Introduction to Promises for better async management.
• .then(), .catch(), and .finally().
• Promise.all(), Promise.race(), etc.
• The elegance of async/await syntax.

async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log('Data fetched:', data);
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchData('https://api.example.com/data');
                

2. Object-Oriented Programming (OOP) in JavaScript

Leveraging JavaScript's unique approach to OOP:

• Prototypes and prototypal inheritance.
• Constructor functions and the new keyword.
• ES6 Classes (syntactic sugar over prototypes).
• Encapsulation, inheritance, and polymorphism.
• Static methods and properties.

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // Call the parent constructor
        this.breed = breed;
    }

    speak() {
        console.log(`${this.name} barks.`);
    }

    static describe() {
        console.log('This is a class for representing animals.');
    }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // Output: Buddy barks.
Dog.describe(); // Output: This is a class for representing animals.
                

3. Functional Programming Concepts

Writing cleaner, more declarative code:

• Pure functions.
• Immutability.
• Higher-order functions (e.g., map, filter, reduce).
• Currying and partial application.
• Composition.

const numbers = [1, 2, 3, 4, 5];

// Using map to double each number
const doubledNumbers = numbers.map(num => num * 2);
console.log('Doubled:', doubledNumbers); // Output: Doubled: [ 2, 4, 6, 8, 10 ]

// Using filter to get even numbers
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log('Even:', evenNumbers); // Output: Even: [ 2, 4 ]

// Using reduce to sum all numbers
const sumOfNumbers = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log('Sum:', sumOfNumbers); // Output: Sum: 15
                

4. Modules and Module Bundlers

Organizing and managing JavaScript code effectively:

• CommonJS vs. ES Modules (import/export).
• Understanding module scopes.
• Introduction to bundlers like Webpack, Parcel, or Vite.
• Code splitting and tree shaking for optimization.

// utils.js
export function add(a, b) {
    return a + b;
}

export const PI = 3.14159;

// main.js
import { add, PI } from './utils.js';

console.log('Sum:', add(5, 3)); // Output: Sum: 8
console.log('PI:', PI);      // Output: PI: 3.14159
                

5. Error Handling and Debugging

Robust strategies for managing errors and finding bugs:

• try...catch...finally blocks.
• Throwing custom errors.
• Browser developer tools (console, debugger, network tab).
• Linters (ESLint) and formatters (Prettier).
• Error monitoring services.

function divide(a, b) {
    if (b === 0) {
        throw new Error("Division by zero is not allowed!");
    }
    return a / b;
}

try {
    console.log(divide(10, 2)); // Output: 5
    console.log(divide(10, 0)); // This will throw an error
} catch (error) {
    console.error("Caught an error:", error.message); // Output: Caught an error: Division by zero is not allowed!
} finally {
    console.log("This block always executes."); // Output: This block always executes.
}
                

Simulate fetching data with a delay and display the result.