← Back tothis vs that

concat vs push

Written byPhuoc Nguyen
25 Aug, 2020
concat and push are common methods to append one or more items to a given array.


  1. The `concat` method does not change the existing array:
    const 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.
    const animals = ['cat', 'dog', 'mouse'];
    animals.push('bird', 'cow'); // 5
    animals; // ['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.
  2. 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

  1. 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`.
  2. 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.
    const MAX_BLOCK_SIZE = 65535; // max parameter array size for use in Webkit

    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;


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]; // [1, 2, 3, 4, 5, 6, 7, 8, 9]
The spread operator is handy if we use the `push` method as well:
const a = [1, 2, 3];
const b = [4, 5, 6];

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`.
If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

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 🥷.
Ask me questions

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