ประเภทข้อมูล ในภาษา JavaScript

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

• ประเภทข้อมูลคืออะไร
• Number
• String
• Boolean
• BigInt
• Symbol
• Undefined
• Null
• การตรวจสอบประเภทข้อมูล typeof
• Wrapper objects

ประเภทข้อมูลคืออะไร

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

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

ในภาษา JavaScript มีประเภทข้อมูลพื้นฐาน (Primitive data type) อยู่ 6 ประเภท ซึ่งสามารถสรุปได้ดังตารางด้านล่างนี้

Number

Number (ตัวเลข) คือประเภทข้อมูลสำหรับเก็บค่าที่เป็นตัวเลข ที่สามารถนำไปใช้ในการคำนวณได้ด้วยตัวดำเนินการทางคณิตศาสตร์ ในภาษา JavaScript นั้นไม่มีการแบ่งแยกว่าตัวเลขเป็นจำนวนเต็ม (Integer) หรือทศนิยม (Floating-point number) ตัวเลขทุกประเภทนั้นเป็นข้อมูลจากคลาส Number ซึ่งมีเมธอดที่เราสามารถใช้จัดการกับตัวเลขได้

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

let n = 3;
let year = 2020;
let money = 8.9;
let temperature = -20;

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

let apple = 3;
let orange = 5;
let total = apple + orange;

let price = 0.49; // price per fruit
let totalPrice = total * price;

console.log("I have " + apple + " apples.");
console.log("You have " + orange + " oranges.");
console.log("We have " + total + " fruits.");
console.log("We have bought it for $" + totalPrice + " USD");

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

I have 3 apples.
You have 5 oranges.
We have 8 fruits.
We have bought it for $3.92 USD.

ในตัวอย่างนี้ เราได้เก็บจำนวนผลไม้ไว้ในตัวแปร apple และ orange จากนั้นหาผลรวมของผลไม้ทั้งหมดที่มีเก็บไว้ในตัวแปร total และคำนวณหาราคาทั้งหมดที่ซื้อมา และแสดงข้อมูลทั้งหมดออกทางหน้าจอ

เมื่อเรามีตัวเลขที่มีขนาดใหญ่หรือเล็กมากที่ต้องการจะเก็บ เราสามารถเขียนมันในรูปแบบสัญกรณ์วิทยาศาสตร์ได้ ยกตัวอย่างเช่น

let smallNumber = 1.25e-3;     // 0.00125
let largeNumber = 1e6;      // 1000000

console.log(smallNumber);
console.log(largeNumber);

let electricCharge = -1.602176634e-19;
let earthMass = 5.972e24;

console.log("1 eV = " + electricCharge + " Joule");
console.log("Earth mass is " + earthMass + " Kilograms");

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

0.00125
1000000
1 eV = -1.602176634e-19 Joule
Earth mass is 5.972e+24 Kilograms

ในตัวอย่าง เป็นการกำหนดค่าตัวเลขในรูปแบบสัญกรณ์วิทยาศาสตร์ในภาษา JavaScript โดย 1.25e-3 นั้นหมายถึง 1.25 × 10 ^-3 และ 1e6 จะหมายถึง 1 × 10 ⁶ ซึ่งนี่จะทำให้เราสามารถเขียนตัวเลขในแบบที่สั้นลงได้

ในภาษา JavaScript เราสามารถกำหนดตัวเลขในรูปแบบของเลขฐานอื่นๆ ได้ ในตัวอย่างนี้ เป็นการกำหนดตัวเลขโดยใช้รูปแบบ Literal ของเลขฐานสอง ฐานแปด และฐานสิบหก โดยที่ทั้งหมดนั้นมีค่าเท่ากับ 30 (ในเลขฐานสิบ)

// All values equal to 30 in decimal (base 10)
let bin = 0b11110;
let oct = 036;
let hex = 0x1e;
let dec = 30;

console.log('bin', bin);
console.log('oct', oct);
console.log('hex', hex);
console.log('dec', dec);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

bin 30
oct 30
hex 30
dec 30

