หัวข้อ 6: Object การสร้าง Destructuring และ Spread/Rest Operator

คำจำกัดความ

Object คือโครงสร้างข้อมูลแบบ key-value ใช้เก็บข้อมูลที่มีคุณสมบัติหลายอย่าง เช่น ผู้ใช้ สินค้า บทเรียน หรือ config ของระบบ

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart TD
  A["Object
ข้อมูลแบบ key-value"] --> B["Property
คุณสมบัติ"]
  A --> C["Destructuring
แยกค่าออกมา"]
  A --> D["Spread
คัดลอก/รวม object"]
  A --> E["Object Methods
keys values entries"]

Object Literal

const user = {
  name: "Ana",
  age: 20,
  active: true
};

console.log(user.name); // Ana
console.log(user["age"]); // 20

Property Shorthand

ถ้าชื่อตัวแปรและชื่อ property เหมือนกัน สามารถเขียนสั้นได้

const name = "Ana";
const age = 20;

const user = { name, age };

console.log(user); // { name: "Ana", age: 20 }

Computed Property Name

ใช้ตัวแปรเป็นชื่อ property ได้

const key = "score";
const value = 95;

const result = {
  [key]: value
};

console.log(result.score); // 95

Object Destructuring

const user = {
  name: "Ana",
  age: 20,
  role: "student"
};

const { name, age } = user;

console.log(name); // Ana
console.log(age); // 20

Nested Destructuring และ Rename

const user = {
  name: "Ana",
  profile: {
    email: "ana@example.com"
  }
};

const {
  name: userName,
  profile: { email }
} = user;

console.log(userName); // Ana
console.log(email); // ana@example.com

Spread Operator

Spread Operator ใช้คัดลอกหรือรวม object

const user = { name: "Ana", age: 20 };

const updatedUser = {
  ...user,
  age: 21,
  extra: "value"
};

console.log(updatedUser); // { name: "Ana", age: 21, extra: "value" }

Rest Operator ใน Object

const user = {
  id: 1,
  name: "Ana",
  age: 20,
  role: "student"
};

const { id, ...profile } = user;

console.log(id); // 1
console.log(profile); // { name: "Ana", age: 20, role: "student" }

Object Methods

const course = {
  code: "WEB101",
  title: "Web Programming",
  credits: 3
};

console.log(Object.keys(course)); // ["code", "title", "credits"]
console.log(Object.values(course)); // ["WEB101", "Web Programming", 3]
console.log(Object.entries(course)); // [["code", "WEB101"], ...]

const copied = Object.assign({}, course, { credits: 4 });
console.log(copied);

ตารางเปรียบเทียบ Spread และ Rest

สมการจำนวน Property

โดยที่ propertyCount คือจำนวน property ใน object, Object.keys(obj) คือ array ของ key ทั้งหมด, และ obj คือ object ที่ต้องการนับ

แบบทดสอบหลังเรียน

1. Object Literal คืออะไร
2. Property Shorthand ใช้เมื่อใด
3. Computed Property Name มีประโยชน์อย่างไร
4. Destructuring ช่วยลดโค้ดอย่างไร
5. Object.entries() คืนค่าในรูปแบบใด

กลับสัปดาห์ที่ 4