φυβλαςのβλογ
บล็อกของ phyblas



javascript เบื้องต้น บทที่ ๓: ตัวแปรและชนิดของข้อมูล
เขียนเมื่อ 2019/07/31 23:06
แก้ไขล่าสุด 2020/05/15 06:40


ชนิดของข้อมูล

ในบทที่แล้วจะเห็นว่ามีการใช้ทั้งข้อความและตัวเลขในการเขียนโค้ด

ข้อมูลประกอบด้วยชนิดต่างๆมากมาย เช่นข้อมูลที่เป็นตัวเลขก็ถือเป็นข้อมูลชนิดตัวเลข (number) ส่วนที่เห็นเป็นข้อความจะเรียกว่าเป็นข้อมูลชนิดสายอักขระ (string)

การจะรู้ชนิดของข้อมูลทำได้โดยใช้คำสั่ง typeof
alert(typeof 1) // ได้ number

ชนิดของข้อมูลในจาวาสคริปต์โดยพื้นฐานแล้วมีดังนี้

ชนิดข้อมูล ตัวอย่าง
number ตัวเลข 1, 129.3
string สายอักขระ "สวัสดี"
boolean บูล (จริง เท็จ) true, false
object ออบเจ็กต์ (แถวลำดับแบบจับคู่) {"a": 1, "b": 2}, console
function ฟังก์ชัน function(x){return x+1}, alert
undefined ไม่ได้นิยาม undefined

นอกจากนี้ยังมีออบเจ็กต์ชนิดใหม่ที่เพิ่มเข้ามาใน ES6 ได้แก่ symbol กับ bigint ซึ่งจะเขียนถึงอีกทีในเนื้อหาส่วนของ ES6

ที่จริงแล้วจาวาสคริปต์เป็นภาษาที่ใช้แนวคิดการเขียนโปรแกรมเชิงวัตถุ (object-oriented programming, ย่อว่า OOP)

หมายความว่าทุกสิ่งทุกอย่างในโปรแกรมเป็นออบเจ็กต์ (object) หมายความว่า "วัตถุ" วัตถุจะประกอบไปด้วยส่วนประกอบต่างๆ ซึ่งมีหน้าที่ต่างกันออกไป

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

แต่ในจาวาสคริปต์นั้นคำว่าออบเจ็กต์จะหมายถึงข้อมูลชนิดออบเจ็กต์ (object) เป็นข้อมูลชนิดหนึ่ง

ออบเจ็กต์ในจาวาสคริปต์นั้นจริงๆแล้วอาจเรียกได้อีกแบบว่าเป็นข้อมูลชนิด "แถวลำดับแบบจับคู่" (associative array)

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

ในบทนี้จะอธิบายข้อมูลแต่ละชนิดแบบคร่าวๆ แต่จะอธิบายลึกลงไปในบทถัดๆไป



การประกาศตัวแปร

ปกติแล้วในการเขียนโปรแกรม ค่าของข้อมูลต่างๆจะถูกเก็บอยู่ในรูปของสิ่งที่เรียกว่า "ตัวแปร" (variable) คือการกำหนดชื่อขึ้นมาเพื่อแทนตัวเก็บค่าข้อมูล

การสร้างตัวแปรขึ้นมาเก็บข้อมูลทำได้โดยเขียนดังนี้
var ชื่อตัวแปร = ค่าตัวแปร;

เช่น สร้างตัวแปรชื่อ a ขึ้นมา ให้มีค่าเท่ากับ 1 ก็เขียนได้โดย
var a = 1;

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

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

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

การประกาศตัวแปรนั้นจะประกาศด้วย var เอาไว้ก่อนแล้วค่อยป้อนค่าให้ทีหลังก็ได้
var a;
a = 1;

ตัวแปรที่เคยถูกประกาศไปแล้ว จะประกาศซ้ำก็ได้ หรือจะป้อนค่าทับลงไปโดยไม่ใช้ var ใหม่ก็ได้ ถ้ามีการเขียนข้อมูลใหม่ใส่ตัวแปรที่เคยประกาศไว้ ข้อมูลเดิมจะถูกลบหายไป
var x = 1; // ประกาศตัวแปรและป้อนค่าให้ครั้งแรก
alert(x); // ได้ 1
x = "ไก่"; // ใส่ค่าใหม่ทับลงไป
alert(x); // ได้ ไก่
var x = "ไข่"; // ประกาศตัวแปรใหม่อีกรอบ ทับตัวแปรเดิม
alert(x); // ได้ ไข่

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

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

