concat vs push

Differences

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] (https://twitter.com/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;
   }

Tip

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]

const a = [1, 2, 3];
const b = [4, 5, 6];

a.push(...b);
a; // [1, 2, 3, 4, 5, 6]

See also

• This page has a deep investigation and provides many benchmarks to prove why push is faster than concat.