concat and
push are common methods to append one
or more items to a given array.
Differences
The concat
method does not change the existing array:
const shapes = ['Triangle', 'Square'];
shapes.concat(['Circle', 'Rectangle']);
shapes;
The push
method on the other hand modifies the original array.
const animals = ['cat', 'dog', 'mouse'];
animals.push('bird', 'cow');
animals;
In the sample code above, both methods produces different results. concat
returns a new array while push
returns the length of updated array.
Because concat
creates a new array to hold the result of merged arrays, it's slower than push
.
For small arrays, both methods do not produce a significant difference in term of performance.
But if you have to work with big array and performance is the critical thing to your application, then consider using push
.
Good to know
If you use React or a state management library such as Redux, where we do not modify the current state and returns the new state on each reducer,
it's good use case for using concat
.
The function copies items from array source
to dest
by splitting the source array into multiple chunks and copying them one by one.
const MAX_BLOCK_SIZE = 65535;
export function appendArrayInPlace<T>(dest: T[], source: T[]) {
let offset = 0;
let itemsLeft = source.length;
if (itemsLeft <= MAX_BLOCK_SIZE) {
dest.push.apply(dest, source);
} else {
while (itemsLeft > 0) {
const pushCount = Math.min(MAX_BLOCK_SIZE, itemsLeft);
const subSource = source.slice(offset, offset + pushCount);
dest.push.apply(dest, subSource);
itemsLeft -= pushCount;
offset += pushCount;
}
}
return dest;
}
Tip
You can use ES6 spread operator to merge different arrays into one:
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [7, 8, 9];
const final = [...a, ...b, ...c];
The spread operator is handy if we use the push
method as well:
const a = [1, 2, 3];
const b = [4, 5, 6];
a.push(...b);
a;
Array.prototype.push.apply(firstArray, secondArray)
is another option that also works in ES5. This approach however isn't
recommended in case the second array is very large because the maximum number of parameters in one function is limited.
It's hard-coded to
65536 if you are curious.
Link
- This page has a deep investigation and provides
many benchmarks to prove why
push
is faster than concat
.