cloning an object vs. 'new Fn()'

JavaScript performance comparison

Revision 65 of this test case created by 1

Info

There is no quick and easy facility for cloning an object, Some people recommend using JQuery.extend others JSON.parse/stringify

http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object

If you want the fastest possible clone function. I would personally anticipate the data structure of your object and write a custom clone to handle it.

Preparation code

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    var oldObject = {
      a: 1,
      b: 2,
      c: "cat",
      d: "dog",
      e: 5,
      g: [0, 0, 0]
    };
   
    oldObject.h = {
      a: 1,
      b: 2,
      c: "cat",
      d: "dog",
      e: 5,
      g: [0, 0, 0]
    };
   
    oldObject.h.a = {
      a: 1,
      b: 2,
      c: "cat",
      d: "dog",
      e: 5,
      g: [0, 0, 0]
    };
   
    var oldObjectFn = function() {
      this.a = 1;
      this.b = 2;
      this.c = "cat";
      this.d = "dog";
      this.e = 5;
      this.g = [0, 0, 0];
    }
   
   
      function clone(obj) {
        var target = {};
        for (var i in obj) {
          if (obj.hasOwnProperty(i)) {
            if (obj[i] instanceof Object || obj[i] instanceof Array) {
              target[i] = clone(obj[i]);
            } else {
              target[i] = obj[i];
            }
          }
        }
        return target;
      }
   
    Object.defineProperties(Object, {
      'extend': {
        'configurable': true,
        'enumerable': false,
        'value': function extend(what, wit) {
          var extObj, witKeys = Object.keys(wit);
   
          extObj = Object.keys(what).length ? Object.clone(what) : {};
   
          witKeys.forEach(function(key) {
            Object.defineProperty(extObj, key, Object.getOwnPropertyDescriptor(wit, key));
          });
   
          return extObj;
        },
        'writable': true
      },
      'clone': {
        'configurable': true,
        'enumerable': false,
        'value': function clone(obj) {
          return Object.extend({}, obj);
        },
        'writable': true
      }
    });
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery.extend() deep
var newObject = jQuery.extend(true, {}, oldObject);
pending…
JSON stringify/parse
var newObject = JSON.parse(JSON.stringify(oldObject));
pending…
jQuery.extend()
var newObject = jQuery.extend({}, oldObject);
pending…
clone function
var newObject = clone(oldObject);
pending…
ES5 Object.clone
var newObject = Object.clone(oldObject);
pending…
stringify eval
var newObject = eval("(" + JSON.stringify(oldObject) + ")");
pending…
lodash extend
var newObject = _.extend({}, oldObject);
pending…
lodash merge
var newObject = _.merge({}, oldObject);
pending…
lodash clone (shallow)
var newObject = _.clone(oldObject);
pending…
lodash clone (deep)
var newObject = _.clone(oldObject, true);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Comment form temporarily disabled.

Add a comment