Table of contents
1.
Introduction
2.
Definition
2.1.
push() 
2.2.
concat()
3.
Return value
3.1.
push()
3.2.
concat()
4.
Other Differences 
4.1.
Speed
4.2.
Use cases
5.
Frequently Asked Questions
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Difference between Javascript Push and Concat methods

Author Vidhi Singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

In the real world, when we find standard features in a group of elements or a group of elements belonging to a specific category, we often store them together. In the future, when we discover more similar elements, we will add them to that group. 
In computer science, we have such containers that can hold more than one element. Talking specifically about Javascript, we have arrays. 

This article will discuss two of the Array methods in JavaScript, namely, push() and concat(). 

Check out the blog on the Fibonacci Series in Java, to know more about it.

Definition

push() 

push() function in JavaScript, adds one or more values in the array. The additional values are indeed at the end of the array.

The syntax for push() is:

name_of_the array.push(value1, value2, value 3,...); 
You can also try this code with Online Javascript Compiler
Run Code

 

For example:

<script>
	var example=[1,2,3,4];	//declaring the array
	console.log(example);   //prints [1,2,3,4]
	example.push(5);		//adding element to the array
	console.log(example);	//prints [1,2,3,4,5] 
</script>
You can also try this code with Online Javascript Compiler
Run Code

 

In the above program, initially, ‘example’ stores [1,2,3,4] (as the output on the console). 

Then we push the value ‘5 ’, which gets added at the end and thus makes the array [1,2,3,4,5]. This can be verified by printing the array. Similarly, if we want to add more than one element to the array, that can also be done.

<script>
	var example=[1,2,3,4];	//declaring the array
	console.log(example);	//prints [1,2,3,4]
	example.push(5,6,7,8);	//adding element to the array
	console.log(example);	//prints [1,2,3,4,5,6,7,8] 
</script>
You can also try this code with Online Javascript Compiler
Run Code

 

Here, we have added more than one element to the end.  

One thing to note is that, with push(), we are actually making changes in the original array that we are using the function on. For example, in the code given above, we actually changed the array ‘example’ from [1,2,3,4] to [1,2,3,4,5,6,7,8].

concat()

The concat() in JavaScript is used to merge two or more independent arrays or sets of elements. 
The syntax for same is:

array_1.concat(array_2,array_3,...);
You can also try this code with Online Javascript Compiler
Run Code

 

For example:

<script>
	var example_1=[1,2,3,4];		//declaring the array
	var example_2=[5,6,7,8];		//declaring the array
	var merged=example_1.concat(example_2);		//merging using concat()
	console.log(merged);			//prints [1,2,3,4,5,6,7,8] 
</script>
You can also try this code with Online Javascript Compiler
Run Code

 

In the above example, we merged the arrays, example_1’ and ‘example_2’, and stored the concatenated array in the variable ‘merged’. The variable ‘merged’ contains the elements from both the arrays: elements of ‘example_2’ after elements of ‘example_1’.

In case where arrays are not stored in a variable, merging can still be achieved as follows:

<script>
	var merged=[1,2].concat([3,4]);		//merging using concat()
	console.log(merged);				//prints [1,2,3,4] 
</script>
You can also try this code with Online Javascript Compiler
Run Code

 

More than one array can also be merged in a similar fashion.

<script>
	var merged=[1,2].concat([3,4],[5,6,7]);		//merging using concat()
	console.log(merged);						//prints [1,2,3,4,5,6,7] 
</script> 
You can also try this code with Online Javascript Compiler
Run Code

 

In concat(), there is no change in the already existing arrays. Instead, a new array is created to store the merged array. 
So, one major difference between push() and concat() is that push() induces changes in the original array, whereas concat() makes no change in existing array values.

You can practice by yourself with the help of Online Javascript Compiler for better understanding.

To know about  loop and while loop click here

Return value

push()

In JavaScript, the push() function returns the array's length after adding the new elements. 

For example:

<script>
	var example=[1,2,3,4];		//declaring the array
	example.push(6);			//adding element to the array 
</script>
You can also try this code with Online Javascript Compiler
Run Code

 

Here the line of code, ‘example.push(6)’  will return 5 to the console as the size of ‘example’ after adding one element to it becomes 5. 

concat()

The JavaScript concat() method returns the new array created after merging the arrays. 

For example:

<script>
	[1,2].concat([3,4],[5,6,8]);		//merging using concat() 
</script> 

 

Here, the it returns [1,2,3,4,5,6,8] to the console. 

So, another difference between push() and concat() methods of arrays in JavaScript is related to their return values. 
The push() function of the array returns a single integer value, which is the array's size after adding the elements. On the other hand, the concat() method of arrays returns the new array created after merging the arrays.

Other Differences 

Now we will see a few more differences between the two JavaScript methods. 

Speed

As you know by now the push() function makes the changes in the original array but concat() creates a brand new array. It creates the new array and populates it with the elements from the other arrays. Due to this mechanism, the concat() function is slower than the push() function. This speed also affects the performance of the whole script.  

This also leads us to look at the use cases of these functions.

Use cases

Now that we know the major properties of the push() and the concat() function. It should be easier to figure out which function should be used in what scenario. 

As push() brings in changes in the original array, it should be used where we want to add elements to the already existing array. Making a whole new array for each time an element is added to it, which takes place in concat(), will reduce the application's performance.  

In scenarios where we may need the existing array in the future, the use of concat() is suggested. But then, it comes at a cost. It leads to a slowdown in the code. But maintains the existence of the original array.   
Also, with the concat function, you can add new elements at the end and at the beginning of the array. Well, why don’t you try adding elements in the beginning? [Hint: Use the original array as a parameter to concat function)

push() is considered to be 945 times faster than concat(). 

Also, one thing worth mentioning here is that we have used only the integers throughout the explanation, but other data types like char, string, and float values also work the same way. An array of any kind of data structure can use push() and concat() in JavaScript
 

Must Read Fibonacci Series in JavaScript

Frequently Asked Questions

  1. Which one of push() and concat() works faster?
    push() works faster than concat().
     
  2. What does the push() function return?
    It returns a single integer value which is the size of the array after adding new elements. 
     
  3. Can only one element be added at a time in the push() function? 
    With the help of the push() function, one or more elements can be added at a time.  

Conclusion

This article extensively discusses a few differences between the push() and the concat() methods in JavaScript. We have also included example code to make the concepts more clear. 

Recommended Reading:

Difference Between IOT and M2M

Check out this problem - Search In Rotated Sorted Array

We hope that this blog has helped you enhance your knowledge regarding the difference between javascript push and concat methods and if you would like to learn more, check out our articles on JavaScript. Do upvote our blog to help other ninjas grow. 

Happy Coding!    

Live masterclass