Modern Javascript Patterns

Seth HobsonCommunityCreated by Seth Hobson

Skill
Guidelines
Software development
MIT
No issues found

From the author

Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.

— the description by Seth Hobson

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured reference for modern JavaScript (ES6+) development. It covers essential syntax improvements, functional programming techniques, and best practices designed to help developers write more maintainable, readable, and performant code. The content spans core language features like arrow functions, destructuring, and spread operators, as well as advanced concepts such as higher-order functions, composition, and asynchronous patterns.

What it does

Explains modern ES6+ syntax including arrow functions, template literals, and modules.
Demonstrates object and array destructuring for cleaner data handling.
Provides patterns for functional programming, including map, filter, reduce, and composition.
Covers asynchronous JavaScript using Promises and async/await.
Offers best practices for immutability, error handling, and code organization.
Includes advanced techniques like memoization, currying, and partial application.

When to use it

When refactoring legacy JavaScript codebases to modern standards.
When implementing functional programming paradigms in JavaScript applications.
When optimizing performance and readability in new projects.
When migrating from callback-based asynchronous code to Promises and async/await.
When seeking standard patterns for data transformation and state management.

Advantages

Promotes the use of clean, self-documenting, and maintainable code.
Reduces common bugs through modern features like optional chaining and nullish coalescing.
Encourages functional programming practices that simplify testing and debugging.
Provides clear, actionable examples for complex language features.
Helps standardize coding styles across development teams.

Usage examples

“How can I refactor a traditional loop to use modern functional array methods?”: The agent will provide examples using map, filter, or reduce to replace imperative loops, improving code readability and immutability.
“Explain how to use destructuring to clean up my function parameters.”: The agent will show how to extract properties directly from objects in function signatures, reducing boilerplate code.
“Show me how to use async/await to handle multiple API calls.”: The agent will provide a pattern for using async/await with Promise.all to execute concurrent operations efficiently.
“What is the best way to copy an object while updating one property?”: The agent will demonstrate the use of the spread operator to create a shallow copy with updated values immutably.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/wshobson/modern-javascript-patterns/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip modern-javascript-patterns.zip -d .agents/skills

Documentation by Seth Hobson

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

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

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"
Use nullish coalescing: For default values
Prefer array methods: Over traditional loops
Use modules: For better code organization
Write pure functions: Easier to test and reason about
Use meaningful variable names: Self-documenting code
Keep functions small: Single responsibility principle
Handle errors properly: Use try/catch with async/await
Use strict mode: 'use strict' for better error catching

For common pitfalls (this binding, promise anti-patterns, memory leaks), see references/advanced-patterns.md.

Files

ATTRIBUTION.mdAdded by AutoGineer1020 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md2.1 KiB
references/advanced-patterns.md9.9 KiB
references/details.md10.1 KiB

references/details.md

modern-javascript-patterns — detailed patterns and worked examples

ES6+ Core Features

1. Arrow Functions

Syntax and Use Cases:

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

// Single parameter (parentheses optional)
const double = (x) => x * 2;

// No parameters
const getRandom = () => Math.random();

// Multiple statements (need curly 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 {
  constructor() {
    this.count = 0;
  }

  // Arrow function preserves 'this' context
  increment = () => {
    this.count++;
  };

  // Traditional function loses 'this' in callbacks
  incrementTraditional() {
    setTimeout(function () {
      this.count++; // 'this' is undefined
    }, 1000);
  }

  // Arrow function maintains 'this'
  incrementArrow() {
    setTimeout(() => {
      this.count++; // 'this' refers to Counter instance
    }, 1000);
  }
}

2. Destructuring

Object Destructuring:

const user = {
  id: 1,
  name: "John Doe",
  email: "[email protected]",
  address: {
    city: "New York",
    country: "USA",
  },
};

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

// Rename variables
const { name: userName, email: userEmail } = user;

// Default values
const { age = 25 } = user;

// Nested destructuring
const {
  address: { city, country },
} = user;

// Rest operator
const { id, ...userWithoutId } = user;

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

Array Destructuring:

const numbers = [1, 2, 3, 4, 5];

// Basic destructuring
const [first, second] = numbers;

// Skip elements
const [, , third] = numbers;

// Rest operator
const [head, ...tail] = numbers;

// Swapping variables
let a = 1,
  b = 2;
[a, b] = [b, a];

// Function return values
function getCoordinates() {
  return [10, 20];
}
const [x, y] = getCoordinates();

// Default values
const [one, two, three = 0] = [1, 2];

3. Spread and Rest Operators

Spread Operator:

// Array spreading
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

// Object spreading
const defaults = { theme: "dark", lang: "en" };
const userPrefs = { theme: "light" };
const settings = { ...defaults, ...userPrefs };

// Function arguments
const numbers = [1, 2, 3];
Math.max(...numbers);

// Copying arrays/objects (shallow copy)
const copy = [...arr1];
const objCopy = { ...user };

// Adding items immutably
const newArr = [...arr1, 4, 5];
const newObj = { ...user, age: 30 };

Rest Parameters:

// Collect function arguments
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4, 5);

// With regular parameters
function greet(greeting, ...names) {
  return `${greeting} ${names.join(", ")}`;
}
greet("Hello", "John", "Jane", "Bob");

// Object rest
const { id, ...userData } = user;

// Array rest
const [first, ...rest] = [1, 2, 3, 4, 5];

4. Template Literals

// Basic usage
const name = "John";
const greeting = `Hello, ${name}!`;

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

