object.. JavaScript
A JavaScript Object is a group of Property that stores data in the form of a pair of names and values. 📦
Object is considered the most important basic component of the JavaScript language because almost everything in JavaScript is an Object or works like an Object.
The main element of the Object.
Objects in JavaScript are collections of Property (properties), with each Property consisting of:
Name or Key: A unique string to identify and access data.
Value: It can be any data type (Data Types), such as strings, numbers, booleans, arrays, functions, or even other Objects.
Writing style:
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 as a function is called "Method."
FULL Name: function () {
return this.firstName + "" + this.lastName;
}
};
Creating an Object
There are 3 main Object creation methods:
1. Object Literal (most popular)
It creates an Object using the {} sign.
JavaScript
Const car = {
Brand: "Toyota,"
Model: "Corolla,"
Year: 2022
};
2.Constructor Function (Traditional)
It is the use of a function to create a repeatedly structured Object using the new keyword.
JavaScript
Person (name, age) {
this.name = name;
This age = age;
}
Const Alice = new Person ("Alice," 30);
3.Class Syntax (ES6)
It is a more modern and easier to read format. Use class keywords to define the structure of the Object.
JavaScript
Dog class {
Constructor (name) {
this.name = name;
}
Bark () {
console.log ('${this.name} says Woof!');
}
}
Const buddy = new Dog ("Buddy");
Property access and change
You can access the value in Object in 2 ways:
1.Dot Notation (Most Popular)
Used when the property name is definitely known.
JavaScript
console.log (person.firstName); / / Result: "Alice"
Person. Age = 31; / / Change value
2. Bracket Notation
Use when the Property name is a variable or has special characters (e.g. spacing, dashes).
JavaScript
Const key = "lastName";
console.log (person [key]); / / Result: "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 ได้ง่ายมาก