นอกจาก var แล้ว ใน ES6 ยังมีวิธีประกาศตัวแปรอีก ๒ แบบเพิ่มเข้ามา คือ const กับ let ซึ่งจะไปกล่าวถึงอีกทีในส่วนเนื้อหา ES6



ข้อกำหนดเรื่องชื่อตัวแปร

ชื่อตัวแปรจะใช้เป็นคำอะไรก็ได้ โดยมีหลักทั่วไปดังนี้

  • ไม่ขึ้นต้นด้วยตัวเลข แต่ใช้ตัวเลขในตำแหน่งอื่นที่ไม่ใช่ตัวแรกได้
  • ไม่ใช้สัญลักษณ์พิเศษ เช่น , & ^ % # @ ! ? ~ ` " ' / \ ( ) [ ] { } - + * = ; :
  • แต่ $ และ _ สามารถใช้ได้
  • ตัวอักษรพิมพ์เล็กพิมพ์ใหญ่ถือเป็นคนละตัว
  • ไม่ตรงกับคำสงวน
สัญลักษณ์เครื่องหมายต่างๆมักมีความหมายเดิมในตัวซึ่งทำหน้าที่บทบาทสำคัญในไวยากรณ์ภาษาอยู่แล้ว จึงไม่สามารถนำมาตั้งชื่อตัวแปรได้

เพียงแต่พวกเครื่องหมายในภาษาไทยบางอย่างใช้ได้ เช่น ฯ และ ๆ แต่อย่าง ๛ (โคมูตร), ┼ (ตีนครุ), ๏ (ฟองมัน), ๚ (อังคั่นคู่) ก็จะใช้ไม่ได้

ส่วนพวกคำสงวนเองก็มักจะมีหน้าที่เฉพาะทางไวยากรณ์ในภาษา จึงไม่สามารถนำมาใช้เป็นชื่อตัวแปรได้เช่นกัน

คำสงวนในจาวาสคริปต์มีดังนี้

asyncawaitbreakcasecatchclassconstcontinuedebuggerdefaultdeletedoelseexportextendsfinallyforfunctionifimportimplementsininstanceofinterfacenewpackageprivateprotectedpublicreturnsuperswitchthisthrowtrytypeofvarvoidwhilewithyield

พวกอักษรไทยก็สามารถใช้ได้เช่นกัน มีข้อดีคือมั่นใจได้ว่าไม่ตรงกับคำสงวนแน่นอน แต่ข้อเสียคือหากอยู่ในสิ่งแวดล้อมที่ไม่รองรับยูนิโค้ดอาจทำให้ไม่ทำงานได้ เพียงแต่ข้อเสียนี้ไม่ค่อยมีปัญหาในปัจจุบันแล้ว อีกทั้งหากในหน้า html ได้ประกาศ <meta charset="UTF-8" /> แล้วโดยทั่วไปจะเป็นการระบุชัดว่าต้องอ่านตัวหนังสือแบบยูนิโค้ด จึงไม่มีปัญหา แต่หากไม่ใส่อาจมีปัญหาได้

อย่างไรก็ตาม โดยธรรมเนียมปฏิบัติแล้วการตั้งชื่อตัวแปรเป็นอักษรอื่นนอกจากอักษรโรมันนั้นไม่เป็นที่นิยม ดังนั้นในที่นี้ก็จะใช้อักษรโรมันล้วนในการตั้งชื่อตัวแปรเช่นกัน

ตัวอย่างการประกาศตัวแปรที่ถูกต้อง
var a1; // ประกอบด้วยอักษรกับตัวเลข โดยตัวเลขไม่ใช่ตัวแรก
var A1; // ถือเป็นคนละตัวกับ a1
var h_1; // ใช้ _ ได้
var $g; // $ ปนอยู่ได้
var คะแนน; // ใช้อักษรไทยได้
var 宝箱; // ใช้อักษรจีนได้

ตัวอย่างที่ไม่ถูกต้อง
var for; // ตรงกับคำสงวนไม่ได้
var b+; // มีเครื่องหมาย + ปนไม่ได้
var 1f; // ขึ้นต้นด้วยตัวเลขไม่ได้

