JavaScript TypeError

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

แต่ประเภทคืออะไร? ตามเวอร์ชันล่าสุดของข้อกำหนด JavaScript ECMAScript มีข้อมูลและประเภทโครงสร้างเก้าประเภท หกรายการ (บางครั้งเจ็ดถ้าเรานับค่าว่าง) เป็นประเภทข้อมูลดั้งเดิม ประเภทข้อมูลที่เป็นสตริง ตัวเลข bigint บูลีน ไม่ได้กำหนด และสัญลักษณ์ ก่อนที่เราจะเข้าใจว่าเหตุใด TypeErrors จึงทริกเกอร์ระหว่างการดำเนินการ เรามาทบทวนเก้าประเภทของเราใน JavaScript กันก่อน หากเราเคยอยู่ในตำแหน่งที่เราไม่แน่ใจว่าจะจัดประเภทประเภทใด เราก็สามารถใช้ตัวดำเนินการประเภทได้

undefined:ประเภทของค่าที่กำหนดโดยอัตโนมัติให้กับตัวแปรที่เพิ่งประกาศ เรามักจะได้รับค่า typeerror ของ undefined เมื่อเราลืมกำหนดหรือเพิ่มค่าให้กับตัวแปรของเรา
บูลีน:ชนิดข้อมูลตรรกะที่มีเฉพาะค่าจริงหรือเท็จ
ตัวเลข:ชนิดข้อมูลที่เป็นตัวเลข
สตริง:ลำดับของอักขระภายใน backticks, sing หรือ double quotes
BigInt:ชนิดข้อมูลที่เป็นตัวเลขบางครั้งเรียกว่า bignums ในภาษาโปรแกรมอื่นๆ
สัญลักษณ์:ค่าที่แสดงถึงตัวระบุที่ไม่ซ้ำกันซึ่งสร้างขึ้นโดยการเรียกใช้ฟังก์ชัน Symbol
วัตถุ:ประเภทโครงสร้างและเกือบทุกอย่างที่คีย์เวิร์ด "ใหม่" สามารถสร้างได้ เช่น อาร์เรย์ วัตถุ แผนที่ ชุด ฯลฯ
ฟังก์ชัน:โครงสร้างอื่นที่ไม่ใช่ข้อมูลซึ่งเป็นข้อมูลโค้ดที่โค้ดอื่นๆ อาจเรียกได้
null:โดยปกติแล้วจะเป็นค่าโดยเจตนาที่แสดงถึงอ็อบเจ็กต์หรือที่อยู่ที่ไม่มีอยู่จริง

ข้อผิดพลาด TypeErrors ที่พบบ่อยที่สุดของ JavaScript และวิธีแก้ไข

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

การเปลี่ยนแปลงค่าที่ไม่สามารถเปลี่ยนแปลงได้

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

const a = 5
a = "5"
// Uncaught TypeError: Assignment to constant variable.

เราสามารถแก้ไขได้โดยเพียงแค่เปลี่ยนชื่อของตัวระบุที่เราต้องการระบุสตริงของ "5"

const a = 5
const b = "5"

การใช้ค่าในทางที่ไม่เหมาะสม

นักพัฒนายังต้องตรวจสอบให้แน่ใจว่ามีการใช้ค่าตามที่ตั้งใจไว้ ในตัวอย่างด้านล่าง “Cat” และ “garfield” จะย้อนกลับเมื่อพยายามตรวจสอบว่า garfield เป็นอินสแตนซ์ของฟังก์ชัน Cat() หรือไม่

function Cat() {}
function Dog() {}
 
let garfield = new Cat()
 
Cat instanceof garfield
 
// Uncaught TypeError: Right-hand side of 'instanceof' is not callable

เราสามารถแก้ไขได้โดยแก้ไขลำดับของทั้งสอง

function Cat() {}
function Dog() {}
 
let garfield = new Cat()
 
garfield instanceof Cat

อาร์กิวเมนต์ที่เข้ากันไม่ได้กับประเภทที่ฟังก์ชันคาดหวัง

เมื่อเขียนโค้ดการดำเนินการ นักพัฒนาต้องตรวจสอบให้แน่ใจว่าพวกเขากำลังใช้ค่าในลักษณะที่พวกเขาจะได้รับผลลัพธ์ที่ต้องการ ค่าของ null สามารถใช้โดยเจตนาเพื่อแสดงว่าไม่มีวัตถุ แต่วิธีการใช้ด้านล่างจะส่งผลให้เกิด TypeError เนื่องจากถูกใช้เป็นอาร์กิวเมนต์ที่ไม่เข้ากันกับประเภทที่ฟังก์ชันคาดหวัง

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

 function readingErrorsAreImportant(a){
    if(a.length === 5){
      return "equals five"
    } else if(a.length > 5) {
      return "Greater than five"
    }  else {
      return "Less than five"
    }
   }
   console.log(readingErrorsAreImportant(null))
 
   // Uncaught TypeError: Cannot read property 'length' of null

เราสามารถแก้ไขได้โดยส่งผ่านประเภทค่าที่คาดหวัง เช่นเดียวกับประเภทค่าตัวเลข

function readingErrorsAreImportant(a){
    if(a.length === 5){
      return "equals five"
    } else if(a.length > 5) {
      return "Greater than five"
    }  else {
      return "Less than five"
    }
   }
   console.log(readingErrorsAreImportant(10))

บทสรุป

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