ในตัวอย่าง เราได้กำหนดตัวเลขที่มีค่าเท่ากับ 30 ในรูปแบบของเลขฐานต่างๆ เมื่อกำหนดตัวเลขในรูปแบบของเลขฐานสองเราใช้ 0b นำหน้าตัวเลข; 0 สำหรับเลขฐานแปด และ 0x สำหรับเลขฐานสิบหก อย่างไรก็ตาม ในการแสดงผลนั้นตัวเลขจะถูกแสดงออกมาในฐานสิบเสมอ

การกำหนดตัวเลขในรูปแบบนี้อาจไม่ค่อยได้ใช้บ่อยมากนัก แต่มันมีประโยชน์ในกรณีที่เราต้องการเก็บค่าบางอย่างที่แสดงในรูปแบบของเลขฐานเหล่านี้ได้ เช่น ค่าของสี โดยการใช้เลขฐาน 16 หรือค่า Permission ของระบบไฟล์โดยใช้ตัวเลขฐานแปด

let color = 0x55acee;   // Blue color
let permission = 0755;  // -rwxr-xr-x

String

String (ข้อความ) คือประเภทข้อมูลที่เก็บข้อมูลเป็นชุดลำดับของตัวอักษรที่มีการเข้ารหัสเป็นแบบ Unicode นั่นเป็นหมายว่า String ในภาษา JavaScript แทบจะสนับสนุนทุกตัวอักษรของภาษาต่างๆ ทั่วโลก String นั้นเป็นข้อมูลจากคลาส String ซึ่งมีเมธอดที่เราสามารถใช้เพื่อจัดการกับมันได้ ซึ่งคุณจะได้เรียนรู้อีกครั้งในบท String

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

let str1 = "This is double quote string";
let str2 = 'This is single quote string';

ในตัวอย่าง เราสามารถสร้าง String ได้จาก String literal ซึ่งค่าของมันจะต้องล้อมรอบด้วยเครื่องหมาย Double quote หรือเครื่องหมาย Single quote ด้วยเสมอ

ทั้งสองแบบนั้นให้ผลลัพธ์เหมือนกัน ยกเว้นใน String ที่เป็นแบบ Double quote เราต้องทำการ Escape \" เพื่อแสดงตัวอักษร Double quote และใน String ที่เป็นแบบ Single quote เราต้องทำการ Escape \' เพื่อแสดงตัวอักษร Single quote ยกตัวอย่างเช่น

let double = "This is \"double quote\" string";
let single = 'This is \'single quote\' string';

สำหรับตัวอักษรอื่นๆ เราสามารถกำหนดลงใน String ได้เหมือนกับที่มันเป็น ยกเว้น Escape characters ซึ่งเป็นรหัสสำหรับแสดงตัวอักษรพิเศษบางตัวที่ไม่สามารถเขียนลงใน String ได้โดยตรง