ลักษณะของชื่อตัวแปรที่ตั้งได้ แต่ไม่แนะนำ
  • ยาวเกินไป ทำให้โค้ดเยิ่นเย้อโดยไม่จำเป็น
  • ซ้ำกับชื่อตัวแปรที่มีความหมายเดิมเป็นสากล
  • นำหน้าด้วย _ โดยไม่มีความหมายอะไรเป็นพิเศษ
ตัวอย่าง
var ค่าอัตราเร็วของคลื่นแม่เหล็กไฟฟ้าในสูญญากาศ = 299792458; // ดูจะยาวไป
var alert = 1; // ตรงกับชื่อฟังก์ชันที่มีอยู่เดิม
var _a; // ขึ้นต้นด้วย _

alert นั้นเป็นฟังก์ชันที่มีอยู่เดิมในจาวาสคริปต์ แต่ไม่ใช่คำสงวน ถ้าหากเขียนค่าทับลงไปก็จะทำได้ แต่พอทำแบบนั้นแล้วก็จะเสียความสามารถเดิมไป ถูกเขียนทับด้วยค่าใหม่ที่ป้อนเข้าไป
var alert = "เตือนภัย";
alert(1+1); // จะขึ้นในคอนโซลว่า TypeError: alert is not a function

ในจาวาสคริปต์นั้นฟังก์ชันก็ถือว่าเป็นข้อมูลชนิดหนึ่ง ดังนั้น alert นั้นจริงๆแล้วก็คือ "ข้อมูลชนิดฟังก์ชัน" ที่เก็บอยู่ในตัวแปรที่ชื่อ alert

และเมื่อเป็นแค่ตัวแปรตัวนึงจึงสามารถถูกเขียนทับเมื่อไหร่ก็ได้



ข้อแตกต่างระหว่างฟังก์ชันกับลิเทอรัล

alert เป็นฟังก์ชัน (function) คือเป็นชุดคำสั่งที่เอาไว้ทำหน้าที่ต่างๆ

ส่วน var และ typeof นั้นถือเป็นลิเทอรัล (literal) แบบหนึ่ง คือเป็นรูปแบบการเขียนตายตัวตามไวยากรณ์ภาษา

ลิเทอรัลยังรวมไปถึงพวกตัวดำเนินการต่างๆเช่น + - * / และ =

ที่ผ่านมาตั้งแต่บทแรก เราใช้คำว่า "คำสั่ง" เพื่อเรียกรวมๆระหว่างฟังก์ชันกับลิเทอรัลโดยไม่ได้แยกแยะ แต่ว่าถ้าพูดให้ถูกจริงๆแล้วทั้ง ๒​ อย่างนี้ต่างกันมาก

ฟังก์ชันนั้นเมื่อเรียกใช้จะต้องมีวงเล็บต่อท้ายคร่อมค่าที่ต้องการนำมาใช้ในฟังก์ชันเสมอ เช่น alert(1+1) แบบนี้ จะเขียนเป็น alert 1+1 ไม่ได้

และฟังก์ชันนั้นสามารถถูกเขียนทับได้ ดังที่ได้กล่าวไปแล้ว

แต่ลิเทอรัลนั้นมีวิธีการใช้ยืนหยุ่นกว่านั้น บางชนิดอาจโผล่มาเดี่ยวๆเพื่อทำหน้าที่ต่างๆบางอย่าง เช่น break continue (จะกล่าวถึงในบทที่ ๘)

หรืออาจวางไว้หน้าค่าที่เอาไว้ทำอะไรบางอย่าง เช่น var หรือ typeof

หรืออาจวางไว้ระหว่างค่าอะไร ๒ ตัว เช่น = + - * /

หรืออาจมีรูปแบบการใช้ที่ซับซ้อนกว่านั้น เช่น for if do while ซึ่งจะกล่าวถึงต่อไป

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

ฟังก์ชันนั้นยังเป็นสิ่งที่ผู้เขียนโปรแกรมสามารถสร้างขึ้นใหม่เอง กำหนดขึ้นมาเองได้

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



ข้อมูลชนิดตัวเลข

