MediumJavaScriptTypeScript

Single Responsibility

TypeScriptClean CodeSRPRefactoring

This function does three distinct jobs: fetches, filters, and formats — a maintenance nightmare.

// dirty — one function, three responsibilities
interface User { name: string; age: number; isActive: boolean; }

function solve(rawUsers: User[]) {
  // fetch (simulated here as the input)
  const active = rawUsers.filter(u => u.isActive);
  const seniors = active.filter(u => u.age >= 60);
  return seniors.map(u => u.name.toUpperCase() + ' (' + u.age + ')');
}

Refactor into three functions, each with one job:

  • filterActive(users) — keep only active users
  • filterSeniors(users) — keep only users aged 60+
  • format(users) — format as "NAME (age)" strings

solve(users, 'filterActive') dispatches to the right function.

Sample tests

Test #1filterActive keeps active users
Input: [[{"age":65,"name":"Alice","isActive":true}],"filterActive"]
Output: [{"age":65,"name":"Alice","isActive":true}]
Test #2filterSeniors keeps age >= 60
Input: [[{"age":55,"name":"Bob","isActive":true},{"age":62,"name":"Eve","isActive":true}],"filterSeniors"]
Output: [{"age":62,"name":"Eve","isActive":true}]
Test #3format uppercases name and adds age
Input: [[{"age":70,"name":"Carol","isActive":true}],"format"]
Output: ["CAROL (70)"]