Benchmark: for vs. object.assign vs spread vs. lodash.clone

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var obj =  {
        "tid": 1
    };

Tests:

for
var copy = {}; for (const k in obj) { copy[k] = obj[k]; }
object.assign
var c = Object.assign({}, obj);
spread
var copy = { ...obj };
lodash clone
var c = _.clone(obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
object.assign
spread
lodash clone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	89331232.0 Ops/sec
object.assign	64473020.0 Ops/sec
spread	64580908.0 Ops/sec
lodash clone	21417430.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Purpose**

The benchmark measures the performance of different approaches to create a shallow copy of an object: using a `for` loop, `Object.assign()`, the spread operator (`...`), and Lodash's `clone()` function.

**Options Compared**

There are four options being compared:

1. **For Loop**: Uses a `for` loop to iterate over the object's properties and create a new object with the same values.
2. **Object.assign()**: Uses the `Object.assign()` method to create a shallow copy of the original object.
3. **Spread Operator**: Uses the spread operator (`...`) to create a new object with the same values as the original object.
4. **Lodash.clone()**: Uses Lodash's `clone()` function to create a shallow copy of the original object.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **For Loop**:
	* Pros: Simple, straightforward implementation, no dependencies on external libraries.
	* Cons: Can be slower due to the overhead of the loop, especially for large objects.
2. **Object.assign()**: Pros: Fast, widely supported, and easy to use. Cons: May not work as expected if the original object is modified after creation.
3. **Spread Operator**:
	* Pros: Simple, fast, and modern syntax.
	* Cons: Requires JavaScript 2015 or later, may not work in older browsers.
4. **Lodash.clone()**: Pros: Fast, widely supported, and easy to use. Cons: Adds an external dependency on Lodash.

**Other Considerations**

* The benchmark uses a simple object with a single property (`tid`) for testing. In practice, objects can have many properties and nested structures, which may affect performance.
* The benchmark does not consider the size of the original object, which could impact performance.
* There is no consideration for the performance difference between shallow and deep copying.

**Library Usage**

Lodash's `clone()` function is used to create a shallow copy of the original object. Lodash is a popular JavaScript library that provides utility functions for tasks like cloning, merging, and iterating over objects.

**Special JS Features or Syntax**

There are no special JS features or syntax mentioned in the benchmark definition or test cases. The focus is on comparing different approaches to create a shallow copy of an object.

Now, regarding alternatives, here are a few options:

1. **Array.prototype.slice()**: Instead of using `Object.assign()` or the spread operator, you could use `Array.prototype.slice()` to create a shallow copy of an array.
2. **JSON.parse(JSON.stringify(obj))**: You could also use JSON parsing and stringification to create a deep copy of an object (not shallow).
3. **Underscore.js**: Another popular JavaScript library that provides utility functions for tasks like cloning, merging, and iterating over objects.

These alternatives are not included in the benchmark, but they demonstrate other approaches to creating copies of objects in JavaScript.

Related benchmarks:

for vs. object.assign vs spread vs. lodash.clone (version: 1)

Comparing performance of: for vs object.assign vs spread vs lodash clone

Created: 5 years ago by: Registered User

Jump to the latest result

for

object.assign

spread

lodash clone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):