JavaScript 2025 (Modern JS)

Modern JavaScript Features

const data = await fetchData();

import { utils } from './utils.js';

data.filter().map().reduce()

const {name, age} = user;

🔹 Async/Await - Modern Asynchronous JavaScript

Handle asynchronous operations with clean, readable code:

// Old way with callbacks (callback hell)
// getData(function(a) {
//     getMoreData(a, function(b) {
//         getEvenMoreData(b, function(c) {
//             // Finally use c
//         });
//     });
// });

// Modern way with async/await
async function fetchUserData(userId) {
    try {
        // Simulate API calls
        console.log("Fetching user...");
        const user = await fetch(`/api/users/${userId}`).then(r => r.json());
        
        console.log("Fetching user posts...");
        const posts = await fetch(`/api/users/${userId}/posts`).then(r => r.json());
        
        console.log("Fetching user friends...");
        const friends = await fetch(`/api/users/${userId}/friends`).then(r => r.json());
        
        return {
            user,
            posts,
            friends,
            summary: `${user.name} has ${posts.length} posts and ${friends.length} friends`
        };
    } catch (error) {
        console.error("Error fetching user data:", error);
        return null;
    }
}

// Using the async function
async function displayUserProfile(userId) {
    const userData = await fetchUserData(userId);
    
    if (userData) {
        console.log("User Profile:", userData.summary);
        return userData;
    } else {
        console.log("Failed to load user profile");
        return null;
    }
}

// Call the function
displayUserProfile(123);

🔹 Modern Array Methods

Powerful methods for working with arrays:

// Sample data
const users = [
    { name: "Alice", age: 25, active: true, score: 85 },
    { name: "Bob", age: 30, active: false, score: 92 },
    { name: "Charlie", age: 35, active: true, score: 78 },
    { name: "Diana", age: 28, active: true, score: 96 }
];

// Filter - get only active users
const activeUsers = users.filter(user => user.active);
console.log("Active users:", activeUsers.length);

// Map - get just the names
const names = users.map(user => user.name);
console.log("Names:", names);

// Find - get first user over 30
const seniorUser = users.find(user => user.age > 30);
console.log("Senior user:", seniorUser?.name);

// Reduce - calculate average score
const averageScore = users.reduce((sum, user) => sum + user.score, 0) / users.length;
console.log("Average score:", averageScore);

// Chaining methods together
const topActiveUsers = users
    .filter(user => user.active)           // Only active users
    .filter(user => user.score > 80)       // High scores only
    .map(user => ({                        // Transform data
        name: user.name,
        grade: user.score > 90 ? 'A' : 'B'
    }))
    .sort((a, b) => a.name.localeCompare(b.name)); // Sort by name

console.log("Top active users:", topActiveUsers);

// Some and Every
const hasHighScorer = users.some(user => user.score > 90);
const allActive = users.every(user => user.active);

console.log("Has high scorer:", hasHighScorer);
console.log("All users active:", allActive);

🔹 Destructuring Assignment

Extract values from arrays and objects easily:

// Object destructuring
const user = {
    name: "Alice",
    age: 25,
    email: "[email protected]",
    address: {
        city: "New York",
        country: "USA"
    }
};

// Extract properties
const { name, age, email } = user;
console.log(`${name} is ${age} years old`);

// Rename while destructuring
const { name: userName, age: userAge } = user;
console.log(`User: ${userName}, Age: ${userAge}`);

// Default values
const { phone = "Not provided" } = user;
console.log("Phone:", phone);

// Nested destructuring
const { address: { city, country } } = user;
console.log(`Location: ${city}, ${country}`);

// Array destructuring
const colors = ["red", "green", "blue", "yellow"];
const [first, second, ...rest] = colors;

console.log("First color:", first);
console.log("Second color:", second);
console.log("Rest:", rest);

// Skip elements
const [primary, , tertiary] = colors;
console.log("Primary:", primary, "Tertiary:", tertiary);

// Function parameters destructuring
function createUser({ name, age, email = "[email protected]" }) {
    return {
        id: Math.random(),
        name,
        age,
        email,
        createdAt: new Date()
    };
}

const newUser = createUser({ name: "Bob", age: 30 });
console.log("New user:", newUser.name, newUser.email);

// Swapping variables
let a = 1, b = 2;
[a, b] = [b, a];
console.log("After swap: a =", a, "b =", b);

🔹 Modern JavaScript Best Practices

Follow these patterns for clean, maintainable code:

// 1. Use const/let instead of var
const API_URL = "https://api.example.com";
let currentUser = null;

// 2. Template literals for strings
const message = `Welcome back, ${currentUser?.name ?? 'Guest'}!`;

// 3. Arrow functions for concise syntax
const processUsers = users => users
    .filter(user => user.active)
    .map(user => ({ ...user, processed: true }));

// 4. Default parameters
function createConfig(options = {}) {
    return {
        timeout: 5000,
        retries: 3,
        debug: false,
        ...options  // Spread operator to merge
    };
}

// 5. Error handling with try/catch
async function safeApiCall(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return await response.json();
    } catch (error) {
        console.error("API call failed:", error.message);
        return null;
    }
}

// 6. Use modules for organization
// export const utils = { ... };
// import { utils } from './utils.js';

// 7. Avoid callback hell with async/await
async function processData() {
    const users = await safeApiCall('/api/users');
    if (!users) return;
    
    const processed = processUsers(users);
    console.log(`Processed ${processed.length} users`);
    return processed;
}

// Example usage
const config = createConfig({ debug: true });
console.log("Config:", config);

processData().then(result => {
    if (result) {
        console.log("Data processing completed");
    }
});