JavaScript: Primitive vs Reference Types ชนิดข้อมูลแบบพื้นฐาน และอ้างอิง แตกต่างกันอย่างไร

ใน JavaScript มีชนิดข้อมูล 2 ประเภท คือ Primitive Types เป็นชนิดข้อมูลแบบ พื้นฐาน และ Reference Types เป็นชนิดข้อมูลแบบ อ้างอิง มาดูกันดีกว่าค่ะว่า ชนิดข้อมูลทั้ง 2 ประเภท แตกต่างกันอย่างไร

 

ทำความเข้าใจ Primitive Types

Primitive Types” คือชนิดข้อมูลแบบ “พื้นฐาน” ประกอบไปด้วย string, number และ boolean

 

ผลลัพธ์

javascript-primitive-reference-1

ภาพที่ 1 ผลลัพธ์

 

ลักษณะการเก็บค่าข้อมูล ในหน่วยความจำ (memory) จะเป็นการเก็บค่า (value) ข้อมูลเอาไว้ที่ตัวแปรเลย ดังภาพด้านล่าง

javascript-primitive-reference-2

ภาพที่ 2 การเก็บข้อมูลแบบ Primitive Type

 

หมายเหตุ:

การเก็บข้อมูลในหน่วยความจำจริง ๆ จะเก็บแบบเลขฐาน 2 ข้อมูลจากภาพใช้อธิบายเพื่อให้เข้าใจง่ายขึ้นเท่านั้น

 

 

ทำความเข้าใจ Reference Types

Reference Types” คือชนิดข้อมูลแบบ “อ้างอิง” หรือเราจะเรียกว่าเป็นชนิดข้อมูลแบบ “ออบเจ็กต์” (object) ก็ได้ ตัวอย่างก็เช่น array และ object เป็นต้น

 

ผลลัพธ์

javascript-primitive-reference-3

ภาพที่ 3 ผลลัพธ์

 

ลักษณะการเก็บค่าข้อมูล ในหน่วยความจำ (memory) จะเป็นการเก็บค่า ที่ใช้ในการอ้างอิง (reference) หรือ Pointer เอาไว้ โดย Pointer นี้จะชี้ไปที่ ข้อมูลที่เก็บไว้ในหน่วยความจำอีกที ดังภาพด้านล่าง

javascript-primitive-reference-4

ภาพที่ 4 การเก็บข้อมูลแบบ Reference Type

 

พอจะทราบหรือยังคะว่า คำว่า reference มาจากไหน? มันคือการอ้างอิงไปยังข้อมูลที่เก็บเอาไว้อีกทีนั้นเอง

 

นี้คือข้อแตกต่างข้อแรก ระหว่าง Primitive และ Reference

 

เมื่อย้อนเวลากลับไปในยุคที่พึ่งจะมีการเขียนโปรแกรมใหม่ ๆ ชนิดข้อมูลแบบ Reference นั้นยังไม่เกิด มันถูกพัฒนามาภายหลัง คือในยุคของการเขียนโปรแกรมเชิงออบเจ็กต์ (OOP)

 

คำว่า “Primitive” จริง ๆ แล้วแปลว่า “ดั้งเดิม” เพราะมันเกิดขึ้นมาก่อน และในทางการเขียนโปรแกรม เราเรียกมันว่า ชนิดตัวแปรแบบพื้นฐาน เพราะมันเป็นพื้นฐานของตัวแปรชนิด Object ด้วย

 

หากเรามองดูข้อมูลใน ตัวแปร person ให้ดี เราจะเห็นว่า ออบเจ็กต์ person เก็บกลุ่มข้อมูลชนิด “Primitive” เอาไว้นั้นเอง แต่เวลาเรียกใช้งาน เราจะเรียกผ่าน ออบเจ็กต์ person

 

เพื่อให้เข้าใจมากขึ้น เรามาลองดูพฤติกรรม การทำงานของ Primitive และ Reference กันค่ะ

 

 

ทดสอบ Primitive vs Reference Types

เรามาลองทดสอบ คัดลอกและทำการเปลี่ยนข้อมูลในตัวแปรแบบ Primitive กันค่ะ

 

เริ่มต้น เรามีโค้ดดังต่อไปนี้

 

ผลลัพธ์

สังเกตว่า ข้อมูลจะเหมือนกันนะคะ

javascript-primitive-reference-5

ภาพที่ 5 ผลลัพธ์

 

ลองเปลี่ยนค่าข้อมูลใน name1 และแสดงผลลัพธ์ ออกมาดูกันค่ะ

 

ผลลัพธ์

สังเกตว่า ข้อมูลข้อ name1 เปลี่ยนไปแล้ว แต่ name2 ไม่เปลี่ยนนะคะ

javascript-primitive-reference-6

ภาพที่ 6 ผลลัพธ์

 

ที่ผลลัพธ์เป็นแบบนี้ เพราะ Primitive เก็บค่าข้อมูลเอาไว้ที่ตัวเอง เวลาเราทำการคัดลอกข้อมูลจากตัวแปร name1 มา ด้วยคำสั่ง name2 = name1  นั่นคือ เราคัดลอกข้อมูลมาแล้ว

 

เมื่อมีการเปลี่ยนค่า name1 ค่าในตัวแปร name1 จึงเปลี่ยนไป แต่ไม่กระทบกับค่าของ name2 ที่ทำการคัดลอกมาแล้ว

javascript-primitive-reference-7

ภาพที่ 7 แสดงการคัดลอกข้อมูล แบบ Primitive

 

 

คราวนี้ เรามาลองทดสอบ คัดลอกและทำการเปลี่ยนข้อมูลในตัวแปรแบบ Reference กันบ้างนะคะ

 

เริ่มต้น เรามีโค้ดดังต่อไปนี้

 

ผลลัพธ์

สังเกตว่า ข้อมูลจะเหมือนกันทั้ง 2 ออบเจ็กต์

javascript-primitive-reference-8

ภาพที่ 8 ผลลัพธ์

 

ลองเปลี่ยนค่าข้อมูลใน person1 และแสดงผลลัพธ์ ออกมาดูกันค่ะ

 

ผลลัพธ์

สังเกตว่า ข้อมูลข้อ person1 และ person2 มีค่าข้อมูลเดียวกันแล้วนะคะ 🙂

javascript-primitive-reference-9

ภาพที่ 9 ผลลัพธ์

 

ที่ผลลัพธ์เป็นแบบนี้ เพราะ Reference เก็บค่า Pointer ที่ชี้ไปยังข้อมูลไว้  เวลาเราทำการคัดลอก ด้วยคำสั่ง person1 = person2  นั่นคือ เราคัดลอก Pointer มา ไม่ได้คัดลอกข้อมูลมมาตรง ๆ เหมือนที่ Primitive ทำ

 

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

javascript-primitive-reference-10

ภาพที่ 10 แสดงการคัดลอกข้อมูล แบบ Reference

 

 

สรุป

1. Primitive data types เป็นชนิดข้อมูลแบบ พื้นฐาน ที่เก็บค่าข้อมูลเอาไว้ที่ตัวเอง เมื่อมีการคัดลอกข้อมูล จะเป็นการคัดลอกข้อมูลมาโดยตรง

 

2. Reference data type เป็นชนิดข้อมูลแบบ อ้างอิง ที่เก็บค่า Pointer ที่ชี้ไปยังตำแหน่งที่เก็บข้อมูลเอาไว้ เมื่อมีการคัดลอกข้อมูล จะเป็นการคัดลอก Pointer ไม่ใช่ค่าข้อมูลโดยตรง

 

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