Updated March 27, 2023
Introduction to JavaScript Array Concat
JavaScript Array Concat refers to combining of two or more arrays which in turn returns a new array. Combining different arrays does not result in the change of data in existing individual arrays. For concatenation, we use concat() method or Array.concat() function. Let us see the syntax and how it works.
How does Array Concatenation Works?
In Javascript, array is a list of elements may it be string, numbers, Boolean, etc. Concatenation is adding two arrays or more than 2 arrays. Similar to add, array1+ array2, concat() method works similarly in javascript. It appends the array elements at the end of the array to which the user wants to combine.
Syntax:
Syntax of concat() method is:
Array.concat(value1, value2, value 3, ……valueN);Arguments Value1, value2,… are the array or values which are to be combined to given array Returns a new array representing a joined array.
Above is the general way of concatenating the arrays, we also have some other methods to concatenate the arrays,
- Using spread operator E6 (keyboard shortcut): Spread syntax is an ES6 standard which allows elements to be used as arguments, applicable while creating a new array, also known as a destructuring operator.
- Using Push: Using the push() method with spread operator. Let us have a look at some of the examples which will demonstrate the use of concat().
Examples of JavaScript Array Concat
Below are the examples of JavaScript Array Concat:
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var array1=["Javascript","ReactJs","Vue.JS","EmberJS"];
var array2=["Saideep","Karthick","Anusha","Lekha"];
var result=array1.concat(array2);
document.write(result);
</script>
</body>
</html>Output:
Here array1 and array2 both have 4 elements inside, on concatenation, a new array result is produced.
Example #2
In the case of more than 2 arrays.
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var array1=["JS","React","Vue.JS","Ember"];
var array2=["Sai","Karthick","Anu","Lekha"];
var array3=["eduCBa", "w3schools", "udemy", "shaw"];
var array4=["1000","1200","500","null"];
var result=array1.concat(array2, array4, array3);
document.write(result);
</script>
</body>
</html>Output:
Here, 4 arrays are combined and the output is as below, Since array4 is combined before array3, data in array4 is displayed first. There is no such thing as arrays should be combined in an order.
Example #3
We can also combine the elements directly to an array instead of declaring the second array and inserting the array elements.
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var array1=["JS","React","Vue.JS","Ember"];
var result=array1.concat("1000","1200","500","null");
document.write(result);
</script>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE html>
<html>
<body>
<script>
let array1 = [1, 2, 3, 4, 5, 6]
let array2 = [6, 5, 4, 3, 2, 1, 0]
let array1_array2 = array1.concat(array2)
let array2_array1 = array2.concat(array1)
document.write('Combined array1_array2 = '+array1_array2+ '</br>')
document.write('Combined array2_array1 = '+array2_array1)
</script>
</body>
</html>Output:
Output always depends on to which array we are combining which array, accordingly data gets inserted into a new array.
Example #5
We can even combine an array, some elements as below.
Code:
<!DOCTYPE html>
<html>
<body>
<script>
let array1 = ['A', 'B', 'C', 'D', 'E']
let array2 = ['F', 'G']
let array1_array2 = array1.concat(array2)
let array2_array1 = array2.concat(array1, 4, [3, 2]
document.write(`Combined array1_array2 = `+array1_array2+ '</br>')
document.write(`Combined array2_array1 = `+array2_array1)
</script>
</body>
</html>Output:
With concat(), arrays can also be cloned. We need to create an empty array and concat it with an already existing array.
Example #6
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var array1 = ['1','2','3']
var array2 = [].concat(array1)
document.write(array2)
</script>
</body>
</html>Output:
Conclusion
Let us now conclude this article as we have gone through what Javascript Array concatenation is, creating a new array by merging some or all the existing arrays as required, and demonstrated with various examples. I also investigated various other ways of concatenating arrays. Using concat() method, we have also seen cloning or copying the array elements to other arrays.
Recommended Articles
This is a guide to JavaScript Array Concat. Here we discuss how does Array Concatenation works and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
