reveal.js

# Object การสร้าง Destructuring และ Spread/Rest Operator

Lesson 6 - JavaScript พื้นฐาน

---

## คำจำกัดความ

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

<pre class="mermaid">
%%{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"]
</pre>

---

## Object Literal

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

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

---

## Property Shorthand

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

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

const user = { name, age };

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

---

## Computed Property Name

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

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

const result = {
  [key]: value
};

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

---

## Object Destructuring

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

const { name, age } = user;

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

---

## Nested Destructuring และ Rename

```js
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

```js
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

```js
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

```js
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

| Operator | บริบท | ใช้ทำอะไร |
|---|---|---|
| Spread `...obj` | สร้าง object/array ใหม่ | กระจายค่าออก |
| Rest `...rest` | destructuring หรือ parameters | รวมค่าที่เหลือ |

---

## สมการจำนวน Property

<math display="block">
 <mrow>
 <mi>propertyCount</mi>
 <mo>=</mo>
 <mi>length</mi>
 <mo>(</mo>
 <mi>Object.keys</mi>
 <mo>(</mo><mi>obj</mi><mo>)</mo>
 <mo>)</mo>
 </mrow>
</math>

โดยที่ **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()` คืนค่าในรูปแบบใด

---

## End

<a href="/web-programming/04-javascript-basic/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>