การตรวจสอบประเภทข้อมูล ในภาษา JavaScript

20 August 2020

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับการตรวจสอบประเภทข้อมูลในภาษา JavaScript โดยการใช้ตัวดำเนินการ typeof สำหรับตรวจสอบประเภทข้อมูลในตัวแปรหรือ Literal และตัวดำเนินการ instanceof สำหรับตรวจสอบประเภทของออบเจ็คว่าสร้างมาจากคลาสที่กำหนดหรือไม่ นี่เป็นเนื้อหาในบทนี้

  • การใช้งานตัวดำเนินการ typeof
  • การใช้งานตัวดำเนินการ instanceof

การใช้งานตัวดำเนินการ typeof

ตัวดำเนินการ typeof ใช้ตรวจสอบประเภทข้อมูลของ Literal ตัวแปร หรือออบเจ็ค มันส่งค่ากลับเป็น String อธิบายข้อมูลประเภทนั้นๆ ยกตัวอย่างเช่น "number" สำหรับข้อมูลที่เป็นตัวเลข "string" สำหรับข้อมูลที่เป็นข้อความ หรือ "object" สำหรับออบเจ็คทุกประเภท นี่เป็นตัวอย่าง

type_checking.js
console.log(typeof 1);      // number
console.log(typeof "1");    // string
console.log(typeof "hello");// string
console.log(typeof true);   // boolean
console.log(typeof { id: 1, name: "Metin" });   // object
console.log(typeof function () { });    // function

ในตัวอย่าง ผลลัพธ์การทำงานของตัวดำเนินการนั้นส่งค่ากลับเป็นชื่อของประเภทข้อมูลในตัวพิมพ์เล็ก และสังเกตว่าประเภทข้อมูลของ 1 และ "1" นั้นเป็นคนละอย่างกัน เนื่องจากค่าแรกเป็นตัวเลขและค่าที่สองเป็น String

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

let n = "24px";
if (typeof n === "number") {
    console.log("This is a real number");
    console.log("So we can process it");
} else {
    console.log("This is not number");
}
// Result: This is not number

เนื่องจากภาษา JavaScript นั้นเป็นภาษาแบบ Dynamic typing ตัวแปรสามารถเก็บข้อมูลได้ทุกประเภท ดังนั้นเพื่อตรวจสอบว่าค่าในตัวแปรเป็น Literal ของตัวเลขจริงๆ เราจึงต้องใช้ตัวดำเนินการ typeof นั่นเอง

การใช้งานตัวดำเนินการ instanceof

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

object_checking.js
console.log(new Date() instanceof Date);    // true

class User { }
let user = new User()
console.log(user instanceof User);   // true
console.log(user instanceof Error);   // false

ในตัวอย่าง เป็นการใช้งานตัวดำเนินการ instanceof เพื่อตรวจสอบว่าออบเจ็คต่างๆ นั้นเป็นออบเจ็คจากคลาส Date, User และ Error หรือไม่ ผลลัพธ์ของตัวดำเนินการส่งค่ากลับเป็น Boolean

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

animal_moving.js
class Dog {
    run () {
        console.log("Dog is running");
    }
}

class Bird {
    fly () {
        console.log("Bird is flying");
    }
}

class Fish {
    swim () {
        console.log("Fish is swiming");
    }
}

let animals = [new Dog(), new Bird(), new Fish()];

for (let animal of animals) {
    if (animal instanceof Dog) {
        animal.run();
    } else if (animal instanceof Bird) {
        animal.fly();
    }  else if (animal instanceof Fish) {
        animal.swim();
    } else {
        console.log("Unknown animal type");
    }
}

ในตัวอย่าง เราได้สร้างคลาสมาสามคลาสคือ Dog, Bird และ Fish สำหรับสัตว์สามประเภท ได้แก่ หมา นก และปลา ตามลำดับ ซึ่งในแต่ละคลาสนั้นมีเมธอดสำหรับการเคลื่อนที่ โดยที่ชื่อของเมธอดแตกต่างกันไปละแต่คลาส เราทำเช่นนี้ก็เพื่อเป็นตัวอย่างสำหรับการใช้งานตัวดำเนินการ instanceof

let animals = [new Dog(), new Bird(), new Fish()];

for (let animal of animals) {
...

จากนั้นเราสร้างออบเจ็คของสัตว์แต่ละประเภท และเก็บไว้ในตัวแปรอาเรย์ animals แล้วใช้คำสั่ง for of วนค่าในอาเรย์เพื่อเอาแต่ละออบเจ็คมาใช้งาน ตอนนี้ค่าในตัวแปร animal สามารถเป็นออบเจ็คได้หลายประเภท

if (animal instanceof Dog) {
    animal.run();
} else if (animal instanceof Bird) {
    animal.fly();
}  else if (animal instanceof Fish) {
    animal.swim();
} else {
    console.log("Unknown animal type");
}

ในการเรียกใช้งานเมธอดสำหรับการเคลื่อนที่นั้น เราจำเป็นต้องตรวจสอบประเภทของออบเจ็คด้วยตัวดำเนินการ instanceof ก่อน จากนั้นเรียกใช้เมธอดตามประเภทของคลาสที่ออบเจ็คเหล่านั้นถูกสร้างขึ้นมา

อย่างไรก็ตาม ถึงแม้ในตัวอย่างนี้เราสามารถใช้ชื่อเมธอดของทั้งสามคลาสเป็น move ได้ แต่เพื่อที่จะแสดงตัวอย่างการใช้งานตัวดำเนินการ instanceof เราจึงต้องใช้ชื่อเมธอดที่แตกต่างกันเพื่อที่จะเรียกใช้งานตามประเภทของคลาส

นอกจากนี้ การใช้งานตัวดำเนินการ instanceof ยังถูกใช้บ่อยๆ ในการตรวจสอบข้อผิดพลาดด้วยคำสั่ง try catch เพื่อจัดการกับข้อผิดพลาดที่เกิดขึ้นตามประเภทของคลาสของมัน นี่เป็นตัวอย่าง

error_handling.js
try {

    // Statements that may cause different type of errors

} catch (error) {
    if (error instanceof TypeError) {
        console.log("Type error occurred");
    } else if (error instanceof ReferenceError) {
        console.log("Reference error occurred");
    } else if (error instanceof SyntaxError) {
        console.log("Syntax error occurred");
    } else {
        console.log("Unknown error");
        throw error;
    }
}

ในตัวอย่าง เป็นการใช้งานคำสั่ง try catch เพื่อตรวจจับข้อผิดพลาดที่เกิดขึ้นในการทำงานของโปรแกรม ซึ่งข้อผิดพลาดในภาษา JavaScript นั้นเป็นออบเจ็คจากคลาสต่างๆ เมื่อเกิดข้อผิดพลาดขึ้นภายในบล็อคของคำสั่ง try โปรแกรมหยุดการทำงานและข้ามมาทำงานในบล็อคของคำสั่ง catch ในทันทีพร้อมส่งออบเจ็คของข้อผิดพลาดมาผ่านทาง error

if (error instanceof TypeError) {
    console.log("Type error occurred");
} else if (error instanceof ReferenceError) {
    console.log("Reference error occurred");
} else if (error instanceof SyntaxError) {
    console.log("Syntax error occurred");
} else {
    console.log("Unknown error");
    throw error;
}

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

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

บทความนี้เป็นประโยชน์หรือไม่?Yes·No