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

Functional Patterns

Array Methods

const users = [{ id: 1, name: 'John', active: true }, ...];

// Map - Transform
const names = users.map(u => u.name);

// Filter - Select
const activeUsers = users.filter(u => u.active);

// Reduce - Aggregate
const totalAge = users.reduce((sum, u) => sum + u.age, 0);

// Chaining
const result = users
  .filter(u => u.active)
  .map(u => u.name)
  .sort()
  .join(', ');

// Other useful methods
users.find(u => u.id === 2);           // First match
users.findIndex(u => u.name === 'Jane'); // Index of first match
users.some(u => u.active);              // At least one matches
users.every(u => u.age >= 18);          // All match
userTags.flatMap(u => u.tags);          // Map and flatten

Higher-Order Functions

// Currying
const multiply = a => b => a * b;
const double = multiply(2);

// Memoization
function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);
  };
}

// Composition
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

Immutability

// Arrays
const withNew = [...arr, newItem];           // Add
const without = arr.filter(x => x !== item); // Remove
const updated = arr.map(x => x.id === id ? { ...x, name } : x);

// Objects
const updated = { ...user, age: 31 };        // Update
const { password, ...safe } = user;          // Remove key

Modern Operators

// Optional chaining
const city = user?.address?.city;
const result = obj.method?.();
const first = arr?.[0];

// Nullish coalescing
const value = null ?? 'default';    // 'default'
const value = 0 ?? 'default';       // 0 (not 'default')

// Logical assignment
a ??= 'default';  // a = a ?? 'default'
a ||= 'default';  // a = a || 'default'
a &&= value;      // a = a && value

Modules

// Named exports
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// Default export
export default function multiply(a, b) { return a * b; }

// Importing
import multiply, { PI, add } from './math.js';
import * as Math from './math.js';

// Dynamic import
const module = await import('./feature.js');

Performance Patterns

// Debounce
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

// Throttle
function throttle(fn, limit) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

Best Practices

1. Use const by default - Only let when reassignment needed
2. Prefer arrow functions - Especially for callbacks
3. Use template literals - Instead of concatenation
4. Destructure - For cleaner code
5. Use async/await - Instead of Promise chains
6. Avoid mutation - Use spread operator
7. Use optional chaining - Prevent undefined errors
8. Use nullish coalescing - For defaults
9. Prefer array methods - Over loops
10. Write pure functions - Easier to test

Detailed References

For comprehensive patterns, see:

• references/generators-iterators.md
• references/class-features.md

Resources

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript
• JavaScript.info: https://javascript.info/