8 วิธีเขียน JavaScript แบบคลีน ๆ

เขียนโค้ดมาสักพักละแต่พอกลับมาอ่านทำไมมันงงจังเลยเนี่ย ตัวแปรนี้สร้างขึ้นทำไม ใช้ทำอะไร แล้วฟังก์ชันนี้มันใช้ทำอะไร พอเอาโค้ดไปให้เพื่อนอ่านยิ่งมึนกันไปใหญ่เลย เพราะตัวเองยังไม่เข้าใจแล้วคนอื่นจะเข้าใจได้ยังไง…มาเปลี่ยนการเขียนโค้ดแบบเก่า ให้เป็นแบบ Clean Code กันดีกว่า กับในบทความนี้ที่จะพาเพื่อน ๆ ไปเรียนรู้วิธีการเขียนโค้ดแบบคลีน ๆ ในภาษา JavaScript จะเป็นยังไง เราไปเริ่มต้นกันเลย !!

ก่อนอื่นเรามารู้จัก Clean Code กันก่อน เจ้านี่มันเป็นวิธีการเขียนโค้ดที่เน้นเข้าใจง่าย การเขียนไม่ต้องใช้กระบวนท่าซับซ้อน ง่ายต่อการเขียน อ่าน และดูแลรักษานั่นเอง และจะมีวิธีเขียนยังไงบ้าง ไปดูกัน

01 ตัวแปร – ชื่อตัวแปรควรตั้งให้สื่อความหมายและเข้าใจง่าย เพื่อให้คนที่มาอ่านโค้ดของเราหรือตัวเราเองเมื่อกลับมาอ่านแล้วสามารถเข้าใจได้ง่ายที่สุด หลีกเลี่ยงการใช้ตัวแปรที่ไม่มีความหมายเพราะอาจจะให้ให้ความเข้าใจคลาดเคลื่อน และใช้งานตัวแปรผิดวัตถุประสงค์ได้นั่นเอง

👨‍💻ตัวอย่าง 1 

Bad 

const y = moment().format("YYYY/MM/DD");

Good 

const currentDate = moment().format("YYYY/MM/DD");

👨‍💻 ตัวอย่าง 2 

Bad 

let x = 23;
let y = 1998;
let z = new Date().getFullYear();
if (y - z == x){
    // do something
}

Good 

let userAge = 23;
let userBirthyear = 1998;
let currentYear = new Date().getFullYear();
if (userBirthyear - currentYear == userAge){
    // do something
}

02 เงื่อนไข – หลีกเลี่ยงในการตรวจสอบเงื่อนไขที่เป็นเท็จ ควรเริ่มต้นตรวจสอบเงื่อนไขที่เป็นจริงก่อน

👨‍💻 ตัวอย่าง

Bad 

function binarySearch(num) {
    // do something
  }
if (!binarySearch(num)) {
   // do something
}

Good

function binarySearch(num) {
    // do something
}
if (binarySearch(num)) {
   // do something
}

03 ลบ Comment ที่ไม่จำเป็น – Comment ของฟังก์ชันหรือตัวแปรไหนที่ไม่ได้ใช้ แล้ว Comment ไว้ยาวเหยียดมาก ถึงมันไม่ได้มีผลกับการทำงานแต่แนะนำว่าให้ลบออกไปดีกว่า

👨‍💻 ตัวอย่าง

Bad

binarySearch();
// calArea();
// mergeSort();
// calHight();

Good

binarySearch();

04 ลบโค้ดเก่าที่ไม่ใช้งาน – นอกจาก Comment ที่ไม่ได้ใช้งานแล้ว ในโค้ดของเราอาจจะมีฟังก์ชันที่ไม่ถูกเรียกใช้งาน ไม่มีเหตุผลเลยที่ต้องเก็บเอาไว้ แนะนำว่าให้ลบออกไปเช่นกัน

👨‍💻  ตัวอย่าง

Bad

function oldfunction(url) {
  // do something
}
function newfunction(url) {
  // do something
}
const req = newfunction;

Good

function newfunction(url) {
  // do something
}
const req = newfunction;

05 Object – หลีกเลี่ยงการตั้งชื่อ Object และตัวแปรใน Object ซ้ำซ้อนกัน เพราะเวลานำตัวแปรไปใช้อาจจะสับสนได้นั่นเอง

👨‍💻 ตัวอย่าง

Bad

let customer = {
    cusName: "Mew",
    cusDetails: {
      cusAge: 19,
      cusLocation: "Ladprao", 
      cusCity: "bangkok"
    }
};
let getcustomerAge = customer.cusDetails?.cusAge;
console.log(customerAge);

Good

let customer = {
    name: "Mew",
    details: {
      age: 19,
      location: "Ladprao", 
      city: "bangkok"
    }
};
let getcustomerAge = customer.details?.age;
console.log(customerAge);

06 Import เฉพาะสิ่งที่จำเป็น – ควร Import เฉพาะฟังก์ชันที่ต้องการใช้ในไฟล์เท่านั้น แทนที่จะ Import มาทั้งไฟล์

👨‍💻 ตัวอย่าง 

Bad 

const calculate = require('./calculations')
calculate.add(10,9);
calculate.subtract(10,9);

Good

const { add, subtract } = require('./calculations')
add(10,9);
subtract(10,9);

07 ใช้วงเล็บ – เมื่อมีการทำงานของ Operator หลาย ๆ ตัว ให้ใช้วงเล็บเพื่อแบ่งการทำงานให้ถูกต้อง ผลลัพธ์ที่ออกมาจะได้ไม่คลาดเคลื่อน

👨‍💻 ตัวอย่าง 

Bad

const foo = a && b < 0 || c > 0 || d + 1 === 0;
if (a || b && c) {
  return d;
}

Good

const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
if (a || (b && c)) {
  return d;
}

08 Error Handling – การใส่ try catch เพื่อดัก Error ในฟังก์ชันเป็นสิ่งที่ดี แต่เมื่อใช้แล้วควรจะมีแผนสำหรับการแก้ไขเมื่อฟังก์ชันนั้น ๆ เกิด Error หลีกเลี่ยงการใช้ console.log() เพื่อแสดง Error เพียงอย่างเดียว 

👨‍💻 ตัวอย่าง

Bad

  try {
    calculate();
  } catch (error) {
    console.log(error);
  }

Good

  try {
    calculate();
  } catch (error) {
    notifyUserOfError(error);   
    reportErrorToService(error);   
  }

ทั้งหมดนี้ คือ 8 วิธีเขียน Clean Code ใน JavaScript ที่เรานำมาฝากกันในวันนี้ แต่ ๆๆ มันยังมีวิธีอีกเพียบ !! หากเพื่อน ๆ คนไหนสนใน สามารถเข้าไปศึกษาได้ ที่นี่ 

หรือถ้าใครอยากใช้ Tools ดี ๆ ในการเขียน Clean Code และจัดรูปแบบโค้ดให้สวยงาม อ่านง่าย เราขอแนะนำให้เพื่อน ๆ รู้จักกับ ESLint  และ Prettier ที่จะช่วยให้เพื่อน ๆ ปรับแต่งการเขียนโค้ดในภาษา JavaScript ให้เหมาะสม ใครใช้ VSCode สามารถโหลด Extentios ติดตั้งแล้วไปใช้งานกันได้ง่าย ๆ เลย 

หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะ หากมีอะไรผิดพลาดก็ขออภัยมา ณ ที่นี้ด้วยนะคะ ❤️