แนวทางปฏิบัติที่ดีที่สุดในการเขียนโปรแกรม JavaScript

บทความนี้อธิบายแนวทางปฏิบัติที่ดีที่สุดในการเขียนโปรแกรม JavaScript

เราจะแนะนำแนวทางปฏิบัติที่ดีที่สุดที่สำคัญใน JavaScript พร้อมด้วยตัวอย่างโค้ดที่เป็นรูปธรรม

YouTube Video

แนวทางปฏิบัติที่ดีที่สุดในการเขียนโปรแกรม JavaScript

ในการเขียนโปรแกรม สิ่งสำคัญไม่ใช่แค่เขียน “โค้ดที่ทำงานได้” เท่านั้น แต่ต้องเขียนโค้ดที่มีความ ดูแลง่าย มีประสิทธิภาพ และเชื่อถือได้ ด้วยการปฏิบัติตาม “แนวทางปฏิบัติที่ดี (best practices)” โค้ดของคุณจะเข้าใจได้ง่ายขึ้นสำหรับนักพัฒนาคนอื่น ดูแลและต่อยอดได้ง่ายขึ้น และท้ายที่สุดทำให้บั๊กน้อยลงและประสิทธิภาพดีขึ้น

มาดูแนวทางปฏิบัติที่สำคัญใน JavaScript พร้อมตัวอย่างโค้ด

ใช้ชื่อของตัวแปรและฟังก์ชันที่ชัดเจนและอธิบายได้

ทำให้ผู้อ่านเข้าใจความหมายของตัวแปรหรือฟังก์ชันได้จากการอ่านโค้ดเพียงอย่างเดียว ควรใช้ชื่อที่สื่อความหมายมากกว่าชื่อที่ย่อหรือคำย่อ

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2let x = 10;
3function fn() {
4    // ...
5}

• ชื่ออย่าง x หรือ fn ทำให้เจตนาของโค้ดไม่ชัดเจน

ตัวอย่างที่ดี

1/* Good Example */
2let totalItems = 10;
3function calculateDiscount(price) {
4    // ...
5}

• การใช้ชื่อที่สื่อความหมาย เช่น totalItems หรือ calculateDiscount ช่วยให้ผู้อ่านเข้าใจโค้ดได้

ใช้ const / let และหลีกเลี่ยง var

เนื่องจาก var มีแนวโน้มเกิดปัญหาเรื่องขอบเขต (scope) และการประกาศซ้ำ จึงแนะนำให้ ใช้ const หรือ let เสมอ

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2var count = 5;

• var มีขอบเขตระดับฟังก์ชัน และอาจทำให้เกิดการประกาศซ้ำหรือการยกตัวแปร (hoisting) โดยไม่ตั้งใจ

ตัวอย่างที่ดี

1/* Good Example */
2let count = 5; // Reassignable
3const MAX_COUNT = 10; // Not reassignable

• let และ const มีขอบเขตระดับบล็อก จึงปลอดภัยกว่า นำไปสู่โค้ดที่คาดเดาได้และมีเสถียรภาพมากขึ้น

ใช้ความคิดเห็น (Comments) อย่างเหมาะสม

{^ i18n_speak 単にコードの動作をそのまま繰り返すコメントではなく、コードの「目的」や「理由」を説明するためにコメントを使います。^}

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2let a = 100; // assign 100 to a

ตัวอย่างที่ดี

1/* Good Example */
2// Initialize the maximum value to 100
3let maxItems = 100;

• ควรเขียนคอมเมนต์อธิบายว่าทำไมจึงทำ มากกว่าบอกว่ากำลังทำอะไร สิ่งนี้มีประโยชน์อย่างยิ่งในส่วนที่ลอจิกซับซ้อน

