refactoring

Refactoring Patterns

1. Extract Method/Function

// Before ❌
function processOrder(order) {
  // 50 lines of validation
  // 30 lines of calculation
  // 20 lines of formatting
}

// After ✅
function processOrder(order) {
  const validated = validateOrder(order);
  const calculated = calculateTotal(validated);
  return formatOutput(calculated);
}

2. Simplify Conditionals

// Before ❌
if (user && user.role === 'admin' || user && user.role === 'superadmin') {
  if (user.permissions && user.permissions.includes('write')) { ... }
}

// After ✅
const isAdmin = user?.role === 'admin' || user?.role === 'superadmin';
const canWrite = user?.permissions?.includes('write');
if (isAdmin && canWrite) { ... }

3. Remove Code Smells

| Code Smell | Solution | |------------|----------| | Magic Numbers | Extract to named constants | | Long Parameters | Use object/options pattern | | Duplicate Code | Extract to shared function | | Dead Code | Delete unused code | | Deep Nesting | Early return pattern |

---

Framework Migration

React Class → Functional

// Before (Class)
class Counter extends Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
  render() { return <button onClick={this.increment}>{this.state.count}</button> }
}

// After (Functional)
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  return <button onClick={increment}>{count}</button>;
}

CommonJS → ESM

// Before (CommonJS)
const fs = require('fs');
module.exports = { readFile };

// After (ESM)
import fs from 'fs';
export { readFile };

---

Refactoring Checklist

• [ ] มีหน่วยทดสอบก่อน refactor
• [ ] Refactor ทีละขั้น commit บ่อยๆ
• [ ] ไม่เปลี่ยน behavior เดิม
• [ ] Run tests หลังทุกการเปลี่ยนแปลง
• [ ] Code review อีกรอบ

Commands

# Find duplicate code
npx jscpd ./src

# Find unused exports
npx ts-unused-exports tsconfig.json

# Check complexity
npx eslint --rule 'complexity: ["error", 10]' ./src