9 ปัญหาสุดฮาในการเขียนโปรแกรมด้วยภาษา Javascript ที่นักพัฒนามักพบ

มีหลายปัญหาที่นักพัฒนา Javascript มักจะพบเจอ ซึ่งบางครั้งก็ดูเหมือนจะเป็นเรื่องตลกเพราะเกิดขึ้นบ่อยหรือมาจากข้อผิดพลาดเล็ก ๆ น้อย ๆ ที่คิดไม่ถึง ตัวอย่างเช่น

1. การลืมใส่ var, let, หรือ const

   x = 10;

   เมื่อลืมประกาศตัวแปรด้วย var, let, หรือ const ตัวแปรนี้จะกลายเป็นตัวแปร global โดยอัตโนมัติ ซึ่งอาจสร้างปัญหาที่ไม่คาดคิดได้

2. ผลลัพธ์ของ typeof NaN

   console.log(typeof NaN); // "number"

   แม้ว่า NaN (Not a Number) จะหมายถึงไม่ใช่ตัวเลข แต่ typeof NaN กลับคืนค่าเป็น "number" ซึ่งสร้างความสับสนให้กับนักพัฒนามากมาย

3. การใช้ == แทน ===

   console.log(0 == false); // true
   	console.log(0 === false); // false

   การใช้ == อาจทำให้เกิดการเปรียบเทียบที่ไม่คาดคิดเนื่องจากการเปลี่ยนชนิดข้อมูลอัตโนมัติ การใช้ === จะแก้ปัญหานี้ได้เพราะมันจะไม่เปลี่ยนชนิดข้อมูลก่อนเปรียบเทียบ

4. การลืมใส่ break ใน switch

   switch(day) {
   	    case 1:
   	        console.log("Monday");
   	    case 2:
   	        console.log("Tuesday");
   	}

   เมื่อลืมใส่ break หลังจาก case จะทำให้โปรแกรมรันผ่านทุกกรณีที่เหลือจนจบ ซึ่งอาจทำให้ได้ผลลัพธ์ที่ไม่ถูกต้อง

5. ฟังก์ชันที่ไม่มี return คืนค่า undefined

   function doSomething() {
   	    // no return statement
   	}
   	console.log(doSomething()); // undefined

   หากลืมใส่ return ในฟังก์ชัน จะทำให้ฟังก์ชันนั้นคืนค่า undefined ซึ่งอาจทำให้นักพัฒนาเกิดความสับสน

6. การลืมว่า this มีค่าเปลี่ยนแปลง

   const obj = {
   	    name: "John",
   	    sayHello: function() {
   	        setTimeout(function() {
   	            console.log(this.name);
   	        }, 1000);
   	    }
   	};
   	obj.sayHello(); // undefined

   ในตัวอย่างนี้ this ภายในฟังก์ชันที่ถูกส่งให้ setTimeout จะไม่ใช่ obj อีกต่อไป ซึ่งอาจทำให้การเข้าถึงคุณสมบัติของ obj ไม่เป็นไปตามที่คาดหวัง

7. การเข้าถึง array ที่ไม่มีค่าด้วย undefined

   const arr = [1, 2, 3];
   	console.log(arr[5]); // undefined

   เมื่อพยายามเข้าถึงสมาชิกของ array ที่ไม่มีค่า จะได้ค่า undefined แทนที่จะเป็นข้อผิดพลาด ซึ่งอาจทำให้เกิดความสับสนในการตรวจสอบข้อผิดพลาด

8. การลืมใส่ await ในการเรียกใช้งานฟังก์ชันแบบ asynchronous

   async function fetchData() {
   	    const result = someAsyncFunction();
   	    console.log(result); // Promise {<pending>}
   	}

   การลืมใส่ await จะทำให้ได้ค่า Promise กลับมาแทนที่จะเป็นผลลัพธ์ที่ต้องการจากฟังก์ชันนั้น

9. การลืมใส่ ; ท้ายคำสั่ง

   let a = 5
   	let b = 10
   	let c = a + b
   	console.log(c) // 15

   ถึงแม้ว่า JavaScript จะมีการเพิ่มเครื่องหมาย ; ให้โดยอัตโนมัติในหลาย ๆ กรณี (Automatic Semicolon Insertion หรือ ASI) แต่การลืมใส่ ; เองบางครั้งอาจทำให้เกิดพฤติกรรมที่ไม่คาดคิดได้ โดยเฉพาะเมื่อเชื่อมหลายคำสั่งในบรรทัดเดียวหรือใช้รูปแบบที่ ASI ไม่จัดการได้ดี

ปัญหาเหล่านี้เกิดขึ้นบ่อยครั้ง แต่หลายครั้งก็เป็นเรื่องตลกเมื่อมองย้อนกลับไป เพราะส่วนใหญ่เกิดจากการละเลยหรือความเข้าใจผิดเล็ก ๆ น้อย ๆ ของนักพัฒนาเอง