นอกจากนี้เรายังสามารถประกาศ String ในรูปแบบของ Template string ได้ โดยการล้อมรอบ String ด้วยเครื่อหมาย Back-trick (`) นี่เป็นตัวอย่าง

let a = 2;
let b = 3;
let templateString = `The result of ${a} + ${b} is ${a + b}`;

let multilineString = `First line
Second line
And third line
`;

console.log(templateString);
console.log(multilineString);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

The result of 2 + 3 is 5
First line
Second line
And third line

การใช้งาน Template string จะทำให้เราสามารถแทรก Expression เข้าไปยัง String ได้ในรูปแบบ ${expression} โดยที่ Expression นั้นสามารถเป็น Literal ตัวแปร หรือการเรียกใช้ฟังก์ชัน ซึ่งมันจะถูกแปลงเป็น String และรวมเข้าด้วยกัน

อีกคุณสมบัติหนึ่งเกี่ยวกับ Template string ก็คือเราสามารถกำหนดค่า String ด้วยการขึ้นบรรทัดใหม่ได้โดยที่ไม่ต้องใช้ \n นั่นเป็นเพราะว่าสำหรับ Template string นั้นทุกอย่างที่อยู่ภายใน ` ได้กลายมาเป็นค่าของ String เหมือนกับที่เราเห็นมัน ยกเว้น ${expression} ที่จะถูกแทนที่ด้วยค่าที่กำหนด

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

let siteName = "marcuscode";

console.log(siteName);
console.log(siteName.length);
console.log(siteName.toUpperCase());

console.log("siteName[0]: " + siteName[0]);
console.log("siteName[1]: " + siteName[1]);

for (let ch of siteName) {
    console.log(ch);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

marcuscode
10
MARCUSCODE
siteName[0]: m
siteName[1]: a
m
a
r
c
u
s
...

ในตัวอย่าง เป็นการอธิบายคุณสมบัติพื้นฐานของ String; ในภาษา JavaScript นั้นข้อมูลประเภท String จะเก็บเป็นลำดับของตัวอักษรคล้ายกับอาเรย์ ดังนั้นเราสามารถเข้าถึงตัวอักษรที่ตำแหน่งต่างๆ จาก Index ของมันได้ และเราสามารถวนรอบตัวอักษรภายใน String ด้วยคำสั่ง for of ได้

นอกจากนี้ String ยังมี Property และเมธอดเป็นจำนวนมาก เราสามารถดูความของ String ได้จาก Property length และแปลง String เป็นตัวพิมพ์ใหญ่ได้ด้วยเมธอด toUpperCase

เนื่องจาก String นั้นเป็นประเภทข้อมูลที่สำคัญและมีเนื้อหาที่ค่อนข้างมาก คุณจะได้เรียนรู้เกี่ยวกับ String อีกครั้งในบทของ String

Boolean

Boolean คือเป็นประเภทข้อมูลที่ใช้สำหรับเก็บค่าความจริงที่มีค่าอยู่เพียงสองค่าคือ true และ false คุณสามารถใช้สองค่านี้เพื่อบ่งบอกความหมายของสิ่งต่างๆ ที่สามารถมีได้เพียงสองสถานะ ยกตัวอย่างเช่น กลางวัน / กลางคืน, ใช่ / ไม่ใช่, สำเร็จ / ล้มเหลว, หญิงหรือชาย เป็นต้น และ Boolean นั้นเป็นประเภทข้อมูลจากคลาส Boolean นี่เป็นตัวอย่างการใช้งาน Boolean ในภาษา JavaScript

let lightOn = true;
console.log("Is the light on: " + lightOn);

lightOn = false;
console.log("Is the light still on: " + lightOn);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Is the light on: true
Is the light still on: false

ในตัวอย่าง เราได้ประกาศตัวแปร lightOn สำหรับเก็บค่า Boolean เพื่อเก็บสถานะว่าไฟเปิดอยู่หรือไม่ ในตอนแรกเรากำหนดค่าให้กับตัวแปรเป็น true ซึ่งหมายถึงไฟเปิดอยู่ หลังจากนั้นเปลี่ยนมันเป็น false ซึ่งหมายถึงไฟได้ถูกปิดลงแล้ว

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

let numbers = [1, 3, 4, 5, 8, 10, 15];

for (let n of numbers) {
    let isEven = n % 2 == 0;

    if (isEven) {
        console.log(n + " is even number");
    } else {
        console.log(n + " is odd number");
    }
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

1 is odd number
3 is odd number
4 is even number
5 is odd number
8 is even number
10 is even number
15 is odd number

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

let isEven = n % 2 == 0;

ในคำสั่งนี้เป็นการหาว่าตัวเลขเป็นจำนวนคู่หรือไม่ โดยการหาเศษจากการหารตัวเลขด้วย 2 ถ้าหากได้เศษเป็น 0 แสดงว่าการหารลงตัวและตัวเลขเป็นจำนวนคู่ ดังนั้นเราทำการเปรียบเทียบผลการหารกับ 0 ด้วยตัวดำเนินการเปรียบเทียบ == ซึ่งผลลัพธ์ที่ได้จะเป็น true หากตัวเลขเป็นจำนวนคู่ และ false หากไม่ใช่

if (isEven) {
    console.log(n + " is even number");
} else {
    console.log(n + " is odd number");
}

จากนั้นเราใช้คำสั่ง if เพื่อตรวจสอบค่าของ Boolean ถ้าหากเป็นจริงโปรแกรมจะทำงานในบล็อคของคำสั่ง if และบอกว่าตัวเลขเป็นจำนวนคู่ และถ้าไม่ใช่จะทำในบล็อคของคำสั่ง else และบอกว่าตัวเลขเป็นจำนวนคี่

นอกจากนี้ เรายังสามารถกลับค่าของ Boolean จาก true และเป็น false และในทางกลับกันได้โดยการใช้ตัวดำเนินการตรรกศาสตร์ Not (!) ยกตัวอย่างเช่น

let completed = false;
console.log("The mission is not complte yet.");
completed = !completed; // false -> true
console.log("The mission is now completed.");

นี่เป็นการแนะนำการใช้งาน Boolean เบื้องต้นเท่านั้น เราจะพูดถึง Boolean อีกครั้งในบทของตัวดำเนินการที่ทำงานกับค่าของ Boolean

BigInt

BigInt คือประเภทข้อมูลที่แสดงถึงค่าของตัวเลขขนาดใหญ่ มันเป็นประเภทข้อมูลที่เพิ่งจะเพิ่มเข้ามาในภาษา JavaScript ในเวอร์ชัน ES11 (ECMAScript 2020) มันสามารถเก็บตัวเลขที่อยู่นอกเหนือขอบเขตที่ Number จะสามารถจัดการได้ นี่เป็นตัวอย่างการใช้งานข้อมูลประเภท BigInt ในภาษา JavaScript

let a = 10n;
let b = 100000000000000000n;    // Very large value
let c = BigInt("5234");         // From string
let d = BigInt(9007199254740991);
console.log(a, b, c, d);
// Result: 10n 100000000000000000n 5234n 9007199254740991n

ในตัวอย่าง เราสามารถสร้าง BigInt ได้หลายวิธี แบบแรกเป็นการใช้ BigInt Literal โดยการต่อท้ายตัวเลขด้วย n จากนั้นเป็นการใช้งานเมธอด BigInt ที่สามารถรับค่าเป็น String หรือตัวเลขก็ได้

ในการใช้งานตัวดำเนินการกับ BigInt นั้น เราจะไม่สามารถใช้มันร่วมกับข้อมูลประเภทอื่นได้ ยกตัวอย่างเช่น

console.log(10n + BigInt(20));  // Work
console.log(10n + 20);          // Error

ในบรรทัดแรกนั้นโปรแกรมทำงานได้เนื่องจากค่าทั้งสองเป็น BigInt ส่วนในบรรทัดที่สองจะเกิดข้อผิดพลาดขึ้น เนื่องจาก 20 นั้นเป็นข้อมูลประเภท Number ซึ่งเป็นคนละประเภทกัน

โดยทั่วไปแล้วค่าของตัวเลขจำนวนเต็มที่ปลอดภัยที่เราสามารถใช้งานได้ในภาษา JavaScript จะอยู่ระหว่าง -9007199254740991 ถึง 9007199254740991 นั่นหมายความว่า เมื่อเราต้องการใช้ตัวเลขที่มีค่ามากกว่าหรือน้อยกว่านี้ เราสามารถใช้ BigInt เพื่อเก็บค่าตัวเลขดังกล่าวได้

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

console.log(9007199254740992 === 9007199254740993); // true

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

ดังนั้นเพื่อทำให้ผลลัพธ์จากคำสั่งด้านบนถูกต้อง เราได้เปลี่ยนค่าของตัวเลขทั้งสองเป็น BigInt

console.log(9007199254740992n === 9007199254740993n);   // false

และอย่างที่คุณเห็น เราได้เปลี่ยนมาใช้ BigInt จะเห็นว่าผลลัพธ์การเปรียบเทียบถูกต้องแล้ว

แม้ว่าในปัจจุบันการใช้เพียงแค่ Number จะเพียงพอต่อการใช้งานทั่วไป แต่ในอนาคตเราอาจจะต้องการใช้ BigIn เพื่อทำงานบางอย่างที่ต้องการเก็บตัวเลขที่มีขนาดใหญ่มากๆ

Symbol

Symbol คือประเภทข้อมูลพื้นฐานในภาษา JavaScript เราเรียกค่าของข้อมูลประเภทนี้ว่าค่า Symbol หรือออบเจ็ค Symbol ซึ่งวัตถุประสงค์หลักในการใช้งานของมันก็เพื่อใช้เป็น Property ของออบเจ็ค การใช้ Symbol เป็น Property ของออบเจ็คนั้นจะทำให้เราสามารถซ่อน Property ในการเข้าถึงจากภายนอกได้ ยกตัวอย่างเช่น คำสั่ง for in หรือเมธอด Object.getOwnPropertyNames() จะไม่สามารถอ่านค่าได้

ในบทนี้ จะเป็นการแสดงตัวอย่างการใช้ Symbol พื้นฐานในภาษา JavaScript

let sym1 = Symbol();
let sym2 = Symbol("metin");
let sym3 = Symbol("metin");

console.log(sym1);
console.log(sym2);
console.log(sym2 === sym3);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Symbol()
Symbol(metin)
false

ในตัวอย่าง เป็นการสร้างออบเจ็ค Symbol ขึ้นมาสามออบเจ็คโดยการใช้ฟังก์ชัน Symbol ในการสร้างนั้นเราสามารถกำหนดคำอธิบายให้กับ Symbol ได้ด้วย String ที่ส่งเข้าในตอนสร้างในที่นี้คือ "metin"

ในภาษา JavaScript นั้นทุก Symbol ที่ถูกสร้างขึ้นจะเป็นคนละออบเจ็คกันเสมอ สังเกตว่าในตัวแปร sym2 และ sym3 ถึงแม้ว่าคำอธิบายของ Symbol จะเหมือนกัน แต่มันเป็น Symbol ที่แตกต่างกันหรือเป็นคนละออบเจ็คกัน เหมือนที่คุณเห็นในผลลัพธ์ของการเปรียบเทียบใน sym2 === sym3

นี่เป็นอีกตัวอย่างหนึ่งสำหรับการใช้ Symbol เป็น Property ของออบเจ็ค

let object = {
    a: 1,
    b: 2
};

let sym = Symbol("c");
object[sym] = 3;

for (let i in object) {
    console.log(i);
}

console.log(object[sym]);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

a
b
3

ในตัวอย่าง เป็นการใช้ Symbol สำหรับกำหนด Property ให้กับออบเจ็ค การทำเช่นนี้จะทำให้ Property ที่เป็น Symbol จะไม่สามารถถูกอ่านได้จากคำสั่ง for in นั่นทำให้เราสามารถซ่อน Property ดังกล่าวจากการคำสั่งวนซ้ำอย่าง for in, for of หรือ เมธอด Object.getOwnPropertyNames() ได้

console.log(object[sym]);

เพื่อเข้าถึงค่า Property ของ Symbol เราจะต้องเข้าถึงผ่าน Symbol ที่ใช้กำหนด Property เท่านั้น อีกวิธีหนึ่งสำหรับการรับเอา Symbol Property ทั้งหมดในออบเจ็คก็คือการใช้งานเมธอด Object.getOwnPropertySymbols() เมธอดนี้ส่งค่ากลับเป็นอาเรย์ของ Symbol

ในบทนี้เป็นการแนะนำการใช้งาน Symbol เบื้องต้นเท่านั้น ในความเป็นจริงแล้ว Symbol นั้นถูกใช้งานอย่างหลากหลายในภาษา JavaScript

นอกจากนี้ในภาษา JavaScript ยังมี Built-in Symbol ที่รู้จักกันดีคือ Symbol.iterator สำหรับกำหนดการทำงานเพื่อทำให้ออบเจ็คสามารถวนรอบได้ และ Symbol.search ใช้สำหรับส่งค่ากลับเป็น Index ของส่วนของ String ที่ตรงกับ Regular expression

Undefined

Undefined เป็นประเภทข้อมูลชนิดพิเศษที่มีค่าเพียงค่าเดียวคือ undefined มันมีความหมายหรือใช้สำหรับบอกว่ายังไม่ได้มีการกำหนดค่า หรือการไม่มีอยู่ของ Property บนออบเจ็ค Undefined นั้นเป็นประเภทข้อมูลพื้นฐานในภาษา JavaScript นี่เป็นตัวอย่างการใช้งาน

let name; // undefined is default value
console.log(name);

name = "Metin";
console.log(name);

// Explicitly make it undefined
let language = undefined;
console.log("language is " + language);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

undefined
Metin
language is undefined

ในตัวอย่าง แสดงการใช้งานของ Undefined ในภาษา JavaScript

let name; // undefined is default value
...
let language = undefined;

เมื่อเราประกาศตัวแปรและยังไม่ได้กำหนดค่าให้กับตัวแปร ค่าของมันจะเป็น undefined โดยอัตโนมัติ หรือเราสามารถกำหนดค่า undefined ให้กับตัวแปรตรงๆ ได้เหมือนกับในตัวแปร language

เมื่อเราอ่านค่า Property ที่ไม่มีอยู่บนออบเจ็คในภาษา JavaScript นั่นจะไม่ทำให้โปรแกรมเกิดข้อผิดพลาด แต่ค่าของมันจะเป็น undefined แทน

let user = {
    name: "Metin"
}

console.log(user.name);     // Metin
console.log(user.language); // undefined

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

console.log(someVariable); // Error

เพื่อตรวจสอบว่าค่าในตัวแปรหรือ Property บนออบเจ็คเป็นค่า undefined หรือไม่ เราสามารถใช้ตัวดำเนินการ typeof ได้ นี่เป็นตัวอย่าง

let price;

if (typeof name === 'undefined') {
    // If it's undefined, define it
    price = 99;
}

console.log("Price is $" + price + " USD.");

let user = {
    name: "Metin"
}

if (typeof user.language === 'undefined') {
    console.log("No `language` property in `user`.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Price is $99 USD.
No `language` property in `user`.

ในตัวอย่าง เป็นการตรวจสอบว่าค่าในตัวแปรและ Property บนออบเจ็คมีเป็นค่า undefined หรือไม่ ตัวดำเนินการ typeof จะส่งค่ากลับมาเป็น String "undefined" ถ้าหากตัวแปรหรือ Property ดังกล่าวยังไม่ได้ถูกกำหนดค่า

Null

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

มาดูตัวอย่างการใช้ Null ในภาษา JavaScript

let username = null;
if (username === null) {
    console.log("Username was not set.");
}

username = "Metin";
console.log("Username: " + username);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Username was not set yet.
Username: Metin

ในตัวอย่าง เราได้ประกาศตัวแปรและกำหนดค่าเป็น null เราสามารถเปรียบเทียบค่าต่างๆ กับ null ได้โดยใช้ตัวดำเนินการเปรียบเทียบ username === null เพื่อดูว่าค่าเท่ากับ null จริงๆ หรือไม่ นี่แสดงให้เห็นว่า null นั้นเป็นค่าที่มีความหมายในตัวของมันเอง

อีกตัวอย่างสำหรับการใช้งาน Null ยกตัวอย่างเช่น เรามีฟังก์ชัน findUser สำหรับค้นหาผู้ใช้ในระบบด้วย ID ในกรณีที่ไม่พบผู้ใช้ดังกล่าว เราสามารถส่งค่ากลับเป็น null และส่งค่ากลับเป็นออบเจ็ค user ในกรณีที่พบได้

let user = findUser(id); // Find user by ID

if (user === null) {
    console.log("User not found.");
} else {
    console.log("Aw! User is found.");
}

ดังนั้นในตอนนำค่าไปใช้งาน เราก็แค่นำ user ไปเปรียบเทียบว่ามันเป็น null หรือไม่เพื่อทำงานบางอย่างในกรณีที่พบหรือไม่พบ

ซึ่งในทางปฏิบัติแล้ววิธีนี้ถูกใช้อย่างแพร่หลายในการเขียนโปรแกรม DOM API; บนเบราว์เซอร์ฟังก์ชัน document.getElementById(someID) ส่งค่ากลับเป็น null ในกรณีที่ไม่พบ Element ในเอกสาร และส่งค่ากลับเป็นออบเจ็ค Element ในกรณีที่พบ

การตรวจสอบประเภทข้อมูล typeof

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

// Primitive data-type
console.log(typeof 5);      // number
console.log(typeof 3.2);    // number
console.log(typeof "marcuscode");   // string
console.log(typeof 1n);     // bigint
console.log(typeof Symbol());   // symbol
console.log(typeof undefined);  // undefined

// Object type
console.log(typeof null);       // object
console.log(typeof { name: "metin" });  // object

// Function type
console.log(typeof function () { });  // function

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

นี่เป็นตัวอย่างสำหรับการเขียนโปรแกรมเพื่อตรวสอบว่าค่าของตัวแปรเป็นตัวเลขหรือไม่

let n = 3;
if (typeof n === "number") {
    console.log("n is number");
} else {
    console.log("n is not number");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

n is number

ตัวดำเนินการ typeof ส่งค่ากลับเป็นชื่อคลาสของประเภทข้อมูล ดังนั้นเพื่อตรวจสอบว่าเป็นตัวเลขหรือไม่ เราจึงต้องเปรียบเทียบกับ "number" ในตอนนี้ถ้าหากคุณเปลี่ยนค่าในตัวแปร n เป็น "3" ผลลัพธ์ที่ได้จะเป็น "string" เนื่องจากว่าค่าดังกล่าวเป็น String literal นั่นเอง

Primitive wrapper objects

Wrapper object เป็นออบเจ็คพิเศษที่ถูกสร้างขึ้นสำหรับประเภทข้อมูลพื้นฐานในภาษา JavaScript ซึ่งจะทำให้เราสามารถเรียกใช้งานเมธอดบนข้อมูลเหล่านั้นได้เหมือนกับว่ามันเป็นออบเจ็ค ทั้งที่จริงแล้วมันเป็นเพียงค่า Literal ของตัวเลขหรือข้อความเท่านั้น นี่เป็นรายการของคลาสที่ใช้สร้าง Wrapper object ในภาษา JavaScript

• Number สำหรับข้อมูลประเภทตัวเลข
• String สำหรับข้อมูลประเภทข้อความ
• BigInt สำหรับข้อมูลประเภท BigInt
• Symbol สำหรับข้อมูลประเภท Symbol
• Boolean สำหรับข้อมูลประเภท Boolean

ยกเว้น Undefined ที่ไม่มี Wrapper object เนื่องจากมันเป็นข้อมูลชนิดพิเศษและค่าของมันมีเพียง undefined

โดยทั่วไปแล้ว เมื่อเราเรียกใช้งานเมธอดบนประเภทข้อมูลพื้นฐาน ยกตัวอย่างเช่น

console.log("marcuscode".toUpperCase());
console.log((3.25).toFixed(4));

นี่ไม่ใช้การเรียกใช้เมธอดบนค่าของ "marcuscode" หรือ 3.25 โดยตรง ทั้งสองค่าเป็นเพียงข้อมูล ไม่ใช่ออบเจ็ค ดังนั้นมันไม่มีเมธอดให้เรียกใช้งาน แต่สิ่งที่เกิดขึ้นเบื้องหลังเมื่อเราเรียกใช้งานเมธอดบน Literal คือคอมไพเลอร์ของภาษา JavaScript จะนำค่า String และตัวเลขดังกล่าวไปสร้างออบเจ็คจากเมธอด String และ Number และเรียกใช้เมธอดดังกล่าวบนออบเจ็คที่ถูกสร้างขึ้นมาแทน

ดังนั้นโค้ดจากตัวอย่างก่อนหน้าจะมีค่าเท่ากับ

console.log(String("marcuscode").toUpperCase());
console.log(Number(3.25).toFixed(4));

ซึ่งกระบวนการนี้อย่างที่บอกไปว่าเกิดขึ้นในการทำงานเบื้องหลังของภาษา JavaScript และเราจะไม่เห็นมัน

ในทางปฏิบัติขอให้คุณเข้าใจว่าเราสามารถเรียกใช้งานเมธอดจากค่าของตัวเลขได้โดยตรง แต่เมธอดที่ถูกเรียกจริงๆ นั้นเป็นเมธอดจาก Number ที่ถูกสร้างขึ้นมาครอบข้อมูลดังกล่าวในตอนเราเรียกใช้เมธอด

ข้อมูลในส่วนนี้เพื่อที่จะทำให้คุณเข้าใจว่าข้อมูลพื้นฐานของภาษา JavaScript ทำงานอย่างไร

ประเภทข้อมูลอื่นๆ

นอกจากนี้ในภาษา JavaScript ยังมีข้อมูลประเภทอื่นๆ เช่น Object Array Map Set WeakMap WeakSet Date และอื่นๆ แต่ข้อมูลเหล่านี้ไม่ใช่ประเภทข้อมูลพื้นฐานในภาษา JavaScript ยกตัวอย่างเช่น Object Array สามารถใช้เก็บข้อมูลพื้นฐานประเภทอื่นๆ ได้ ยกตัวอย่างเช่น

let object = {
    name: "metin",
    money: 100
};

let arr = [1, 2, 3.25, "JavaScript", true];

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

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