Beim Arbeiten mit JavaScript stoßen wir oft auf die Herausforderung, mehrere Objekte zusammenzuführen. Ein simples Object.assign() reicht dabei nicht immer, da es nur flach kopiert. Verschachtelte Objekte werden dabei überschrieben, anstatt rekursiv zusammengeführt. Genau hier kommen die beiden kleinen Helferlein isObject und deepMerge ins Spiel.

/**
 * Prüft auf Objekt
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

Diese Funktion prüft, ob ein Wert ein echtes Objekt ist. Arrays oder null werden ausgeschlossen – ein wichtiger Schritt, um später korrekt zu mergen.

/**
 * Zwei Objekte rekursiv zusammenfügen
 */
export function deepMerge(target, ...sources) {

  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        deepMerge(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return deepMerge(target, ...sources);
}

Wie funktioniert das?

Falls es ein primitiver Wert ist (String, Zahl, etc.), wird er einfach überschrieben.

• Parameter: target ist das Objekt, das erweitert wird. Danach folgen beliebig viele sources.
• Abbruchbedingung: Wenn keine sources mehr da sind, wird das fertige Objekt zurückgegeben.
• Rekursives Mergen: Falls ein Schlüssel im source selbst ein Objekt ist, wird in die Tiefe gegangen.

Anwendungen sind z.B. das merge bei VueUse

https://vueuse.org/core/useStorage