object.. JavaScript
JavaScript Object คือกลุ่มของ Property ที่มีการจัดเก็บข้อมูลในรูปแบบของ คู่ของชื่อ (Name) และค่า (Value) ครับ/ค่ะ 📦
Object ถือเป็นองค์ประกอบพื้นฐานที่สำคัญที่สุดของภาษา JavaScript เพราะเกือบทุกอย่างใน JavaScript เป็น Object หรือทำงานเหมือน Object
องค์ประกอบหลักของ Object
Object ใน JavaScript เป็น Collection ของ Property (คุณสมบัติ) โดยแต่ละ Property จะประกอบด้วย:
ชื่อ (Name) หรือ คีย์ (Key): เป็นสตริง (String) ที่ไม่ซ้ำกัน เพื่อใช้ระบุและเข้าถึงข้อมูล
ค่า (Value): สามารถเป็นได้ทุกประเภทข้อมูล (Data Types) เช่น สตริง, ตัวเลข, บูลีน, อาร์เรย์, ฟังก์ชัน หรือแม้แต่ Object อื่น ๆ
รูปแบบการเขียน:
JavaScript
const person = {
// Key : Value
firstName: "Alice", // Property: String
lastName: "Wonder", // Property: String
age: 30, // Property: Number
isStudent: false, // Property: Boolean
hobbies: ["Reading", "Cooking"], // Property: Array
// Property ที่เป็นฟังก์ชัน เรียกว่า "Method"
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
การสร้าง Object
มีวิธีการสร้าง Object หลัก ๆ 3 วิธี:
1. Object Literal (นิยมที่สุด)
เป็นการสร้าง Object โดยใช้เครื่องหมาย {}
JavaScript
const car = {
brand: "Toyota",
model: "Corolla",
year: 2022
};
2. Constructor Function (แบบดั้งเดิม)
เป็นการใช้ฟังก์ชันเพื่อสร้าง Object ที่มีโครงสร้างซ้ำ ๆ โดยใช้คีย์เวิร์ด new
JavaScript
function Person(name, age) {
this.name = name;
this.age = age;
}
const alice = new Person("Alice", 30);
3. Class Syntax (ES6)
เป็นรูปแบบที่ทันสมัยขึ้นและอ่านง่ายขึ้น ใช้คีย์เวิร์ด class เพื่อกำหนดโครงสร้างของ Object
JavaScript
class Dog {
constructor(name) {
this.name = name;
}
bark() {
console.log(`${this.name} says Woof!`);
}
}
const buddy = new Dog("Buddy");
การเข้าถึงและเปลี่ยนแปลง Property
คุณสามารถเข้าถึงค่าใน Object ได้ 2 วิธี:
1. Dot Notation (นิยมที่สุด)
ใช้เมื่อทราบชื่อ Property แน่นอน
JavaScript
console.log(person.firstName); // ผลลัพธ์: "Alice"
person.age = 31; // เปลี่ยนค่า
2. Bracket Notation
ใช้เมื่อชื่อ Property เป็นตัวแปร หรือมีอักขระพิเศษ (เช่น เว้นวรรค, ขีดกลาง)
JavaScript
const key = "lastName";
console.log(person[key]); // ผลลัพธ์: "Wonder"
person["isStudent"] = true;
หลายคนเริ่มเรียนภาษา JavaScript แล้วเจอคำว่า object บ่อยมาก แต่พอรันโค้ดแล้วดันขึ้นค่าแปลก ๆ อย่าง [object Object] เลยงงว่า “object คืออะไร” และอ่านค่ายังไงกันแน่ ตรงนี้เป็นสรุปเสริมจากที่อธิบายเรื่อง key:value, property และ method ไว้แล้ว เพื่อให้ใช้งานได้จริงมากขึ้น 1) Object คืออะไรในมุมใช้งานจริง ให้มอง Object เป็น “กล่องข้อมูลที่มีป้ายชื่อ” เราเก็บข้อมูลหลายชิ้นไว้ด้วยกัน และเรียกด้วย key เช่น person.firstName, person.age ซึ่งช่วยจัดระเบียบข้อมูลได้ดีกว่าการมีตัวแปรกระจัดกระจาย 2) ทำไมถึงเจอ [object Object] สาเหตุหลักคือเอา object ไปต่อสตริงหรือแสดงผลแบบ string ตรง ๆ เช่น const person = { firstName: "Alice" }; console.log("person = " + person); JavaScript จะพยายามแปลง object เป็นข้อความ ผลลัพธ์เลยเป็น [object Object] วิธีดูข้อมูลให้ถูก: - ดูทั้งก้อนแบบอ่านง่าย: console.log(person) - แปลงเป็น JSON: console.log(JSON.stringify(person)) - จัดให้อ่านง่ายขึ้น: console.log(JSON.stringify(person, null, 2)) ข้อควรจำ: JSON.stringify จะไม่เก็บ function (method) และบางค่าพิเศษอาจถูกละไว้ 3) เพิ่ม/ลบ/เช็ก property แบบที่ใช้บ่อย เพิ่มหรือแก้ค่า: person.age = 31; person["isStudent"] = true; ลบ property: delete person.hobbies; เช็กว่ามี key นี้ไหม: "age" in person // true/false หรือกันพลาดเวลาเรียกใช้: Object.hasOwn(person, "age") 4) Dot vs Bracket: เลือกให้ถูกสถานการณ์ - Dot notation: ใช้ง่ายและอ่านง่าย เมื่อรู้ชื่อ key แน่นอน เช่น person.lastName - Bracket notation: เหมาะเมื่อ key มาจากตัวแปร หรือมีอักขระพิเศษ/มีเว้นวรรค เช่น const key = "lastName"; person[key]; const settings = { "font-size": 14 }; settings["font-size"]; 5) this ใน method ทำงานยังไง (จุดที่มือใหม่พลาด) ใน method อย่าง fullName() ที่ใช้ this.firstName, this จะอ้างถึง object ที่เรียกใช้งาน ณ ตอนนั้น เช่น person.fullName() ถ้าไปแยกฟังก์ชันออกมาเรียกเดี่ยว ๆ อาจทำให้ this ไม่ชี้ไปที่ person แล้ว (โดยเฉพาะในบางบริบท) วิธีแก้คือเรียกผ่าน object หรือใช้ bind/arrow function ให้เหมาะกับงาน 6) สรุปจำง่าย - Object = collection ของ property (key:value) - Method = property ที่เป็น function - อยากหลีกเลี่ยง [object Object] ให้ใช้ console.log(obj) หรือ JSON.stringify(obj) - ใช้ dot เมื่อ key ตายตัว, ใช้ bracket เมื่อ key เป็นตัวแปร/มีอักขระพิเศษ ส่วนตัวพอจำ 4 ข้อนี้ได้ เวลาอ่านโค้ด JavaScript จะ “เห็นภาพ” โครงสร้างข้อมูลชัดขึ้น และต่อยอดไปเรื่อง array of objects, destructuring หรือการทำงานกับ API ได้ง่ายมาก
❤️❤️❤️❤️