การเปลี่ยนชื่อ Property ใน Array of Objects ด้วย JavaScript

การ Rename Property ใน Array of Objects ทำได้โดยใช้ map() สร้าง Object ใหม่ด้วย Property Name ใหม่ วิธีนี้เป็น Immutable (ไม่เปลี่ยนข้อมูลต้นฉบับ)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rename Property</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>เปลี่ยนชื่อ Property ใน Array of Objects</h1>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อเปลี่ยน Property name ของ Object ใน Array</h3>
  <script>
    const BtnEle = document.querySelector(".Btn");
    const resEle = document.querySelector(".result");
    
    let persons = [
      { name: "Rohan Sharma", age: 16 },
      { name: "Vinit Mehta", age: 18 }
    ];
    
    // Immutable: สร้าง Array ใหม่ Object ใหม่
    persons = persons.map(item => ({
      fullName: item.name,  // Rename: name -> fullName
      age: item.age
    }));
    
    BtnEle.addEventListener("click", () => {
      persons.forEach(item => {
        resEle.innerHTML += `fullName = ${item.fullName} : Age = ${item.age}<br>`;
      });
    });
  </script>
</body>
</html>

เทคนิค Rename Property แบบต่างๆ

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

// 1. Map + Spread + Rest (แนะนำ - Dynamic)
const renamed = users.map(({ name, ...rest }) => ({
  ...rest,
  fullName: name
}));

// 2. Map + Manual (Explicit)
const renamed2 = users.map(u => ({
  id: u.id,
  fullName: u.name
}));

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

// 4. For Loop (Mutable - เปลี่ยนต้นฉบับ)
for (const user of users) {
  user.fullName = user.name;
  delete user.name;
}

Rename หลาย Key พร้อมกัน

const keyMap = { name: 'fullName', age: 'yearsOld' };
const renamed = users.map(obj => 
  Object.fromEntries(
    Object.entries(obj).map(([k, v]) => [keyMap[k] || k, v])
  )
);

ผลลัพธ์

fullName = Rohan Sharma : Age = 16, fullName = Vinit Mehta : Age = 18