merge two arrays javascript using spread operator code example

Example 1: javascript array concat spread operator

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [...arr1, ...arr2] //arr3 ==> [1,2,3,4,5,6]

Example 2: es6 concat array

let fruits = ["apples", "bananas"];
let vegetables = ["corn", "carrots"];
let produce = [...fruits, ...vegetables];
//["apples","bananas","corn","carrots"]

Example 3: javascript merge two array with spread operator

const a = ['to', 'code'];
const b = ['learning', ...a, 'is', 'fun']; 
console.log(b); //> ['learning', 'to', 'code', 'is', 'fun']

Example 4: combining two arrays using spread syntax

////////////////////////////////////////////////////////////////////
////// SPREAD SYNTAX ///// Dead Milkmen Lyrics "Punk Rock Girl" ////
// combining two arrays and multiple items using spread syntax 
// Javascript [...spreadSyntax,] lets you pull out or ("spread")
// a copy of what's inside the array or object 
// it can also be used to create a new array or object 

// EXAMPLE: [...combining, ...twoArrays] 
// hit alt / command j or option / command j

// array 1 type 
const firstArray = ["just", "you", "and", "me"];
// array 2 type
const secondArray = ["punk", "rock", "girl"];

// (hit return) to store the arrays  
// combine them into a new array using a syntax 
// [...arrayName, ...arrayName];

const newArray = [...firstArray, ...secondArray]; 
// (hit return) The items get spread out 
// then combined together 
// call your third Array then (hit return)

newArray 
// answer
(7) ["just", "you", "and", "me", "punk", "rock", "girl"]

// This could also be done with an array and an "added string"
const sillyString = ["We'll dress like Minnie Pearl ", ...newArray]; 
// (hit return) then call sillyString 

sillyString
// (hit return) answer should be 
(8) ["We'll dress like Minnie Pearl ", "just", "you", "and", "me", "punk", "rock", "girl"]

// You can spread and combine all 
// sorts of silly data that you
// normally store in an array 
// add another string for fun 

const longString = ["And security guards trailed us to a record shop We asked for Mojo Nixon They said he don't work here We said if you don't got Mojo Nixon then your store could use some fixin"];

const moreStuff = [...sillyString, "We went", 2, "a shopping mall", "and", { someProperty: "laughed at all the shoppers" }, ...longString];

// RESULT  
// call moreStuff

moreStuff 
/* RESULT //////////////////////////
(14) ["We'll dress like Minnie Pearl ", 
"just", "you", "and", "me", "punk", "rock", "girl", 
"We went", 2, "a shopping mall", "and", {…}, 
"And security guards trailed us to a record shop 
We…t Mojo Nixon then your store could use some fixin"]
0: "We'll dress like Minnie Pearl "
1: "just"
2: "you"
3: "and"
4: "me"
5: "punk"
6: "rock"
7: "girl"
8: "We went"
9: 2
10: "a shopping mall"
11: "and"
12: {someProperty: "laughed at all the shoppers"}
13: "And security guards trailed us to a record shop 
We asked for Mojo Nixon They said he don't work here 
We said if you don't got Mojo Nixon 
then your store could use some fixin"
length: 14
__proto__: Array(0)
*/