Run results for: lodash merge vs object.assign vs spread 2

Test name	Executions per second
lodash merge	144355.1 Ops/sec
object.assign	2126084.0 Ops/sec
spread	32388.8 Ops/sec

lodash merge

var a = {
  "backgroundColor": "transparent",
  "color": "#C8C6C4",
  "borderWidth": "2px",
  "borderStyle": "solid",
  "borderColor": "transparent",
  "borderRadius": "50%",
  "height": "3.2rem",
  "minWidth": "3.2rem",
  "padding": "0",
  "cursor": "pointer",
  ":focus": {
    "outline": 0,
    "bla": true,
    "blaaaa": true
  },
  ":hover": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  },
  ":focus-visible": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "borderColor": "#A6A7DC",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  }
};
var b = {
  "backgroundColor": "transparent",
  "borderWidth": "2px",
  "borderStyle": "solid",
  "borderColor": "transparent",
  "borderRadius": "50%",
  "height": "3.2rem",
  "minWidth": "3.2rem",
  "padding": "0",
  "color": "#C8C6C4",
  "cursor": "pointer",
  ":focus": {
    "outline": 0,
    "blaaaa": true
  },
  ":hover": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  },
  ":focus-visible": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "borderColor": "#A6A7DC",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  }
};
var c = _.merge(a, b);

object.assign

var a = {
  "backgroundColor": "transparent",
  "color": "#C8C6C4",
  "borderWidth": "2px",
  "borderStyle": "solid",
  "borderColor": "transparent",
  "borderRadius": "50%",
  "height": "3.2rem",
  "minWidth": "3.2rem",
  "padding": "0",
  "cursor": "pointer",
  ":focus": {
    "outline": 0,
    "bla": true,
    "blaaaa": true
  },
  ":hover": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  },
  ":focus-visible": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "borderColor": "#A6A7DC",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  }
};
var b = {
  "backgroundColor": "transparent",
  "borderWidth": "2px",
  "borderStyle": "solid",
  "borderColor": "transparent",
  "borderRadius": "50%",
  "height": "3.2rem",
  "minWidth": "3.2rem",
  "padding": "0",
  "color": "#C8C6C4",
  "cursor": "pointer",
  ":focus": {
    "outline": 0,
    "blaaaa": true
  },
  ":hover": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  },
  ":focus-visible": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "borderColor": "#A6A7DC",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  }
};
var c = Object.assign(a, b);

spread

var a = {
  "backgroundColor": "transparent",
  "color": "#C8C6C4",
  "borderWidth": "2px",
  "borderStyle": "solid",
  "borderColor": "transparent",
  "borderRadius": "50%",
  "height": "3.2rem",
  "minWidth": "3.2rem",
  "padding": "0",
  "cursor": "pointer",
  ":focus": {
    "outline": 0,
    "bla": true,
    "blaaaa": true
  },
  ":hover": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  },
  ":focus-visible": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "borderColor": "#A6A7DC",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  }
};
var b = {
  "backgroundColor": "transparent",
  "borderWidth": "2px",
  "borderStyle": "solid",
  "borderColor": "transparent",
  "borderRadius": "50%",
  "height": "3.2rem",
  "minWidth": "3.2rem",
  "padding": "0",
  "color": "#C8C6C4",
  "cursor": "pointer",
  ":focus": {
    "outline": 0,
    "blaaaa": true
  },
  ":hover": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  },
  ":focus-visible": {
    "color": "#A6A7DC",
    "backgroundColor": "transparent",
    "borderColor": "#A6A7DC",
    "& .ui-icon__filled": {
      "display": "block"
    },
    "& .ui-icon__outline": {
      "display": "none"
    }
  }
};
/**
 * Simple object check.
 * @param item
 * @returns {boolean}
 */
function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

/**
 * Deep merge two objects.
 * @param target
 * @param ...sources
 */
function mergeDeep(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]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return mergeDeep(target, ...sources);
}
var c = mergeDeep({}, a, b);