ตัวเลข (number) คือจำนวนตัวเลข ซึ่งอาจเป็นเลขจำนวนเต็ม หรือจำนวนที่มีทศนิยม หรือจำนวนที่เขียนในรูป e (รูปจำนวนคูณสิบยกกำลัง)
var i = 2;
var k = 1.1;
var c = 2.9979e8 // เท่ากับ 299790000

ในจาวาสคริปต์ทั้งจำนวนเต็มและจำนวนทศนิยมต่างถือว่าจัดอยู่ในกลุ่มข้อมูลตัวเลขทั้งสิ้น ไม่มีการแยกแยะชนิดเหมือนในภาษาอื่นๆส่วนใหญ่ ที่มักจะแยกเป็นเรียกจำนวนเต็มเป็น int หรือ integer และจำนวนทศนิยมว่า float

นอกจากนี้ยังมีจำนวนที่ค่อนข้างพิเศษ คือ NaN (ค่าที่ไม่เป็นตัวเลขปกติ) กับ Infinity (ค่าอนันต์) จัดเป็นข้อมูลชนิดตัวเลขเหมือนกัน

ข้อมูลตัวเลขสามารถเอามาบวกลบกันได้
var a = 1;
var b = 7;
var n = a+b;
alert(n); // ได้ 8

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

เช่น
var n = "1";


ข้อมูลชนิดสายอักขระ

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

เครื่องหมายคำพูดนั้นอาจใช้ได้ทั้งแบบเดี่ยวแบบนี้ ' ' และแบบคู่แบบนี้ " " จะใช้แบบไหนก็ได้ แต่ถ้าทางซ้ายเปิดด้วยแบบไหนทางขวาก็จะต้องปิดด้วยแบบนั้น
var s1 = "ขอบฟ้า เหนืออาณาใดกั้น"
var s2 = 'ใช่รักจะดั้น ยากกว่านกโบยบิน'

ข้อแตกต่างระหว่างแบบคู่กับแบบเดี่ยวก็คือ ถ้าใช้แบบคู่จะสามารถใส่แบบเดี่ยวลงในสายอักขระได้ และถ้าใช้แบบคู่จะใส่แบบเดี่ยวได้

ตัวอย่าง
"d'accordo!"
'อยากบอกว่า "ฉันรักเธอ" จังเลย'

แต่ว่าถ้าอยากจะใส่แบบเดี่ยวลงในแบบเดี่ยว หรือแบบคู่ลงในแบบคู่ ก็ทำได้โดยการ ใส่ \ ไว้หน้า ' หรือ "
'd\'accordo!';
"อยากบอกว่า \"ฉันรักเธอ\" จังเลย"

นอกจากนี้ใน ES6 สามารถใช้ `` ได้ด้วย ซึ่งมีความหมายต่างออกไป รายละเอียดจะยกไปเขียนในเนื้อหาส่วน ES6

ภายในสายอักขระจะขึ้นบรรทัดใหม่ไม่ได้ ปกติจะเขียนว่า \n แทนการขึ้นบรรทัดใหม่

ข้อมูลสายอักขระนั้นต่างจากตัวเลขมาก ความแตกต่างอย่างหนึ่งคือ เวลาเอามาบวกกันจะเป็นการนำสายอักขระมาต่อกัน
var s3 = "ถึงม้วยดินสิ้นฟ้ามหาสมุทร";
var s4 = "ไม่สิ้นสุดความรักสมัครสมาน";
alert(s3 + " " + s4);// ได้ ถึงม้วยดินสิ้นฟ้ามหาสมุทร ไม่สิ้นสุดความรักสมัครสมาน


ข้อมูลชนิดบูล

บูล (bool หรือ boolean) คือข้อมูลที่ใช้บอกถึงความจริงหรือเท็จ มีอยู่แค่ ๒​ ตัว คือ true (จริง) และ false (เท็จ)

ปกติเราจะได้ค่า true หรือ false ออกมาเมื่อมีการใช้ตัวดำเนินการบางอย่างเพื่อหาค่าความเป็นจริงเท็จ เช่น เทียบค่าระหว่างตัวแปร ๒ ตัวโดยใช้เครื่องหมายมากกว่า > หรือน้อยกว่า <

var a = 10
var b = 9
var c = 8
alert(a>b) // ได้ true
alert(b<c) // ได้ false

ในที่นี้ a มากกว่า b จริงเลยได้ true และ b น้อยกว่า c ไม่จริง เลยได้ false

