#JSNoob — push() vs concat() — Basics and Performance Comparison

This is the first article of the series #JSNoob. The reason for starting this series is that I feel there are so many concepts which we junior devs miss out (hope I am not the only one 😅).

Firstly I use push() mostly so few days back I was going through my 2 year old code, I found out that I had used concat() for pushing values in array. I started wondering about the difference between both the methods. I went through many articles and stack-overflow answers to get the basic difference, which one to use when and their performance metrics. So lets begin.

Basic Definitions

push() : The push() method adds one or more elements to the end of an array and returns the new length of the array. (MDN)

var arr1 = [‘a’, ‘b’, ‘c’];
var arr2 = [‘d’, ‘e’, ‘f’];
var arr3 = arr1.push(arr2);
console.log(arr3); // 4
console.log(arr1); // [“a”, “b”, “c”, [“d”, “e”, “f”]]

concat() : The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array. (MDN)

var arr1 = [‘a’, ‘b’, ‘c’];
var arr2 = [‘d’, ‘e’, ‘f’];
var arr3 = arr1.concat(arr2);
console.log(arr3); //[“a”, “b”, “c”, “d”, “e”, “f”]

From above examples, we can see that push() adds the child arrays as array in the array which called the method while concat() adds as string or number values.

Basic Usage

Whenever there is a need of merging two or more arrays I would definitely prefer concat() while when we need to push one or more items one by one, I would prefer push() .

Basic Performance Difference

Checkout this performance benchmark. Clearly push() is better in performance than concat() . But if you are interested in merging more than two arrays then it would be advised to go for concat() .

So I believe the first part of #JSNoob series will help a lot of devs who are either confused or unaware of the difference between push() and concat(). I hope to continue writing about a topic every Friday (yeah I have no social life 😞)