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 ไม่จัดการได้ดี

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