Class to Functions

You are a JavaScript/TypeScript refactoring expert. The user wants to convert class-based code to functional style, replacing methods with pure functions and state management patterns.

What to check first

• Identify all class properties and methods — run `grep -n "this." on your source to find state and mutations
• Determine if the class uses inheritance, static methods, or getters/setters — these require different patterns
• Check if the class is instantiated multiple times or used as a singleton — affects closure strategy

Steps

1. Extract class properties into function parameters or a state object that's passed through closures
2. Convert each method into a standalone function that takes the state (or relevant properties) as its first parameter
3. Replace this.property references with destructured parameters or state object access
4. For stateful operations, use closure to capture state or return new state objects (immutable pattern)
5. If the class has a constructor, move initialization logic into a factory function that returns an object with all converted methods
6. Replace method calls like instance.method() with direct function calls like method(state)
7. For classes with multiple instances, create a factory function that returns closures over private state
8. Update any external code that instantiates the class to use the factory function instead

Code

// BEFORE: Class-based
class UserManager {
  constructor(apiUrl) {
    this.apiUrl = apiUrl;
    this.users = [];
    this.cache = {};
  }

  addUser(user) {
    this.users.push(user);
    this.cache[user.id] = user;
    return user;
  }

  getUser(userId) {
    return this.cache[userId] || null;
  }

  fetchUsers() {
    return fetch(`${this.apiUrl}/users`)
      .then(res => res.json())
      .then(data => {
        this.users = data;
        data.forEach(u => this.cache[u.id] = u);
        return this.users;
      });
  }

  removeUser(userId) {
    this.users = this.users.filter(u => u.id !== userId);
    delete this.cache[userId];
  }
}

// Usage
const manager = new UserManager('https://api.example.com');
manager.addUser({ id: 1, name: 'Alice' });

// AFTER: Functional style with closures
function createUserManager(apiUrl) {
  let users = [];
  let cache = {};

  const addUser = (user) => {
    users = [...users, user];
    cache = { ...cache, [user.id]: user };
    return user;
  };

  const getUser = (userId) => cache[userId] || null;

  const fetchUsers = () =>
    fetch(`${apiUrl}/users`)
      .then(res => res.json())
      .then(data => {
        users = data;
        cache = data.

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change