หรือเราสามารถสร้างค่า true หรือ false ขึ้นมาเองได้ง่ายๆโดยการพิมพ์ true หรือ false ไปตรงๆเลย
var t = true
alert(typeof t) // ได้ boolean
alert(typeof false) // ได้ boolean

รายละเอียดเกี่ยวกับข้อมูลชนิดบูลจะอธิบายในบทที่ ๗



ข้อมูลชนิดออบเจ็กต์

ออบเจ็กต์ (object) เป็นข้อมูลโครงสร้างที่รวบรวมกลุ่มข้อมูลหลายๆอย่างเข้าด้วยกัน โดยข้อมูลที่เป็นส่วนประกอบอยู่ในออบเจ็กต์จะเรียกว่า "พรอเพอร์ตี" (property)

การสร้างออบเจ็กต์นั้นทำได้ง่ายโดยการสร้างวงเล็บปีกกาเปิดปิด จากนั้นก็ป้อนค่าพรอเพอร์ตีต่างๆ โดยใส่ชื่อตามด้วยโคลอน : แล้วตามด้วยค่า หากจะใส่หลายตัวให้คั่นแต่ละตัวด้วยจุลภาค , เช่น
var monster = {
  chue: "poring",
  lv: 14,
  atk: 20
};

เมื่อจะเข้าถึงค่าข้างในก็เติมจุด ตามด้วยชื่อพรอเพอร์ตี
alert(monster.chue); // ได้ poring
alert(monster.atk); // ได้ 20

สามารถแก้ค่าพรอเพอร์ตีที่มีอยู่ หรือเพิ่มพรอเพอร์ตีใหม่ที่ต้องการเข้าไปเมื่อไหร่ก็ได้
monster.atk = 100;
alert(monster.atk); // ได้ 100
monster.def = 80;
alert(monster.def); // ได้ 80

รายละเอียดเรื่องของออบเจ็กต์จะอธิบายในบทที่ ๙



ข้อมูลชนิดฟังก์ชัน

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

ฟังก์ชัน alert ที่ใช้มาตั้งแต่ต้นก็เป็นแค่ฟังก์ชันนึงที่โปรแกรมมีอยู่ให้ตั้งแต่ต้น

และในจาวาสคริปต์ สามารถอยู่ดีๆสร้างฟังก์ชันขึ้นได้ง่ายๆเลย เช่น
var f = function(x){return x+1};
alert(f); // ได้ function(x) {return x + 1}
alert(typeof f); // ได้ function

ฟังก์ชันที่สร้างสามารถนำมาใช้ได้ทันทีโดยตามหลังด้วยวงเล็บแล้วใส่ค่าที่ต้องการใช้กับฟังก์ชันไว้ด้านใน
var k = f(1);
alert(k); // ได้ 2
var h = f(12);
alert(h); // ได้ 13

รายละเอียดเรื่องการเขียนฟังก์ชันจะยังไม่เขียนถึงตอนนี้ จะไปกล่าวถึงในบทที่ ๑๐ ตอนนี้แค่ให้เข้าใจในเบื้องต้นว่าฟังก์ชันก็เป็นแค่ข้อมูลชนิดนึง ซึ่งมีลักษณะพิเศษคือจะมีการทำงานเมื่อเติม () ต่อท้าย และเราสามารถสร้างฟังก์ชันขึ้นใหม่เองตามที่ต้องการเมื่อใดก็ได้



null และ undefined

ในจาวาสคริปต์นั้นมีสิ่งที่แทนความว่างเปล่าหรือความไม่มีอะไรอยู่ ๒ ตัว คือ null และ undefined

๒ ตัวนี้จริงๆแล้วคล้ายกันมาก บางทีก็ใช้แทนกันได้ แต่ก็ถือเป็นคนละสิ่งกัน

null หมายถึงค่าที่มีความหมายว่าว่างเปล่า ไม่มีอะไรอยู่

ในขณะที่ undefined หมายถึงไม่ได้นิยาม คือไม่ได้มีใครมากำหนดค่าให้มัน ไม่มีตัวตนอยู่

หรืออาจอธิบายสั้นๆว่า null คือ "กำหนดว่าไม่มี" ส่วน undefined คือ "ไม่ได้กำหนดว่ามี"

