home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีลด Errors ใน JavaScript Scripts

เคล็ดลับลดข้อผิดพลาดใน Scripts

1. ใช้ Comments เยอะพอ

Comments ช่วยอธิบายเหตุผลที่เขียนโค้ดแบบนั้น และอธิบายส่วนที่ซับซ้อน ทำให้เข้าใจง่ายเมื่อกลับมาอ่านภายหลัง หรือคนอื่นมาอ่าน

// Good: อธิบาย "ทำไม" ไม่ใช่ "ทำอะไร"
function calculateDiscount(price, user) {
  // VIP users get 20% off on weekends only
  if (user.isVIP && isWeekend()) {
    return price * 0.8;
  }
  return price;
}

2. ใช้ Indentation (เยื้องโค้ด) เสมอ

ทำให้โค้ดอ่านง่าย จับคู่ Braces { } ตัวเปิด-ปิดง่ายขึ้น ป้องกัน Syntax Error

// Bad
if(x>0){doSomething();}else{doOther();}

// Good
if (x > 0) {
  doSomething();
} else {
  doOther();
}

3. เขียน Modular Code (โมดูลาร์)

จัดกลุ่มคำสั่งที่เกี่ยวข้องเป็น Functions ทดสอบและนำกลับมาใช้ใหม่ได้ง่าย (Reusable)

// แทนที่จะเขียนโค้ดยาวใน Event Handler เดียว
function handleFormSubmit(formData) {
  const validated = validateForm(formData);
  if (!validated.isValid) return showErrors(validated.errors);
  
  const processed = processData(validated.data);
  saveToServer(processed)
    .then(showSuccess)
    .catch(showError);
}

4. ตั้งชื่อตัวแปรและฟังก์ชันอย่างสอดคล้องและมีความหมาย

  • ใช้ชื่อที่อธิบายวัตถุประสงค์: userAge แทน a, calculateTotal แทน calc
  • Boolean ให้ขึ้นต้นด้วย is/has/can: isActive, hasPermission, canEdit
  • Function ใช้ Verb: getUser, saveData, validateEmail

5. ใช้ Syntax ตั้งชื่อสอดคล้องกัน

  • camelCase สำหรับ Variable/Function: userName, getUserData
  • PascalCase สำหรับ Class/Constructor: User, ApiClient
  • UPPER_SNAKE_CASE สำหรับ Constant: MAX_RETRY
  • _prefix สำหรับ Private (Convention): _internalMethod

6. ทดสอบแบบ Modular (Incremental Testing)

อย่าเขียน Script ทั้งหมดถึงค่อยทดสอบ ให้เขียนทีละส่วน ทดสอบให้ผ่านก่อนค่อยเพิ่มส่วนต่อไป

// ขั้นตอนการพัฒนา
// 1. เขียนฟังก์ชัน validateEmail() -> ทดสอบ
// 2. เขียนฟังก์ชัน validateForm() ใช้ validateEmail -> ทดสอบ
// 3. เขียน handleSubmit() ใช้ validateForm -> ทดสอบ
// 4. ผูก Event Listener -> ทดสอบ End-to-End

เครื่องมือช่วยลด Error

  • Linters: ESLint (Standard, Airbnb, Google Style Guide)
  • Formatters: Prettier (Auto-format)
  • Type Checkers: TypeScript, JSDoc + Type Checking
  • Testing: Jest, Vitest, Cypress (Unit, Integration, E2E)
  • Debuggers: VS Code Debugger, Chrome DevTools

สรุป

ลด Error ได้ด้วย: Comments ที่ดี, Indentation ถูกต้อง, Modular Functions, Naming Convention สอดคล้อง, Incremental Testing และใช้ Tooling (Linter, TypeScript, Tests) ช่วยจับ Error ก่อน Production