const arr1 = [ { name: 'hello', id: '1' }, { name: 'hi', id: '2' }, { name: 'welcome', id: '100' } ];
const arr2 = [ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ].concat(arr1);
const arr1 = [ { name: 'hello', id: '1' }, { name: 'hi', id: '2' }, { name: 'welcome', id: '100' } ];
const arr2 = [ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' }, arr1 ];
const arr1 = [ { name: 'hello', id: '1' }, { name: 'hi', id: '2' }, { name: 'welcome', id: '100' } ];
const arr2 = arr1.slice();
arr2.push(1);
arr2.push(2);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Array.prototype.concat | |
spread operator | |
Push |
Test name | Executions per second |
---|---|
Array.prototype.concat | 4353354.5 Ops/sec |
spread operator | 12507246.0 Ops/sec |
Push | 15740506.0 Ops/sec |
Let's break down the provided benchmark and explain what is being tested.
The benchmark compares three ways to concatenate arrays of objects:
Array.prototype.concat()
: This method takes two or more arrays as arguments and returns a new array that contains all elements from the original arrays....
): This is a syntax introduced in ES6 that allows for spreading an iterable (like an array) into multiple places, including function calls and object literals.slice()
and push()
: This method uses the slice()
method to create a shallow copy of the original array and then modifies it by pushing new elements onto it.Options compared:
...
)...
) vs slice and pushPros and Cons:
Pros:
Cons:
concat()
method, which can be slower than other methods in some cases....
):Pros:
Cons:
Pros:
concatArray()
or pushArray()
in V8.Cons:
slice()
method and then pushing elements onto it, which might be slower than other methods due to function call overhead.Library usage:
There is no explicit library mentioned in the provided benchmark definition. However, some parts of JavaScript engines like V8 (used by Chrome) use internal libraries for performance optimizations.
Special JS feature or syntax:
The spread operator (...
) was introduced in ES6 and has become a standard part of modern JavaScript. It's designed to make it easier to work with iterables and create new arrays from them.
If you're interested in exploring other alternatives, here are some:
reduce()
: This method can be used as an alternative for concatenating arrays.Array.from()
: Another method that creates a new array from an iterable. It might offer better performance than concat()
or spread operator for certain use cases.Here is an example of how you could write the individual test cases using these alternatives:
// concat()
const arr1 = [ { name: 'hello', id: '1' }, { name: 'hi', id: '2' }, { name: 'welcome', id: '100' } ];
const arr2 = Array.prototype.concat.call(null, [ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ], arr1);
// spread operator
arr1.forEach(item => arr2.push(item));
// reduce()
let result = [];
arr1.forEach(item => {
result = result.concat([item]);
});
result.push(...[ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ]);
// array.from()
const arr3 = Array.from([], (item) => item);
arr3.push('...');
// from
const arr4 = Array.from([ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ], item => item);
// array.from() vs reduce()
const result5 = [];
arr1.forEach(item => {
result5.push(item);
});
result5.push(...[ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ]);