The Complete Guide to Modern JavaScript: ES2024 Features and Best Practices

📄 script.js

const products = [
  { name: 'Laptop', category: 'Electronics', price: 999 },
  { name: 'Shirt', category: 'Clothing', price: 29 },
  { name: 'Phone', category: 'Electronics', price: 699 }
];

// Group by category
const grouped = Object.groupBy(products, item => item.category);
// Result: { Electronics: [...], Clothing: [...] }

// Map-based grouping
const groupedMap = Map.groupBy(products, item => item.category);

📄 script.js

const { promise, resolve, reject } = Promise.withResolvers();

// Use in event handlers or callbacks
socket.on('data', resolve);
socket.on('error', reject);

return promise;

📄 script.js

const regex = /[p{Script=Latin}p{Script=Greek}]+/v;
const text = "Hello Κόσμος";
console.log(regex.test(text)); // true

📄 script.js

const malformed = "�";
console.log(malformed.isWellFormed()); // false
console.log(malformed.toWellFormed()); // "�"

📄 script.js

// Good
const user = { name: 'John', age: 30 };
const items = ['apple', 'banana'];

// Only use let when reassignment is needed
let count = 0;
count += 1;

📄 script.js

// Object destructuring
const { name, email } = user;

// Array destructuring
const [first, second] = items;

// Function parameter destructuring
function updateUser({ name, age, ...rest }) {
  return { name, age, updated: new Date(), ...rest };
}

📄 script.js

// Good
const message = `Hello ${name}, you have ${count} new messages.`;

// Tagged template literals for advanced use cases
const styled = (strings, ...values) => {
  return strings.reduce((result, string, i) => {
    return result + string + (values[i] || '');
  }, '');
};

const css = styled`
  color: ${primaryColor};
  font-size: ${fontSize}px;
`;

📄 script.js

// Good for callbacks and short functions
const doubled = numbers.map(n => n * 2);

// Use regular functions for methods when you need 'this'
const obj = {
  name: 'MyObject',
  greet() {
    return `Hello from ${this.name}`;
  }
};

📄 script.js

// Pattern 1: Try-catch with specific error handling
async function fetchUserData(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    if (error.name === 'TypeError') {
      // Network error
      throw new Error('Network connection failed');
    }
    throw error; // Re-throw other errors
  }
}

// Pattern 2: Result wrapper pattern
async function safeAsyncOperation() {
  try {
    const result = await riskyOperation();
    return { success: true, data: result };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

📄 script.js

// Run operations in parallel
const [users, posts, comments] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
  fetchComments()
]);

// Handle partial failures
const results = await Promise.allSettled([
  fetchUsers(),
  fetchPosts(),
  fetchComments()
]);

const successful = results
  .filter(result => result.status === 'fulfilled')
  .map(result => result.value);

📄 script.js

// utils.js - Named exports
export const formatDate = (date) => {
  return date.toLocaleDateString();
};

export const capitalize = (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

// main.js - Import what you need
import { formatDate, capitalize } from './utils.js';

// Default export pattern
export default class UserService {
  async getUser(id) {
    // Implementation
  }
}

📄 script.js

// Lazy loading for better performance
async function loadFeature() {
  const { heavyFeature } = await import('./heavy-feature.js');
  return heavyFeature();
}

// Conditional loading
if (needsPolyfill) {
  await import('./polyfill.js');
}

📄 script.js

// Array operations without mutation
const addItem = (items, newItem) => [...items, newItem];
const updateItem = (items, index, newValue) => 
  items.map((item, i) => i === index ? newValue : item);
const removeItem = (items, index) => 
  items.filter((item, i) => i !== index);

// Object updates
const updateUser = (user, updates) => ({ ...user, ...updates });

📄 script.js

// Function composition
const compose = (...fns) => (value) => fns.reduceRight((acc, fn) => fn(acc), value);

const addTen = x => x + 10;
const multiplyByTwo = x => x * 2;
const toString = x => x.toString();

const transform = compose(toString, multiplyByTwo, addTen);
console.log(transform(5)); // "30"

📄 script.js

// Debounce - Execute after delay, reset on new calls
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// Throttle - Execute at most once per interval
const throttle = (func, interval) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= interval) {
      lastCall = now;
      func.apply(this, args);
    }
  };
};

// Usage
const debouncedSearch = debounce(searchFunction, 300);
const throttledScroll = throttle(scrollHandler, 100);