Benchmark: Lodash clone vs concat vs unshift vs stringify vs slice vs while loop

HTML Preparation code:

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

Script Preparation code:

var testArray = [{
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
},{
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
}];

var testCopy = null;

Tests:

Lodash clone
testCopy = _.clone(testArray);
Native concat
testCopy = [].concat(testArray);
Native unshift
testCopy = []; for (var i = testArray.length; i--;) { testCopy.unshift(testArray[i]); }
Native Stringify
testCopy = JSON.parse(JSON.stringify(testArray));
Native slice
testCopy = testArray.slice();
Native slice at 0
testCopy = testArray.slice(0);
While Loop
testCopy = []; i = testArray.length; while(i--) testCopy[i] = testArray[i];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash clone
Native concat
Native unshift
Native Stringify
Native slice
Native slice at 0
While Loop

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is an essential task for any developer, especially when comparing the efficiency of different libraries and built-in functions.

The provided benchmark measures the execution speed of various methods to create a shallow copy of an array:

1.  **Lodash clone**: The Lodash library provides a `clone` function that creates a deep copy of an object or array. In this benchmark, it's used to create a shallow copy of the test array.
2.  **Native concat**: This method uses the `concat` function to concatenate two arrays and returns a new array with the elements from both arrays.
3.  **Native unshift**: This method adds one or more elements to the beginning of an array and returns the length of the array after modification.
4.  **Native stringify**: Although not exactly an array operation, this method converts an object to a string using `JSON.stringify`. In this context, it's used to create a shallow copy by converting the test array to a JSON string.
5.  **Native slice**: This method creates a new array containing selected elements from an existing array.
6.  **While Loop**: A custom implementation using a while loop to iterate through the array and assign each element to a new array.

Let's break down the pros and cons of each approach:

*   **Lodash clone**:
    *   Pros: Easy to use, provides a reliable way to create deep copies.
    *   Cons: Adds extra overhead due to the library's functionality.
*   **Native concat**:
    *   Pros: Fast and lightweight, no additional dependencies required.
    *   Cons: Requires two arrays as input and can be less efficient for large datasets.
*   **Native unshift**:
    *   Pros: Simple and easy to understand, suitable for small arrays.
    *   Cons: Requires modifying the original array and can be slower for larger datasets.
*   **Native stringify**:
    *   Pros: Quick and simple, doesn't require any additional library dependencies.
    *   Cons: Creates a string representation of the array, which may not be what's desired. Also, it's not suitable for large arrays due to memory constraints.
*   **Native slice**:
    *   Pros: Fast and efficient, suitable for most use cases.
    *   Cons: May require extra memory allocation for large datasets.

The while loop implementation:

*   Pros: Customizable and can be optimized for specific use cases.
*   Cons: Requires manual iteration and indexing, which can be error-prone and slower than native methods.

Other alternatives to consider:

*   **Array.prototype.copyWithin()**: A more modern method that creates a shallow copy of an array by assigning the elements from another array to a subset of the original array. While it's not implemented in older browsers, it's worth considering for future-proofing.
*   **Array.from() and spread operator**: These methods can be used to create arrays from iterable objects or expand arrays into separate elements. However, they may have performance implications due to the creation of intermediate data structures.

When choosing an approach, consider the specific requirements of your use case, such as performance, memory constraints, and compatibility with different browsers or environments.

Latest run results:

Run details: (Test run date: 5 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36

Browser/OS: Chrome 71 on Windows 7

View result in a separate tab

Test name	Executions per second
Lodash clone	1402855.4 Ops/sec
Native concat	1527690.1 Ops/sec
Native unshift	825742.9 Ops/sec
Native Stringify	87864.1 Ops/sec
Native slice	2623511.0 Ops/sec
Native slice at 0	2443666.8 Ops/sec
While Loop	878795.9 Ops/sec

Related benchmarks:

Lodash clone vs concat vs unshift vs stringify vs slice vs while loop (version: 13)

compare shallow array copy/clone methods

Comparing performance of: Lodash clone vs Native concat vs Native unshift vs Native Stringify vs Native slice vs Native slice at 0 vs While Loop

Created: 5 years ago by: Registered User

Jump to the latest result

Lodash clone

Native concat

Native unshift

Native Stringify

Native slice

Native slice at 0

While Loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):