Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Object Clone Performance: Preliminary Results

DZone's Guide to

Object Clone Performance: Preliminary Results

This article takes a look at comparing the fastest ways to clone object in JavaScript. Read on for the results, and feel free to suggest other methods.

· Performance Zone ·
Free Resource

xMatters delivers integration-driven collaboration that relays data between systems, while engaging the right people to proactively resolve issues. Read the Monitoring in a Connected Enterprise whitepaper and learn about 3 tools for resolving incidents quickly.

Spurred by debate on A Puzzle in JavaScript objects, I wanted to find the best way to clone objects in JavaScript. In this scenario, “best” means “fastest on average”.

I’m using the dataset from this visualization on H1B salaries as a quick way to build many objects. The dataset contains 81,123 objects with 9 keys each.

The experiment is set up like this:

  • load and parse data
  • run clone experiments in series
  • each experiment makes 10 deep copies of the dataset
  • “deep” is allowed to mean just the 2 levels required (objects in array don’t contain more objects)
  • present average runtime of each clone

Each individual experiment uses this runner:

runner(name, method) {
        const times = d3.range(0, this.N).map(() => {
            const t1 = new Date();

            let copy = method(this.state.data);

            const t2 = new Date();
            return t2 - t1;
        });

        let results = this.state.results;
        results.push({name: name,
                      avg: d3.mean(times)});

        this.setState({results: results});
    }

If you spot a problem with that setup, tell me.

Preliminary results, running on my laptop in Chrome 53, are a bit strange. Iterating through the array and doing Object.assign is fastest, and _.cloneDeep is slowest.

I want to add a more context-aware Lodash approach, Immutable.js, and a few different browsers. Then make some graphs

What’s your favorite way to clone objects in JavaScript? I’ll add it to the test.

Discovering, responding to, and resolving incidents is a complex endeavor. Read this narrative to learn how you can do it quickly and effectively by connecting AppDynamics, Moogsoft and xMatters to create a monitoring toolchain.

Topics:
experiment ,web ,objects ,javascript ,browsers ,lodash ,comparison ,performance

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}