JavaScript Join Two Arrays
Last Updated : Mar 12, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of JavaScript join two arrays, we will see two different methods to join two arrays in JavaScript. The methods are – concat() method and Spread(…) method.
Concat() method: the JavaScript method concat() used to concatenate arrays. It also do not change the original array but return new merged array. the syntax is,
NewArray = Array.concat()
Spread method: this method is used to merge two objects and returns a new object. the syntax for spread is (…).
Step By Step Guide On JavaScript Join Two Arrays :-
Method 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> javascript join two arrays</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> JavaScript join two arrays </h3>
</center>
<script>
const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ;
const array2 = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20] ;
const array3 = array1.concat(array2) ;
console.log(array3) ;
</script>
</body>
</html>
- JavaScript can be written within the <script> tag, and it should be closed with the </script>
- Create two arrays array1 and array2 using const with some values
- Now again create a new array, array3. Into it using concat() method to merge both of the arrays
- Then for displaying the merged array use console.log().
Method 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript join two arrays</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> JavaScript join two arrays </h3>
</center>
<script>
var arr1 = ["aaa", "bbb", "ccc", "ddd", "eee"] ;
var arr2 = ["fff", "ggg", "hhh", "iii", "jjj"] ;
var result = [...arr1, ...arr2] ;
console.log(result) ;
</script>
</body>
</html>
- JavaScript can be written within the <script> tag, and it should be closed with the </script>
- Create two arrays arr1 and arr2 using var with some values
- Then create another array, arr3 then using spread method by (…).
- Then for displaying the merged array use console.log().
Conclusion :-
At last, in conclusion, we can say that with this article’s help, we know join two arrays using JavaScript.
I hope this article on JavaScript join two arrays helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