อาจฟังดูคล้ายกัน แต่ null คือเพราะกำหนดว่าไม่มีจึงไม่มี ส่วน undefined คือเพราะไม่ได้กำหนดว่ามีก็เลยไม่มี

เช่นประกาศตัวแปรไว้ แต่ไม่ได้ใส่ค่าให้ แบบนี้ตัวแปรนั้นจะมีค่าเป็น undefined จนกว่าจะมีการป้อนค่าให้มัน
var a;
alert(a); // ได้ undefined

หรือถ้าดูค่าพรอเพอร์ตีภายในออบเจ็กต์ หากไม่มีพรอเพอร์ตีนั้นอยู่ก็จะได้ undefined หรือถ้าป้อนค่าไว้ให้เป็น undefined ก็ได้ undefined อยู่ดี
obj = {
  c: null 
};
alert(abj.c); // ได้ null
alert(abj.a); // ได้ undefined
obj.b = undefined;
alert(obj.b); // ได้ undefined

หากใช้ typeof จะได้ว่า undefined เป็นชนิด undefined เอง ส่วน null เป็นออบเจ็กต์
alert(typeof undefined); // ได้ undefined
typeof null;  // ได้ object

นั่นหมายความว่า null ก็คือออบเจ็กต์ชนิดหนึ่ง เป็นออบเจ็กต์แห่งความว่างเปล่า ส่วน undefined คือการที่ไม่มีออบเจ็กต์อะไรอยู่

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



ออบเจ็กต์ภายในตัว

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

ตัวอย่างออบเจ็กต์ในตัวส่วนหนึ่ง รวมไปถึงในส่วนของ ES6

ออบเจ็กต์ ความหมาย
Object รวมฟังก์ชันสำหรับจัดการกับออบเจ็กต์
String แปลงเป็นข้อมูลชนิดสายอักขระ, รวมฟังก์ชันสำหรับจัดการกับสายอักขระ (ดูบทที่ ๕, บทที่ ๑๓)
Number แปลงเป็นข้อมูลชนิดตัวเลข, รวมฟังก์ชันสำหรับจัดการกับตัวเลข (ดูบทที่ ๕)
Boolean แปลงข้อมูลเป็นชนิดบูล (ดูบทที่ ๗)
Function ตัวสร้างฟังก์ชัน (ดูบทที่ ๑๐)
Math รวมฟังก์ชันเกี่ยวกับคณิตศาสตร์ (ดูบทที่ ๑๖)
Date ตัวสร้างออบเจ็กต์วันเวลา, รวมฟังก์ชันจัดการเกี่ยวกับเวลา (ดูบทที่ ๑๕)
RegExp ตัวสร้างออบเจ็กต์เรกูลาร์เอ็กซ์เพรชชัน (ดูบทที่ ๑๔)
Error ออบเจ็กต์ที่อธิบายข้อผิดพลาดที่เกิดขึ้นกับโปรแกรม (ดูบทที่ ๑๘)
Array ใช้สร้างและจัดการข้อมูลชนิดแถวลำดับ (ดูบทที่ ๑๑)
JSON ใช้จัดการกับ json (เพิ่มมาใน ES5 ดูบทที่ ๒๘)
Symbol สร้างหรือจัดการข้อมูลชนิดซิมโบล (เพิ่มมาใน ES6 ดูบทที่ ๓๕)
Proxy ควบคุมพฤติกรรมต่างๆของออบเจ็กต์ (เพิ่มมาใน ES6 ดูบทที่ ๔๐)
Promise ใช้จัดการกับการทำงานแบบไม่ประสานเวลา (เพิ่มมาใน ES6 ดูบทที่ ๔๓)
BigInt สร้างเลขจำนวนเต็มขนาดใหญ่มาก (เพิ่มมาใน ES2020 ดูบทที่ ๔๕)

มีหลายตัวที่ชื่อเหมือนกับข้อมูลพื้นฐานในจาวาสคริปต์ ได้แก่ String, Number, Boolean เป็นต้น พวกนี้สามารถใช้เป็นฟังก์ชันเพื่อแปลงข้อมูลชนิดอื่นเป็นข้อมูลชนิดนั้นได้

