Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
push vs spread
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
push1 vs Spread vs push2
Created:
7 years ago
by:
Guest
Jump to the latest result
Tests:
push1
const input = [ { type: 'a', distance: 5 }, { type: 'c', distance: 3 }, { type: 'b', distance: 6 }, { type: 'c', distance: 12 }, { type: 'b', distance: 1 }, { type: 'a', distance: 5 }, { type: 'b', distance: 6 }, { type: 'a', distance: -1 }, { type: 'c', distance: 9 }, { type: 'd', distance: 10 } ] const normalize = (arr) => arr .filter(el => el.type !== 'a' && el.distance >= 0) .reduce((acc, el) => { if (el.distance < 4) acc.near.push(el); else if (el.distance < 8) acc.medium.push(el); else if (el.distance <= 10) acc.far.push(el); return acc; }, { near:[], medium:[], far:[] })
Spread
const input = [ { type: 'a', distance: 5 }, { type: 'c', distance: 3 }, { type: 'b', distance: 6 }, { type: 'c', distance: 12 }, { type: 'b', distance: 1 }, { type: 'a', distance: 5 }, { type: 'b', distance: 6 }, { type: 'a', distance: -1 }, { type: 'c', distance: 9 }, { type: 'd', distance: 10 } ] function normalizeInput(input) { return input.reduce((accum, item) => { if (item.type !== 'a' && item.distance >= 0) if (item.distance < 4 ) accum.near = [...accum.near, item] else if (item.distance < 8 ) accum.medium = [...accum.medium, item] else if (item.distance <= 10 ) accum.far = [...accum.far, item] return accum; },{ near:[], medium:[], far:[] }) }
push2
const input = [ { type: 'a', distance: 5 }, { type: 'c', distance: 3 }, { type: 'b', distance: 6 }, { type: 'c', distance: 12 }, { type: 'b', distance: 1 }, { type: 'a', distance: 5 }, { type: 'b', distance: 6 }, { type: 'a', distance: -1 }, { type: 'c', distance: 9 }, { type: 'd', distance: 10 } ] const norm = (input) => input.reduce((acc, item) => { if (item.type !== 'a' && item.distance >= 0) if (item.distance < 4) acc.near.push(item); else if (item.distance < 8) acc.medium.push(item); else if (item.distance <= 10) acc.far.push(item); return acc; },{ near:[], medium:[], far:[] })
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
push1
Spread
push2
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll dive right in! **Benchmark Purpose** The benchmark, "push vs spread", is designed to compare the performance of three approaches: 1. `push`: Using the traditional `concat()` method with `push()` to add elements to an array. 2. `Spread` (new ES6 operator): Using the spread operator (`...`) to add elements to an array. 3. `push2` ( modified Spread ): A variation of the Spread approach, where the spread operator is used in conjunction with a custom function. **Options Compared** The benchmark compares the performance of these three approaches: * **Push**: The traditional way of adding elements to an array using `concat()` and `push()`. * **Spread**: The new ES6 spread operator (`...`) for adding elements to an array. * `push2`: A modified version of the Spread approach, where a custom function is used in conjunction with the spread operator. **Pros and Cons** Here's a brief summary: * **Push**: + Pros: Simple and widely supported. + Cons: Can be slow due to the creation of new arrays. * **Spread**: + Pros: More concise and potentially faster than traditional `concat()` and `push()`. + Cons: May not work as expected in older browsers or environments that don't support the spread operator. * `push2`: + Pros: Offers a balance between conciseness and performance, using a custom function to handle array manipulation. + Cons: May have additional overhead due to the custom function. **Library Used** None. The benchmark uses native JavaScript features only. **Special JS Features or Syntax** The spread operator (`...`) is a new feature introduced in ES6. It allows for more concise array creation and manipulation. In this benchmark, it's used to add elements to an array without creating a new array using `concat()`. **Other Alternatives** If you're looking for alternative approaches, you could consider: * Using other array methods like `slice()`, `splice()`, or `forEach()` instead of `push()`. * Utilizing libraries like Lodash or Underscore.js, which provide additional utility functions for array manipulation. * Implementing a custom array management system using a data structure like a linked list or a binary search tree. Keep in mind that these alternatives might offer different trade-offs in terms of performance, conciseness, and maintainability.
Related benchmarks:
spread operator vs push Brian
spread operator vs push Brian2
spread operator vs push
zk test spread vs push
Array push vs spread when reducing over results
Comments
Confirm delete:
Do you really want to delete benchmark?