การ Merge (รวม) สอง JavaScript Objects

การรวม Object 2 ตัวใน JavaScript ทำได้หลายวิธี ทั้งแบบ Mutate (เปลี่ยนต้นฉบับ) และ Immutable (สร้างใหม่) วิธี Modern ที่สุดคือ Spread Operator

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Merge Objects</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>Merge สอง JavaScript Objects</h1>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อ Merge person และ address object</h3>
  <script>
    const BtnEle = document.querySelector(".Btn");
    const resEle = document.querySelector(".result");
    
    const person = { name: "Rohan", age: 22 };
    const address = { state: "Delhi", country: "India" };
    
    // Spread Operator (ES2018) - Immutable, สร้าง Object ใหม่
    const mergedObj = { ...person, ...address };
    
    BtnEle.addEventListener("click", () => {
      for (let key in mergedObj) {
        resEle.innerHTML += `Key = ${key} : Value = ${mergedObj[key]}<br>`;
      }
    });
  </script>
</body>
</html>

วิธี Merge Objects ทั้งหมด

วิธี	Code	Mutates?	รองรับ	หมายเหตุ
Spread (แนะนำ)	`{ ...obj1, ...obj2 }`	❌	ES2018+	สั้น กระชับ Immutable
Object.assign	`Object.assign({}, obj1, obj2)`	❌ (ถ้า target = {})	ES2015+	รองรับได้หลาย Object
Object.assign (Mutate)	`Object.assign(obj1, obj2)`	✅ obj1	ES2015+	เปลี่ยน obj1 ต้นฉบับ
Spread + Override	`{ ...obj1, ...obj2, key: newVal }`	❌	ES2018+	Override ได้ในบรรทัดเดียว

Deep Merge (Nested Objects)

// Shallow Merge - Nested Object ยัง Share Reference!
const a = { user: { name: "John", age: 30 } };
const b = { user: { age: 31, city: "NYC" } };
const merged = { ...a, ...b };
// merged.user = { age: 31, city: "NYC" } - name หายไป!

// Deep Merge - ต้องเขียนเองหรือใช้ Library
// Lodash: _.merge(a, b)
// Custom:
function deepMerge(target, source) {
  const result = { ...target };
  for (const key of Object.keys(source)) {
    if (source[key] instanceof Object && key in target) {
      result[key] = deepMerge(target[key], source[key]);
    } else {
      result[key] = source[key];
    }
  }
  return result;
}

ผลลัพธ์

Key = name : Value = Rohan, Key = age : Value = 22, Key = state : Value = Delhi, Key = country : Value = India