Refactoring (การปรับปรุงโค้ด)

บทนำ

การปรับปรุงโค้ด (Refactoring) คือกระบวนการปรับโครงสร้างโค้ดให้มีคุณภาพดีขึ้นโดยไม่เปลี่ยนพฤติกรรมภายนอก ช่วยให้โค้ดอ่านง่าย บำรุงรักษาง่ายขึ้น และลดข้อผิดพลาด

เหตุผลที่ต้องปรับปรุงโค้ด

1. เพิ่มความเข้าใจ - โค้ดที่อ่านง่ายช่วยให้ทีมเข้าใจได้เร็วขึ้น
2. ลดความซับซ้อน - ทำให้โค้ดง่ายต่อการแก้ไขและขยายฟีเจอร์
3. ลดข้อผิดพลาด - ลดโอกาสเกิดบัグจากการเข้าใจผิด
4. เพิ่มประสิทธิภาพ - โอกาสในการปรับปรุงประสิทธิภาพ

กลิ่นของโค้ด (Code Smells)

1. ฟังก์ชันที่ยาวเกินไป

• ปัญหา: ฟังก์ชันที่ยาวเกินไปเข้าใจยาก
• การแก้ไข: แยกเป็นฟังก์ชันย่อยที่มีความหมายชัดเจน

2. ตัวแปรชั่วคราวมากเกินไป

• ปัญหา: ใช้ตัวแปรชั่วคราวมากเกินความจำเป็น
• การแก้ไข: ใช้ Query Method หรือ Inline Temp

3. พารามิเตอร์จำนวนมาก

• ปัญหา: ฟังก์ชันรับพารามิเตอร์มากเกินไป
• การแก้ไข: จัดกลุ่มพารามิเตอร์เป็น Object

เทคนิคการปรับปรุงโค้ด

1. Extract Method

ก่อน:

function printOwing(amount: number) {
  printBanner();

  // Print details
  console.log(`name: ${name}`);
  console.log(`amount: ${amount}`);
}

หลัง:

function printOwing(amount: number) {
  printBanner();
  printDetails(amount);
}

function printDetails(amount: number) {
  console.log(`name: ${name}`);
  console.log(`amount: ${amount}`);
}

2. Rename Variable

ก่อน:

const a = height * width; // area of rectangle

หลัง:

const area = height * width;

3. Replace Magic Number with Symbolic Constant

ก่อน:

if (temperature > 100) {
  // 100 คืออะไร?
  console.log("Boiling");
}

หลัง:

const BOILING_POINT = 100;

if (temperature > BOILING_POINT) {
  console.log("Boiling");
}

ตัวอย่างการปรับปรุงโค้ด

ตัวอย่างที่ 1: แยกเงื่อนไขที่ซับซ้อน

ก่อน:

function calculateDiscount(customer: Customer, products: Product[]): number {
  let discount = 0;

  if (
    customer.type === "premium"
    && products.length > 5
    && customer.purchaseHistory.totalPurchases > 1000
  ) {
    discount = 0.2;
  } else if (customer.type === "regular" && products.length > 3) {
    discount = 0.1;
  }

  return discount;
}

หลัง:

function calculateDiscount(customer: Customer, products: Product[]): number {
  if (isEligibleForPremiumDiscount(customer, products)) {
    return 0.2;
  }

  if (isEligibleForRegularDiscount(customer, products)) {
    return 0.1;
  }

  return 0;
}

function isEligibleForPremiumDiscount(
  customer: Customer,
  products: Product[],
): boolean {
  return customer.type === "premium"
    && products.length > 5
    && customer.purchaseHistory.totalPurchases > 1000;
}

function isEligibleForRegularDiscount(
  customer: Customer,
  products: Product[],
): boolean {
  return customer.type === "regular" && products.length > 3;
}

เครื่องมือช่วยปรับปรุงโค้ด

1. ESLint - ตรวจสอบและแก้ไขรูปแบบโค้ด
2. Prettier - จัดรูปแบบโค้ดอัตโนมัติ
3. TypeScript - ตรวจสอบประเภทข้อมูล
4. Jest - ทดสอบการทำงานหลังปรับปรุงโค้ด

ขั้นตอนการปรับปรุงโค้ด

1. มีชุดทดสอบ - ตรวจสอบว่ามีชุดทดสอบที่ครอบคลุม
2. ทำทีละน้อย - เปลี่ยนทีละอย่างและทดสอบบ่อยๆ
3. Commit บ่อยๆ - บันทึกการเปลี่ยนแปลงเป็นระยะ
4. ตรวจสอบผลลัพธ์ - ตรวจสอบว่าการทำงานยังเหมือนเดิม

แนวทางปฏิบัติที่ดี

1. ตั้งชื่อให้มีความหมาย - ชื่อตัวแปร ฟังก์ชัน และคลาสควรสื่อความหมาย
2. ฟังก์ชันควรทำเพียงอย่างเดียว - Single Responsibility Principle
3. ลดการซ้ำซ้อน - DRY (Don't Repeat Yourself)
4. ทำให้ง่ายเข้าไว้ - KISS (Keep It Simple, Stupid)

แบบฝึกหัด

1. ลองปรับปรุงโค้ดส่วนที่เคยเขียนให้อ่านง่ายขึ้น
2. ใช้เครื่องมือตรวจสอบคุณภาพโค้ด
3. ฝึกเขียน Unit Test สำหรับโค้ดที่ปรับปรุง

สรุป

การปรับปรุงโค้ดเป็นทักษะสำคัญที่ช่วยให้โค้ดมีคุณภาพดีขึ้นอย่างต่อเนื่อง ควรทำเป็นประจำและทำทีละน้อยเพื่อลดความเสี่ยงในการเกิดข้อผิดพลาด