Modern JavaScript Patterns

Comprehensive guide for mastering modern JavaScript (ES6+) features, functional programming patterns, and best practices for writing clean, maintainable, and performant code.

When to Use This Skill

Refactoring legacy JavaScript to modern syntax
Implementing functional programming patterns
Optimizing JavaScript performance
Writing maintainable and readable code
Working with asynchronous operations
Building modern web applications
Migrating from callbacks to Promises/async-await
Implementing data transformation pipelines

ES6+ Core Features

Arrow Functions

// Concise syntax
const add = (a, b) => a + b;
const double = x => x * 2;

// Lexical 'this' binding
class Counter {
  constructor() {
    this.count = 0;
  }

  increment = () => {
    this.count++;  // 'this' refers to Counter instance
  };
}

See detailed patterns: Arrow Functions & Syntax

Destructuring

// Object destructuring
const { name, email } = user;
const { address: { city } } = user;  // Nested

// Array destructuring
const [first, second, ...rest] = numbers;
[a, b] = [b, a];  // Swap variables

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

See detailed patterns: Destructuring Patterns

Spread and Rest Operators

// Spread operator
const combined = [...arr1, ...arr2];
const settings = { ...defaults, ...userPrefs };

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

See detailed patterns: Spread & Rest

Asynchronous JavaScript

Promises

// Creating promises
const fetchUser = (id) => {
  return new Promise((resolve, reject) => {
    // Async operation
    if (success) resolve(data);
    else reject(error);
  });
};

// Promise combinators
Promise.all([p1, p2, p3])      // All must succeed
Promise.allSettled([p1, p2])   // Wait for all
Promise.race([p1, p2])         // First to complete
Promise.any([p1, p2])          // First to succeed

See detailed patterns: Promises & Async

Async/Await

async function fetchUserData(id) {
  try {
    const user = await fetchUser(id);
    const posts = await fetchUserPosts(user.id);
    return { user, posts };
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

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

See detailed patterns: Async/Await Patterns

Functional Programming

Array Methods

// Transform, filter, reduce
const names = users.map(u => u.name);
const active = users.filter(u => u.active);
const total = numbers.reduce((sum, n) => sum + n, 0);

// Advanced methods
const user = users.find(u => u.id === 2);
const hasActive = users.some(u => u.active);
const allAdults = users.every(u => u.age >= 18);

See detailed patterns: Functional Programming

Higher-Order Functions

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

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

const processUser = pipe(
  trimName,
  lowercaseEmail,
  parseAge
);

See detailed patterns: Higher-Order Functions

Modern Language Features

Template Literals

const greeting = `Hello, ${name}!`;

const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// Tagged templates
const highlighted = highlight`Name: ${name}, Age: ${age}`;

Optional Chaining & Nullish Coalescing

// Optional chaining
const city = user?.address?.city;
const result = obj.method?.();

// Nullish coalescing
const value = input ?? 'default';
const name = user?.name ?? 'Anonymous';

See detailed patterns: Modern Operators

Classes and Modules

// Modern class syntax
class User {
  #password;  // Private field
  static count = 0;

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

  get displayName() {
    return this.name.toUpperCase();
  }
}

// ES6 Modules
export const PI = 3.14159;
export default function multiply(a, b) {
  return a * b;
}

import multiply, { PI } from './math.js';

See detailed patterns: Classes & Modules

Iterators & Generators

// Generator function
function* rangeGenerator(from, to) {
  for (let i = from; i <= to; i++) {
    yield i;
  }
}

// Async generator
async function* fetchPages(url) {
  let page = 1;
  while (true) {
    const data = await fetch(`${url}?page=${page}`);
    if (data.length === 0) break;
    yield data;
    page++;
  }
}

for await (const page of fetchPages('/api/users')) {
  console.log(page);
}

See detailed patterns: Iterators & Generators

Performance Optimization

// 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);
    }
  };
}

See detailed patterns: Performance Optimization

Best Practices

Use const by default: Only use let when reassignment is needed
Prefer arrow functions: Especially for callbacks
Use template literals: Instead of string concatenation
Destructure objects and arrays: For cleaner code
Use async/await: Instead of Promise chains
Avoid mutating data: Use spread operator and array methods
Use optional chaining: Prevent "Cannot read property of undefined"
Prefer array methods: Over traditional loops
Write pure functions: Easier to test and reason about
Use modules: For better code organization

Common Pitfalls

this binding confusion: Use arrow functions or bind()
Async/await without error handling: Always use try/catch
Mutation of objects: Use spread operator or Object.assign()
Forgetting await: Async functions return promises
Not handling promise rejections: Use catch() or try/catch

Resources

MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript
JavaScript.info: https://javascript.info/
You Don't Know JS: https://github.com/getify/You-Dont-Know-JS
Eloquent JavaScript: https://eloquentjavascript.net/
ES6 Features: http://es6-features.org/

modern-javascript-patterns