การเปลี่ยน Object Key โดยไม่ Mutate Array ต้นฉบับใน JavaScript

การเปลี่ยน Key ของ Object ใน Array ควรทำแบบ Immutable (ไม่เปลี่ยนข้อมูลต้นฉบับ) โดยสร้าง Array ใหม่ด้วย map() และสร้าง Object ใหม่ด้วย Spread Operator หรือ Object.fromEntries()

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rename Object Key Immutable</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  </style>
</head>
<body>
  <h1>เปลี่ยน Object Key โดยไม่ Mutate Array ต้นฉบับ</h1>
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อเปลี่ยน key "name" เป็น "fullName"</h3>
  <script>
    const BtnEle = document.querySelector(".Btn");
    const resEle = document.querySelector(".result");
    
    const original = [
      { name: "Rohan Sharma", age: 12 },
      { name: "Shawn Mendes", age: 18 },
      { name: "Michael Shaw", age: 15 },
      { name: "Mitch Johansson", age: 19 }
    ];
    
    BtnEle.addEventListener("click", () => {
      // Immutable: สร้าง Array ใหม่ Object ใหม่
      const renamed = original.map(obj => ({
        ...obj,
        fullName: obj.name,
        // name: undefined // หรือลบ key เดิม
      }));
      
      // ลบ key เดิม (Optional)
      const cleaned = renamed.map(({ name, ...rest }) => rest);
      
      console.log("Original:", original); // ไม่เปลี่ยน!
      console.log("Renamed:", cleaned);
      
      resEle.innerHTML = "ดูผลลัพธ์ใน Console (F12)";
    });
  </script>
</body>
</html>

เทคนิคการ Rename Key แบบ Immutable

const users = [{ id: 1, name: "John" }, { id: 2, name: "Jane" }];

// 1. Spread + Rest (แนะนำ - กระชับ)
const renamed = users.map(({ name, ...rest }) => ({
  ...rest,
  fullName: name
}));

// 2. Object.fromEntries + Object.entries
const renamed2 = users.map(obj => 
  Object.fromEntries(
    Object.entries(obj).map(([k, v]) => 
      k === 'name' ? ['fullName', v] : [k, v]
    )
  )
);

// 3. Reduce (สำหรับ Dynamic Keys)
const renameKey = (obj, oldKey, newKey) => 
  Object.keys(obj).reduce((acc, key) => {
    acc[key === oldKey ? newKey : key] = obj[key];
    return acc;
  }, {});

const renamed3 = users.map(u => renameKey(u, 'name', 'fullName'));

Immutable vs Mutable

ผลลัพธ์

ใน Console: Original array คงเดิม, Renamed array มี key "fullName" แทน "name"