modern-javascript-patterns

Modern JavaScript Patterns

Master ES6+ features and functional programming for clean, efficient code.

Arrow Functions

// Basic syntax
const add = (a, b) => a + b;
const double = x => x * 2;
const getRandom = () => Math.random();

// Multi-line (need braces)
const processUser = user => {
  const normalized = user.name.toLowerCase();
  return { ...user, name: normalized };
};

// Returning objects (wrap in parentheses)
const createUser = (name, age) => ({ name, age });

// Lexical 'this' binding
class Counter {
  increment = () => { this.count++; };  // 'this' preserved
}

Destructuring

// Object destructuring
const { name, email } = user;
const { name: userName } = user;           // Rename
const { age = 25 } = user;                 // Default value
const { address: { city } } = user;        // Nested
const { id, ...userData } = user;          // Rest

// Array destructuring
const [first, second] = numbers;
const [, , third] = numbers;               // Skip elements
const [head, ...tail] = numbers;           // Rest
let [a, b] = [1, 2]; [a, b] = [b, a];     // Swap

// Function parameters
function greet({ name, age = 18 }) {
  console.log(`Hello ${name}`);
}

Spread & Rest

// Spread arrays
const combined = [...arr1, ...arr2];
const copy = [...arr1];

// Spread objects
const settings = { ...defaults, ...userPrefs };
const newObj = { ...user, age: 31 };

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

Async/Await

// Basic usage
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    return await response.json();
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Parallel execution
const [user1, user2] = await Promise.all([
  fetchUser(1),
  fetchUser(2)
]);

// Promise combinators
Promise.all(promises);        // Wait for all
Promise.allSettled(promises); // All results, regardless of outcome
Promise.race(promises);       // First to complete
Promise.any(promises);        // First to succeed