concat vs push

#Differences

1. The `concat` method does not change the existing array:
   js

   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.
   js

   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.
   js

   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`.