MeasureThat.net

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

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
Chrome 76
Windows
Desktop
5 years ago
Test name Executions per second
lodash merge 99744.7 Ops/sec
object.assign 44003.6 Ops/sec
spread 31015.5 Ops/sec
HTML Preparation code:
AخA
 
1
<script src='https://unpkg.com/deepmerge@4.0.0/dist/umd.js'></script>
2
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Tests:

  • 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 = deepmerge(a, b);

  • spread

    ​x
     
    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);