Benchmark: Lodash clone VS spread operator shallow

HTML Preparation code:

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

Script Preparation code:

var MyObject = {
  description: 'a',
  myNumber: 123456789,
  myBoolean: true,
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.clone(MyObject);
Spread operator
myCopy = {...MyObject};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Linux

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	2780196.0 Ops/sec
Spread operator	11397504.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 provided JSON data and explain what's being tested, compared, and discussed.

**Benchmark Definition**

The benchmark is testing two approaches to create a shallow copy of an object: using Lodash's `clone()` function (`Lodash cloneDeep`) and using the spread operator (`Spread operator`).

**Script Preparation Code**

The script preparation code creates a simple JavaScript object `MyObject` with three properties: `description`, `myNumber`, and `myBoolean`. The variable `myCopy` is declared but not initialized.

**Html Preparation Code**

The HTML preparation code includes a link to the Lodash library (`https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js`) which will be used in the script.

**Individual Test Cases**

There are two test cases:

1. **Lodash cloneDeep**: This test case uses the `clone()` function from Lodash to create a shallow copy of `MyObject`. The expected output is that `myCopy` will have the same properties as `MyObject`.
2. **Spread operator**: This test case uses the spread operator (`{...}`) to create a shallow copy of `MyObject`. The expected output is that `myCopy` will have the same properties as `MyObject`.

**Pros and Cons**

1. **Lodash cloneDeep**:
	* Pros: Easy to use, concise syntax.
	* Cons: Requires an external library (Lodash), may not be suitable for all scenarios (e.g., modifying the original object).
2. **Spread operator**:
	* Pros: Native JavaScript syntax, easy to read and write, does not require an external library.
	* Cons: May not work as expected in older browsers or versions of Internet Explorer, can lead to unintended side effects if not used carefully.

**Library Usage**

Lodash is a popular utility library for JavaScript that provides a wide range of functions for tasks such as array manipulation, object transformation, and functional programming. In this benchmark, Lodash's `clone()` function is used to create a shallow copy of the object.

**Special JS Feature/Syntax**

The spread operator (`{...}`) was introduced in ECMAScript 2018 (ES2018). It allows creating a new object by taking an existing object as an argument. This syntax can be used to create a shallow copy of an object by spreading its properties into a new object.

**Other Alternatives**

If you prefer not to use Lodash or the spread operator, there are other ways to create a shallow copy of an object in JavaScript:

1. **Object.assign()**: Assigns values from one or more source objects to a destination object.
2. **Array.prototype.slice() + Object.assign()**: Creates a new array by slicing an existing array and then assigning its properties to a new object using `Object.assign()`.

For example:
```javascript
var myCopy = Object.assign({}, MyObject);
```
Or:
```javascript
var myCopy = Array.prototype.slice.call(MyObject).reduce((acc, val) => ({ ...acc, [val]: val }), {});
```
These alternatives may have different performance characteristics or be less readable than the Lodash clone function or spread operator.

Related benchmarks:

Lodash clone VS spread operator shallow (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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