// Expression evaluation
const price = 19.99;
const total = `Total: $${(price * 1.2).toFixed(2)}`;

// Tagged template literals
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] || "";
    return result + str + `<mark>${value}</mark>`;
  }, "");
}

const name = "John";
const age = 30;
const html = highlight`Name: ${name}, Age: ${age}`;
// Output: "Name: <mark>John</mark>, Age: <mark>30</mark>"

5. Enhanced Object Literals

const name = "John";
const age = 30;

// Shorthand property names
const user = { name, age };

// Shorthand method names
const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  },
};

// Computed property names
const field = "email";
const user = {
  name: "John",
  [field]: "[email protected]",
  [`get${field.charAt(0).toUpperCase()}${field.slice(1)}`]() {
    return this[field];
  },
};

// Dynamic property creation
const createUser = (name, ...props) => {
  return props.reduce(
    (user, [key, value]) => ({
      ...user,
      [key]: value,
    }),
    { name },
  );
};

const user = createUser("John", ["age", 30], ["email", "[email protected]"]);

Asynchronous Patterns

1. Promises

Creating and Using Promises:

// Creating a promise
const fetchUser = (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "John" });
      } else {
        reject(new Error("Invalid ID"));
      }
    }, 1000);
  });
};

// Using promises
fetchUser(1)
  .then((user) => console.log(user))
  .catch((error) => console.error(error))
  .finally(() => console.log("Done"));

// Chaining promises
fetchUser(1)
  .then((user) => fetchUserPosts(user.id))
  .then((posts) => processPosts(posts))
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

Promise Combinators:

// Promise.all - Wait for all promises
const promises = [fetchUser(1), fetchUser(2), fetchUser(3)];

Promise.all(promises)
  .then((users) => console.log(users))
  .catch((error) => console.error("At least one failed:", error));

// Promise.allSettled - Wait for all, regardless of outcome
Promise.allSettled(promises).then((results) => {
  results.forEach((result) => {
    if (result.status === "fulfilled") {
      console.log("Success:", result.value);
    } else {
      console.log("Error:", result.reason);
    }
  });
});

// Promise.race - First to complete
Promise.race(promises)
  .then((winner) => console.log("First:", winner))
  .catch((error) => console.error(error));

// Promise.any - First to succeed
Promise.any(promises)
  .then((first) => console.log("First success:", first))
  .catch((error) => console.error("All failed:", error));

2. Async/Await

Basic Usage:

// Async function always returns a Promise
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const user = await response.json();
  return user;
}

// Error handling with try/catch
async function getUserData(id) {
  try {
    const user = await fetchUser(id);
    const posts = await fetchUserPosts(user.id);
    return { user, posts };
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
}

// Sequential vs Parallel execution
async function sequential() {
  const user1 = await fetchUser(1); // Wait
  const user2 = await fetchUser(2); // Then wait
  return [user1, user2];
}

async function parallel() {
  const [user1, user2] = await Promise.all([fetchUser(1), fetchUser(2)]);
  return [user1, user2];
}

Advanced Patterns:

// Async IIFE
(async () => {
  const result = await someAsyncOperation();
  console.log(result);
})();

// Async iteration
async function processUsers(userIds) {
  for (const id of userIds) {
    const user = await fetchUser(id);
    await processUser(user);
  }
}

// Top-level await (ES2022)
const config = await fetch("/config.json").then((r) => r.json());

// Retry logic
async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      return await fetch(url);
    } catch (error) {
      if (i === retries - 1) throw error;
      await new Promise((resolve) => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

// Timeout wrapper
async function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error("Timeout")), ms),
  );
  return Promise.race([promise, timeout]);
}

Functional Programming Patterns

Functional programming in JavaScript centers on pure functions, immutability, and composable transformations.

Key topics covered in references/advanced-patterns.md:

Array methods — map, filter, reduce, find, findIndex, some, every, flatMap, Array.from
Higher-order functions — custom forEach/map/filter, currying, partial application, memoization
Composition and piping — compose/pipe utilities with practical data transformation examples
Pure functions and immutability — immutable array/object operations, deep cloning with structuredClone

Modern Class Features

ES2022 classes support private fields (#field), static fields, getters/setters, and private methods. See references/advanced-patterns.md for a full example with inheritance.

Modules (ES6)

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

// Import
import multiply, { PI, add } from "./math.js";

// Dynamic import (code splitting)
const { add } = await import("./math.js");

For re-exports, namespace imports, and conditional dynamic loading see references/advanced-patterns.md.

Iterators and Generators

Generators (function*) and async generators (async function*) enable lazy sequences and async pagination. See references/advanced-patterns.md for custom iterator, range generator, fibonacci, and for await...of examples.

Modern Operators

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

// Nullish coalescing — default only for null/undefined (not 0 or "")
const value = null ?? "default"; // 'default'
const zero = 0 ?? "default";    // 0

// Logical assignment
a ??= "default";   // assign if null/undefined
obj.count ||= 1;   // assign if falsy
obj.count &&= 2;   // assign if truthy

Performance Optimization

See references/advanced-patterns.md for debounce, throttle, and lazy evaluation with generators.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

Seth Hobson

Publisher

Seth Hobson (Community)

Source

wshobson/agents · plugins/javascript-typescript/skills/modern-javascript-patterns · commit 4bde316

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

AutoGineer is not affiliated with or endorsed by Seth Hobson or Seth Hobson.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download modern-javascript-patterns.zip