Number และ String เองนอกจากตัวเองจะใช้เป็นฟังก์ชันสำหรับแปลงข้อมูลแล้ว ภายในยังรวบรวมฟังก์ชันที่ใช้จัดการกับข้อมูชนิดนั้นๆด้วย

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

บางตัวสามารถใช้เป็นคอนสตรักเตอร์เพื่อสร้างออบเจ็กต์ชนิดต่างๆตามชื่อนั้น เช่น Date, RegExp, Array เป็นต้น

คอนสตรักเตอร์ (constructor) หรือ ตัวสร้าง หมายถึงตัวสร้างออบเจ็กต์ที่จะสร้างออบเจ็กต์ขึ้นเมื่อใช้กับคำสั่ง new เช่น
var wanWela = new Date("2019-10-14");
alert(wanWela); // ได้ Mon Oct 14 2019 07:00:00 GMT+0700
var thaeoLamdap = new Array(14);
alert(thaeoLamdap); // ได้ ,,,,,,,,,,,,,
var regex = new RegExp("ก+");
alert(regex); // ได้ /ก+/

รายละเอียดไว้กล่าวถึงอีกทีในแต่ละบทที่เจาะจงเรื่องของออบเจ็กต์ชนิดนั้นๆ

จะเห็นว่าออบเจ็กต์ในตัวมีอยู่หลากหลายและทำหน้าที่แตกต่างกันออกไป

นอกจากนี้หากรันจาวาสคริปต์ในเบราเซอร์จะมีออบเจ็กต์ในตัวเฉพาะสำหรับในเบราเซอร์ ได้แก่ console, window, navigator, history, location, ฯลฯ

console.log ซึ่งกล่าวถึงไปเล็กน้อยในบทที่แล้วก็เป็นคำสั่งหนึ่งที่เตรียมโดยออบเจ็กต์ console

พวกนี้ไม่ใช่ออบเจ็กต์ในตัวของจาวาสคริปต์ ดังนั้นหากรันที่อื่นที่ไม่ใช่ในเบราเซอร์ก็จะไม่มี

console.log นั้นเป็น เมธอด (method) คือเป็นพรอเพอร์ตีของออบเจ็กต์ แต่เป็นพรอเพอร์ตีที่เป็นฟังก์ชัน เกี่ยวกับเมธอดจะอธิบายเพิ่มเติมในบทที่ ๑๙



สรุปท้ายบท

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

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





-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> javascript

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

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
มอดูลต่างๆ
-- numpy
-- matplotlib

-- pandas
-- manim
-- opencv
-- pyqt
-- pytorch
การเรียนรู้ของเครื่อง
-- โครงข่าย
     ประสาทเทียม
maya
javascript
ความน่าจะเป็น
บันทึกในญี่ปุ่น
บันทึกในจีน
-- บันทึกในปักกิ่ง
-- บันทึกในฮ่องกง
-- บันทึกในมาเก๊า
บันทึกในไต้หวัน
บันทึกในยุโรปเหนือ
บันทึกในประเทศอื่นๆ
เรียนภาษาจีน
qiita
บทความอื่นๆ

บทความแบ่งตามหมวด



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  ค้นหาบทความ

  บทความแนะนำ

รวมรายชื่อนักร้องเพลงกวางตุ้ง
ภาษาจีนแบ่งเป็นสำเนียงอะไรบ้าง มีความแตกต่างกันมากแค่ไหน
ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
หลักการเขียนทับศัพท์ภาษาจีนกวางตุ้ง
การใช้ unix shell เบื้องต้น ใน linux และ mac
หลักการเขียนทับศัพท์ภาษาจีนกลาง
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
บันทึกการเที่ยวสวีเดน 1-12 พ.ค. 2014
แนะนำองค์การวิจัยและพัฒนาการสำรวจอวกาศญี่ปุ่น (JAXA)
เล่าประสบการณ์ค่ายอบรมวิชาการทางดาราศาสตร์โดยโซวเคนได 10 - 16 พ.ย. 2013
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
บันทึกการเที่ยวญี่ปุ่นครั้งแรกในชีวิต - ทุกอย่างเริ่มต้นที่สนามบินนานาชาติคันไซ
หลักการเขียนทับศัพท์ภาษาญี่ปุ่น
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ
ทำไมถึงอยากมาเรียนต่อนอก
เหตุผลอะไรที่ต้องใช้ภาษาวิบัติ?

ไทย

日本語

中文