Keyed Collections ใน JavaScript (Map และ Set)

Keyed Collections คือโครงสร้างข้อมูลที่จัดเก็บข้อมูลด้วย Key-Value Pair และเรียงลำดับตาม Insertion Order หลักๆ มี 2 ตัว: Map และ Set (ES2015+)

ตัวอย่างโค้ด (Basic Object Iteration)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Keyed Collections</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: blueviolet; }
  </style>
</head>
<body>
  <h1>Keyed Collections ใน JavaScript</h1>
  <div class="result"></div>
  <br />
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อสร้างและแสดง Object</h3>
  <script>
    const resEle = document.querySelector(".result");
    const BtnEle = document.querySelector(".Btn");
    
    BtnEle.addEventListener("click", () => {
      const obj = {
        name: "Rohan",
        age: 22,
        occupation: "Student"
      };
      
      for (let key in obj) {
        resEle.innerHTML += `key = ${key} : value = ${obj[key]}<br>`;
      }
    });
  </script>
</body>
</html>

Map - Keyed Collection จริงจัง

// สร้าง Map
const map = new Map([
  ["name", "Rohan"],
  ["age", 22],
  ["occupation", "Student"]
]);

// Operations
map.set("city", "Bangkok");        // เพิ่ม/แก้ไข
map.get("name");                   // "Rohan" (O(1))
map.has("age");                    // true
map.delete("occupation");          // ลบ
map.size;                          // 3
map.clear();                       // ลบทั้งหมด

// Iteration (Insertion Order Guaranteed)
for (const [key, value] of map) {
  console.log(key, value);
}
map.forEach((value, key) => { ... });

// Keys, Values, Entries
map.keys();    // MapIterator {"name", "age", "city"}
map.values();  // MapIterator {"Rohan", 22, "Bangkok"}
map.entries(); // MapIterator {["name", "Rohan"], ...}

Set - Unique Values Collection

// สร้าง Set
const set = new Set([1, 2, 2, 3, 3, 3]); // {1, 2, 3} - Auto Unique

// Operations
set.add(4);           // เพิ่ม
set.has(2);           // true (O(1))
set.delete(3);        // ลบ
set.size;             // 3
set.clear();          // ลบทั้งหมด

// Iteration
for (const value of set) { ... }
set.forEach(value => { ... });

// Set Operations (Math-like)
const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);

// Union
new Set([...a, ...b]);           // {1,2,3,4,5}

// Intersection
new Set([...a].filter(x => b.has(x))); // {3}

// Difference
new Set([...a].filter(x => !b.has(x))); // {1,2}

Map vs Object vs Set

WeakMap และ WeakSet

• Keys ต้องเป็น Objects เท่านั้น
• Weak Reference - ไม่ป้องกัน Garbage Collection
• ไม่มี .size, .clear(), ไม่ Iterable
• ใช้สำหรับ Private Data, Caching, Metadata

ผลลัพธ์

key = name : value = Rohan, key = age : value = 22, key = occupation : value = Student