10 เคล็ดลับในการเขียนโค้ด JavaScript ที่สะอาดและบำรุงรักษาได้

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

1. ใช้ชื่อตัวแปรที่มีความหมาย:

หลีกเลี่ยงการใช้ชื่อตัวแปรทั่วไป เช่น 'a', 'b' หรือ 'x' ให้ใช้ชื่อที่สื่อความหมายซึ่งสะท้อนถึงสิ่งที่ตัวแปรเป็นตัวแทนอย่างถูกต้องแทน

// bad
let x = 5;
let y = "John";

// good
let age = 5;
let name = "John";

2. หลีกเลี่ยงตัวแปรร่วม:

ตัวแปรร่วมอาจทำให้เกิดข้อขัดแย้งในการตั้งชื่อ และทำให้ยากต่อการติดตามว่ามีการใช้ตัวแปรใดบ้าง ให้ใช้ตัวแปรท้องถิ่นภายในฟังก์ชันหรือใช้โมดูลเพื่อสรุปการทำงานแทน

// bad
let counter = 0;

function incrementCounter() {
  counter += 1;
}

// good
function counterModule() {
  let counter = 0;
  function incrementCounter() {
    counter += 1;
  }
  return {
    incrementCounter,
    getCounter: () => counter,
  };
}

const counter = counterModule();
counter.incrementCounter();

3. ใช้การประกาศฟังก์ชัน:

การประกาศฟังก์ชันทำให้ชัดเจนเมื่อมีการกำหนดฟังก์ชัน และอนุญาตให้ยกฟังก์ชันได้ ซึ่งจะทำให้โค้ดของคุณอ่านง่ายขึ้นและหลีกเลี่ยงข้อผิดพลาดที่อาจเกิดขึ้น

// bad
const myFunction = () => {
  // do something
};

// good
function myFunction() {
  // do something
}

4. ใช้ฟังก์ชั่นลูกศร:

ฟังก์ชันลูกศรมีไวยากรณ์ที่กระชับมากขึ้นสำหรับการเขียนฟังก์ชันและทำให้โค้ดอ่านง่ายขึ้น พวกเขายังหลีกเลี่ยงปัญหาเกี่ยวกับการผูก 'สิ่งนี้'

// bad
function multiply(a, b) {
  return a * b;
}

// good
const multiply = (a, b) => a * b;

5. ใช้ความคิดเห็น:

ความคิดเห็นเป็นวิธีที่ดีในการอธิบายว่ากลุ่มโค้ดกำลังทำอะไรอยู่ และเหตุใดจึงเป็นเช่นนั้น ใช้ความคิดเห็นเพื่ออธิบายโค้ด สมมติฐาน หรือคำเตือนที่ซับซ้อน

function calculateDiscount(price, discountPercentage) {
  // calculate the discounted price
  const discountedPrice = price - (price * discountPercentage) / 100;
  
  return discountedPrice;
}

6. หลีกเลี่ยงการโทรกลับแบบซ้อน:

การซ้อนการโทรกลับอาจทำให้โค้ดอ่านและทำความเข้าใจได้ยาก ใช้ Promise หรือ async/await เพื่อหลีกเลี่ยงการโทรกลับนรก

// bad
fs.readFile(filePath, (err, data) => {
  if (err) {
    console.log("Error reading file");
  } else {
    fs.writeFile(filePath, "new data", (err) => {
      if (err) {
        console.log("Error writing file");
      } else {
        console.log("File written successfully");
      }
    });
  }
});

// good
fs.promises
  .readFile(filePath)
  .then(() => fs.promises.writeFile(filePath, "new data"))
  .then(() => console.log("File written successfully"))
  .catch(() => console.log("Error reading or writing file"));

7. ใช้ชื่อฟังก์ชันที่มีความหมาย:

เช่นเดียวกับตัวแปร ฟังก์ชันควรมีชื่อที่สื่อความหมายซึ่งสะท้อนถึงการทำงานของฟังก์ชันได้อย่างถูกต้อง

// bad
function xyz() {
  // do something
}

// good
function calculateTotalPrice() {
  // do something
}

8. ใช้เครื่องมือสำลี:

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

9. เก็บฟังก์ชันให้เล็ก:

ฟังก์ชันที่ทำหลายสิ่งเกินไปอาจทำให้อ่านและแก้ไขจุดบกพร่องได้ยาก แบ่งฟังก์ชันที่ซับซ้อนออกเป็นฟังก์ชันที่เล็กลงและเน้นมากขึ้น

function calculateTotalPrice(items) {
  let totalPrice = 0;
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    totalPrice += item.price * item.quantity;
  }
  if (totalPrice > 100) {
    totalPrice = totalPrice - 10;
  }
  return totalPrice;
}

// good
function calculateTotalPrice(items) {
  const subTotal = calculateSubTotal(items);
  const discount = calculateDiscount(subTotal);
  const totalPrice = applyShipping(subTotal - discount);
  return totalPrice;
}

function calculateSubTotal(items) {
  let subTotal = 0;
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    subTotal += item.price * item.quantity;
  }
  return subTotal;
}

function calculateDiscount(subTotal) {
  return subTotal > 100 ? 10 : 0;
}

function applyShipping(price) {
  return price + 5;
}

10.ใช้ข้อความแสดงข้อผิดพลาดที่มีความหมาย:

ข้อความแสดงข้อผิดพลาดควรให้ข้อมูลและชัดเจน ช่วยให้นักพัฒนารายอื่นเข้าใจสิ่งที่ผิดพลาดและวิธีแก้ไข

function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

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