วิธี Merge Properties ของ JavaScript Objects แบบ Dynamic

Merge Object Properties แบบ Dynamic

1. Object.assign() (ES2015)

Copy Properties จาก Source(s) ไป Target (Mutate Target)

<script>
  const target = {a: 'ram', b: 'rahim'};
  const source = {c: 'akbar', d: 'anthony'};
  
  const returned = Object.assign(target, source);
  console.log(target);    // {a: 'ram', b: 'rahim', c: 'akbar', d: 'anthony'}
  console.log(returned);  // Same Reference as target
</script>

Duplicate Keys: Later Wins

const target = {a: 'ram', b: 'rahim'};
const source = {b: 'akbar', d: 'anthony'};
Object.assign(target, source);
// {a: 'ram', b: 'akbar', d: 'anthony'} // b ถูก Overwrite

2. Spread Operator (ES2018) - แนะนำ (Immutable)

<script>
  const target = {a: 'ram', b: 'rahim'};
  const source = {b: 'akbar', d: 'anthony'};
  
  const merged = {...target, ...source};
  console.log(merged); // {a: 'ram', b: 'akbar', d: 'anthony'}
  console.log(target); // {a: 'ram', b: 'rahim'} - Unchanged!
</script>

3. Deep Merge (Nested Objects)

ทั้งสองข้างบนเป็น Shallow Merge ต้องเขียนเองหรือใช้ Library

// Simple Deep Merge
function deepMerge(target, source) {
  const result = {...target};
  for (const key of Object.keys(source)) {
    if (isObject(source[key]) && isObject(target[key])) {
      result[key] = deepMerge(target[key], source[key]);
    } else {
      result[key] = source[key];
    }
  }
  return result;
}

const isObject = x => x !== null && typeof x === 'object' && !Array.isArray(x);

4. Library: Lodash merge

import { merge } from 'lodash';
const merged = merge({}, target, source); // Deep Merge

สรุป