ปฏิบัติตามหลักการ DRY (Don't Repeat Yourself)

แทนที่จะทำลอจิกเดิมซ้ำๆ ให้แยกออกมาเป็นฟังก์ชันหรือคลาส การลดความซ้ำซ้อนช่วยให้ดูแลง่ายขึ้นและช่วยป้องกันบั๊ก

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2let totalPrice = price * quantity;
3let discountedPrice = (price * 0.9) * quantity;

ตัวอย่างที่ดี

1/* Good Example */
2function calculatePrice(price, quantity, discount = 0) {
3    return (price * (1 - discount)) * quantity;
4}
5
6let totalPrice = calculatePrice(price, quantity);
7let discountedPrice = calculatePrice(price, quantity, 0.1);

• เมื่อรวบรวมลอจิกที่ซ้ำกันไว้ในฟังก์ชัน ก็สามารถเปลี่ยนแปลงและแก้ไขได้จากจุดเดียว สิ่งนี้สำคัญเป็นพิเศษในงานพัฒนาระบบขนาดใหญ่

ทำให้ฟังก์ชันมีความรับผิดชอบเดียวและลดผลข้างเคียงให้เหลือน้อยที่สุด

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

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2let total = 0;
3function addItem(price) {
4    total += price; // modifies external state
5    console.log('Item added');
6}

ตัวอย่างที่ดี

1/* Good Example */
2function calculateTotal(items) {
3    return items.reduce((sum, item) => sum + item.price, 0);
4}

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

จัดการข้อผิดพลาด

ทำให้แน่ใจว่าแอปจะไม่ล่มเมื่อเจออินพุตที่ไม่คาดคิดหรือข้อยกเว้น ใช้ไวยากรณ์ try...catch เพื่อจัดการข้อผิดพลาดอย่างเหมาะสม

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2let data = JSON.parse(inputData);

ตัวอย่างที่ดี

1/* Good Example */
2try {
3    let data = JSON.parse(inputData);
4} catch (error) {
5    console.error('Failed to parse JSON:', error);
6}

• เนื่องจาก JSON.parse() อาจโยนข้อผิดพลาด จึงควรจัดการอย่างปลอดภัยด้วย try-catch การจัดการข้อผิดพลาดอย่างรอบคอบช่วยให้คุณสร้างแอปที่แข็งแรงทนทาน

สร้างบันทึกล็อกที่มีโครงสร้าง

ส่งออกล็อกในรูปแบบที่สม่ำเสมอเพื่อให้ติดตามพฤติกรรมของระบบได้ง่ายขึ้น การใช้ล็อกในรูปแบบ JSON ทำให้ง่ายต่อการใช้งานร่วมกับเครื่องมือวิเคราะห์และมอนิเตอร์

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2console.log('Error occurred!');

ตัวอย่างที่ดี

1/* Good Example */
2console.log(JSON.stringify({
3    level: 'error',
4    message: 'Database connection failed',
5    timestamp: new Date().toISOString()
6}));

• ล็อกแบบสตริงธรรมดาอาจทำให้ข้อมูลสูญหาย; ล็อกที่มีโครงสร้างทำให้ การวิเคราะห์ล็อก การแสดงภาพ และการมอนิเตอร์ ง่ายขึ้น สิ่งนี้มีประสิทธิผลมากเป็นพิเศษใน JavaScript ฝั่งเซิร์ฟเวอร์ (Node.js)

เพิ่มความสามารถในการอ่านโค้ด

โค้ดถูกอ่านโดยผู้อื่น (หรือโดยตัวคุณเองในอนาคต) ใช้การย่อหน้า การขึ้นบรรทัดใหม่ และการเว้นวรรคอย่างเหมาะสมเพื่อให้โค้ดอ่านง่าย

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2if(a===b){doSomething();}

ตัวอย่างที่ดี

1/* Good Example */
2if (a === b) {
3    doSomething();
4}

• โค้ดที่จัดรูปแบบดีและอ่านง่ายทำให้เข้าใจได้เร็วขึ้นและช่วยให้จับบั๊กได้ง่ายขึ้น อย่ายัดทุกสิ่งไว้ในบรรทัดเดียว; ทำให้โครงสร้างดูชัดเจนด้วยสายตา

คำนึงถึงความปลอดภัยเสมอ

เนื่องจาก JavaScript มักทำงานในสภาพแวดล้อมเว็บ การตระหนักเรื่องความปลอดภัยจึงเป็นสิ่งจำเป็น ตรวจสอบความถูกต้องของอินพุตผู้ใช้เสมอ ป้องกัน XSS และ CSRF และอัปเดต dependencies ให้ทันสมัยอยู่เสมอ

ตัวอย่างที่ไม่ดี

1/* Bad Example */
2// Directly inserting user input into HTML (vulnerable to XSS)
3element.innerHTML = userInput;

ตัวอย่างที่ดี

1/* Good Example */
2// Use textContent to prevent XSS attacks
3element.textContent = userInput;

• การนำอินพุตของผู้ใช้งานไปใช้โดยตรงอาจก่อให้เกิดช่องโหว่ เช่น การฝังสคริปต์ (script injection) ใช้ API ที่ปลอดภัย และทำให้เป็นนิสัยในการตรวจสอบและทำความสะอาด (sanitize) ข้อมูลเสมอ

การทดสอบโค้ด

การเพิ่มการทดสอบอัตโนมัติช่วยให้ตรวจจับและป้องกันบั๊กได้ง่ายขึ้น ใน JavaScript มักใช้เฟรมเวิร์กสำหรับทดสอบอย่าง Jest และ Mocha

ตัวอย่าง

1// Simple test using Jest
2function sum(a, b) {
3    return a + b;
4}
5
6test('adds 1 + 2 to equal 3', () => {
7    expect(sum(1, 2)).toBe(3);
8});

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

บทสรุป

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

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video