Object (ออบเจกต์)

Object คือ "แฟ้มประวัติ"

ถ้า array เก็บข้อมูลแบบ ลำดับ (ตำแหน่ง 0,1,2...) Object เก็บข้อมูลแบบ มีคุณสมบัติ (ชื่อบอกหน้าที่)

เหมาะกับการเก็บข้อมูลที่อธิบาย "สิ่งของหนึ่ง" เช่น คน, สินค้า, บทความ

สร้าง Object

let user = {
  name: "สมชาย",
  age: 25,
  isAdmin: true
};

• ใช้วงเล็บปีกกา { }
• แต่ละคุณสมบัติเป็นคู่ key: value
• คั่นด้วยจุลภาค ,

อ่านค่า

let user = { name: "สมชาย", age: 25 };

console.log(user.name);      // สมชาย   (ใช้จุด)
console.log(user["age"]);    // 25      (ใช้วงเล็บเหลี่ยม)

💡 ใช้จุด . เป็นหลัก ใช้ [] เมื่อชื่อ key มาจากตัวแปร

เปลี่ยน/เพิ่มค่า

let user = { name: "สมชาย" };

user.age = 26;            // เปลี่ยนค่า
user.email = "a@b.com";   // เพิ่มคุณสมบัติใหม่

console.log(user);
// { name: "สมชาย", age: 26, email: "a@b.com" }

Object ซ้อน Object

ข้อมูลจริงมักซับซ้อน สามารถซ้อนกันได้:

let product = {
  name: "รองเืบาะ",
  price: 1990,
  details: {
    color: "ดำ",
    sizes: [38, 39, 40, 41]
  }
};

console.log(product.details.color);        // ดำ
console.log(product.details.sizes[1]);     // 39

เก็บฟังก์ชันใน Object (Method)

let user = {
  name: "สมชาย",
  greet() {
    console.log("สวัสดี ผม " + this.name);
  }
};

user.greet();   // สวัสดี ผม สมชาย

ฟังก์ชันใน object เรียกว่า method คำว่า this หมายถึง object ตัวเอง

วนลูปดูคุณสมบัติทั้งหมด: for...in

let user = { name: "สมชาย", age: 25, city: "กทม." };

for (let key in user) {
  console.log(key + " = " + user[key]);
}
// name = สมชาย
// age = 25
// city = กทม.

ลิสต์ key/value: Object.keys / values

let user = { name: "สมชาย", age: 25 };

console.log(Object.keys(user));    // ["name", "age"]
console.log(Object.values(user));  // ["สมชาย", 25]

Array ของ Object (ใช้บ่อยมากในงานจริง!)

เช่น รายการสินค้า, รายชื่อผู้ใช้:

let products = [
  { name: "กาแฟ", price: 80 },
  { name: "ชา", price: 60 },
  { name: "โก๊ะ", price: 50 }
];

// หาราคารวม
let total = products.reduce((sum, p) => sum + p.price, 0);
console.log(total);   // 190

// หาสินค้าที่ราคาต่ำกว่า 70
let cheap = products.filter(p => p.price < 70);
console.log(cheap);   // [{ ชา... }, { โก๊ะ... }]

ลองทำจริง: แสดงข้อมูลลูกค้า

function showUser(user) {
  console.log(`ชื่อ: ${user.name}`);
  console.log(`อายุ: ${user.age}`);
  console.log(`เป็นแอดมิน: ${user.isAdmin ? "ใช่" : "ไม่ใช่"}`);
}

let customer = {
  name: "มาลี",
  age: 30,
  isAdmin: false
};

showUser(customer);

Destructuring (สกัดค่าแบบสั้น)

let user = { name: "สมชาย", age: 25 };

const { name, age } = user;
console.log(name);   // สมชาย
console.log(age);    // 25

Array vs Object — เลือกอันไหน?

สรุป

• Object = เก็บข้อมูลเป็นคู่ key: value
• อ่านด้วย .key หรือ ["key"]
• ซ้อนกันได้ (object ใน object, array ใน object)
• Array ของ object = รูปแบบข้อมูลที่ใช้บ่อยที่สุดในงานจริง

จบโมดูล "ข้อมูล" แล้ว! บทหน้าเราจะเริ่มทำเว็บจริง ด้วย HTML 🏗️