Refactoring

🔄 Refactoring Skill

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

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

// After (Functional)
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  return <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