concat vs push
Written byPhuoc Nguyen
Created
25 Aug, 2020
Category
JavaScript
#Differences
-
The
`concat`
method does not change the existing array:jsconst shapes = ['Triangle', 'Square'];shapes.concat(['Circle', 'Rectangle']); // ['Triangle', 'Square', 'Circle', 'Rectangle']shapes; // ['Triangle', 'Square']The`push`
method on the other hand modifies the original array.jsconst animals = ['cat', 'dog', 'mouse'];animals.push('bird', 'cow'); // 5animals; // ['cat', 'dog', 'mouse', 'bird', 'cow']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`
. -
I find the following code snippet quite useful when you have to merge really big array. Credits to @zenmumbler.The function copies items from array
`source`
to`dest`
by splitting the source array into multiple chunks and copying them one by one.jsconst MAX_BLOCK_SIZE = 65535; // max parameter array size for use in Webkitexport 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:
js
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [7, 8, 9];
const final = [...a, ...b, ...c]; // [1, 2, 3, 4, 5, 6, 7, 8, 9]
The spread operator is handy if we use the
`push`
method as well:js
const a = [1, 2, 3];
const b = [4, 5, 6];
a.push(...b);
a; // [1, 2, 3, 4, 5, 6]
`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.
#See also
- This page has a deep investigation and provides many benchmarks to prove why
`push`
is faster than`concat`
.
![Hugeicons Pro - 25,000+ premium icons](/assets/ads/hugeicons.png)
Questions? 🙋
Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
Newsletter 🔔
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn