14: Objects & JSON

โครงสร้างข้อมูลที่สำคัญที่สุดในการทำเว็บและ API

1. Object Basics

ถ้า Array คือขบวนรถไฟที่เก็บของไว้ในแต่ละตู้ โดยแต่ละตู้มีหลายเลขกำกับ

Object ก็คือ ขบวนรถไฟที่เก็บข้อมูลหลาย ๆ ตัว หลาย ๆ แบบ (ทั้งค่าของตัวแปรและการทำงานของ method) ไว้ในแต่ละตู้ โดยแต่ละตู้จะมี "ชื่อของตู้" (Key) กำกับเสมอ

โครงสร้าง (Key-Value Pair)

ประกอบด้วย key: value คั่นด้วยเครื่องหมาย comma ,

  • Property ข้อมูลทั่วไป (เช่น ชื่อ, อายุ)
  • Method ฟังก์ชันที่ฝังใน Object (ความสามารถ)
จำลองลักษณะของ Object
JS 
let user = {
    name: "Somchai",    // Property
    age: 25,
    isMember: true,
    sayHi: function() { // Method
        return "Hello " + this.name;
    }
};

// การใช้งาน (Dot Notation)
console.log(user.name);   // "Somchai"
console.log(user.sayHi());// "Hello Somchai"

// การใช้งาน (Bracket Notation) - ใช้เมื่อ Key มีวรรค
console.log(user["age"]); // 25

2. JSON (JavaScript Object Notation)

รูปแบบข้อความมาตรฐานที่ใช้ส่งข้อมูลระหว่าง Server และ Web (API)

ความต่าง Object vs JSON
JS Object JSON String
Key ไม่ต้องมี "" Key ต้องมี " " เสมอ
เก็บ Function ได้ เก็บ Function ไม่ได้
เป็นข้อมูลในแรม เป็นข้อความ (String)
คำสั่งแปลงร่าง
  • 1. JSON.stringify(obj)
    แปลง Object -> JSON String (เตรียมส่งออก)
  • 2. JSON.parse(str)
    แปลง JSON String -> Object (รับเข้า)
JS 
let data = { id: 1, title: "Learn JS" };

// 1. แปลงเป็นข้อความเพื่อส่ง Server
let jsonString = JSON.stringify(data);
console.log(jsonString); // '{"id":1,"title":"Learn JS"}'

// 2. รับข้อความมาแปลงกลับเป็น Object
let original = JSON.parse(jsonString);
console.log(original.title); // "Learn JS"

3. Modern Syntax (ES6+)

เทคนิคการเขียนโค้ดแบบสั้น ๆ ที่นิยมมากใน React

3.1 Destructuring (ระเบิดกล่อง)

ดึงค่าจาก Object ออกมาใส่ตัวแปรทีละหลายๆ ตัว

แบบเดิม (ยาว)
JS 
let name = user.name;
let age = user.age;
แบบใหม่ (Destructuring)
JS 
// สร้างตัวแปร name, age จาก user อัตโนมัติ
const { name, age } = user;
3.2 Spread Operator (...)

เครื่องมืออเนกประสงค์สำหรับ "กระจาย" ข้อมูล ใช้ได้ทั้ง Object และ Array

1. Copy และ แก้ไขค่า
JS 
let baseUser = { name: "Somchai", role: "User" };

// ก๊อปปี้ baseUser มา แล้วแก้ role เป็น Admin
let admin = { ...baseUser, role: "Admin", active: true };

console.log(admin); 
// { name: "Somchai", role: "Admin", active: true }
2. รวมร่าง Object
JS 
let info = { name: "Tony", age: 30 };
let job = { job: "Dev", salary: 50000 };

// เอา 2 ก้อนมารวมกัน
let fullProfile = { ...info, ...job };

console.log(fullProfile);
// { name: "Tony", age: 30, job: "Dev", salary: 50000 }
3. ใช้กับ Array ก็ได้
JS 
let groupA = ["Ant", "Bird"];
let groupB = ["Cat", "Dog"];

// รวม Array เข้าด้วยกัน
let zoo = [ ...groupA, ...groupB, "Elephant" ];

console.log(zoo); 
// ["Ant", "Bird", "Cat", "Dog", "Elephant"]

Workshop: Mockup Data

สร้างข้อมูลจำลอง User และตะกร้าสินค้า เพื่อเตรียมส่งให้ API

ภารกิจ:
  1. สร้าง Object user โดยมี Key เป็น id และ name
  2. สร้าง Array cart สำหรับเก็บข้อมูลสินค้า โดยภายใน cart จะมีข้อมูลแต่ละชิ้นเป็น Object ที่มี Key เป็น id และ price
  3. รวมร่างเป็น Object ใหญ่ที่เป็นตัวแปรชื่อ order
  4. แปลง order เป็น JSON เพื่อพร้อมส่ง
Practice Mission: ระบบคลังสินค้า
สถานการณ์:

คุณเป็นผู้จัดการคลังสินค้า มีข้อมูลสินค้าในสต็อก (Array of Objects) คุณต้องเขียนโปรแกรมเพื่อ เติมของ (Restock) และ เช็คของใกล้หมด (Low Stock)

1. ข้อมูลที่มี

ก๊อปปี้ไปวางใน Console

JS 
let inventory = [
    { id: 1, name: "Pen", stock: 5 },
    { id: 2, name: "Paper", stock: 50 },
    { id: 3, name: "Eraser", stock: 2 }
];
2. สิ่งที่ต้องทำ
  1. เติมของ (Restock): สร้างฟังก์ชันที่ใช้ .map() เพื่อเพิ่ม stock สินค้าทุกชิ้นขึ้นอีกชิ้นละ 10 หน่วย
  2. เช็คของขาด (Check Low): จากสต็อกใหม่ ให้ใช้ .filter() หาสินค้าที่มี stock น้อยกว่า 20
  3. รายงาน (Report): วนลูปแสดงชื่อสินค้าที่ของขาด โดยใช้ Destructuring const { name, stock } = item ในการดึงค่ามาแสดง
บทก่อนหน้า บทต่อไป