Benchmark: lodash chunk vs splice

HTML Preparation code:

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

Script Preparation code:

var data = [{
  type: 'aaa',
  data: [1, 2, 3, 4, 5, 6, 7],
}, {
  type: 'bbb',
  data: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
}];

Tests:

chunk
var chunkTableConfig = (conf, grade) => { const chunkLength = Math.ceil(conf[0].data.length / grade); return conf.reduce((acc, cur, curI) => { const chunkedData = _.chunk(cur.data, chunkLength); acc.forEach((_el, elI) => { acc[elI][curI] = {...cur, data: chunkedData[elI]}; }); return acc; }, new Array(grade).fill(null).map(_ => [])); }; chunkTableConfig(data, 2);
splice
var chunkTableConfig = (conf, grade) => { const chunkLength = Math.ceil(conf[0].data.length / grade); return conf.reduce((acc, cur, curI) => { const shallowCopy = [...cur.data]; acc.forEach((_el, elI) => { acc[elI][curI] = {...cur, data: shallowCopy.splice(0, chunkLength)}; }); return acc; }, new Array(grade).fill(null).map(_ => [])); }; chunkTableConfig(data, 2);

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

chunk

5.7M/s

splice

4.6M/s

Fastest: chunk (1.2x faster)

View exact numbers

✓ chunk: 5,684,443 ops/sec
• splice: 4,619,072 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
chunk
splice

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0

Browser/OS: Chrome 141 on Windows

View result in a separate tab

chunk

3.3M/s

splice

2.8M/s

View exact numbers

Test name	Executions per second
✓ chunk	3,295,994 Ops/sec
splice	2,789,839 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition and Script Preparation Code**

The provided benchmark is comparing two approaches for chunking data: `lodash.chunk` (also known as "chunk") and using `Array.prototype.splice`. The script preparation code defines a sample dataset, `data`, which consists of two objects with array-like properties (`type` and `data`). The HTML preparation code includes a reference to the latest version of Lodash.

**Individual Test Cases**

There are two test cases:

1. **chunk**: This test case uses the `lodash.chunk` function to chunk the data into arrays of a specified length (determined by the `grade` parameter). It creates a shallow copy of each array using `Array.prototype.slice`, but then replaces the original array with a new one containing the first `chunkLength` elements using `_.chunk`.
2. **splice**: This test case uses `Array.prototype.splice` to chunk the data into arrays of a specified length (determined by the `grade` parameter). It creates an empty array for each chunk and then replaces the original array with a new one containing the first `chunkLength` elements, which are extracted using `splice`.

**Pros and Cons of Each Approach**

1. **lodash.chunk**: Pros:
	* More readable and maintainable code (using Lodash's utility function)
	* Less prone to errors due to its well-documented API
	* Can be more efficient in some cases, as it avoids unnecessary array operations

Cons:
	* Requires an external library (Lodash) which may introduce additional overhead or dependencies
2. **Array.prototype.splice**: Pros:
	* Only uses native JavaScript methods, which can be more efficient and have lower overhead
	* No external libraries are required

Cons:
	* Code can be less readable and maintainable due to its concise but complex implementation
	* More prone to errors, especially when dealing with edge cases or large datasets

**Library: _**

In the `chunk` test case, `_` is a reference to the Lodash library. The purpose of this library is to provide utility functions for various tasks, such as array manipulation and data processing.

**Special JS Feature/Syntax**

Neither of the provided test cases uses any special JavaScript features or syntax that would make it difficult for software engineers without deep knowledge of JavaScript to understand. However, the use of `Array.prototype.slice` in the `chunk` test case is a good example of using a native JavaScript method for array manipulation.

**Other Alternatives**

If you want to implement chunking data manually, you could also consider using other approaches, such as:

* Using `Array.prototype.reduce()` to iterate over the data and create chunks
* Creating a custom function that uses a loop to extract elements from the original array
* Utilizing libraries like `pandas.js` (a JavaScript port of pandas) which has built-in support for chunking arrays

lodash chunk vs splice (version: 0) Benchmark.js

Comparing performance of: `chunk vs splice`

Created: 3 years ago by: Guest

Go to the latest result

chunk

splice

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

lodash chunk vs splice (version: 0) Benchmark.js

Comparing performance of: chunk vs splice

Created: 3 years ago by: Guest

Go to the latest result

chunk

splice

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `chunk vs splice`