How to merge two arrays in Javascript

 In this post we are gonna see how we can merge two arrays using js.

Method one is to use the array.concat()

More information on this method can be found here.

let arr1 = [
  {
    name: "quick",
  },
  {
    name: "apple ",
  },
  {
    name: "fish",
  },
  {
    name: "tomato",
  },
];

let arr2 = ["apple", "strawberry", "banana"];

let merged = arr1.concat(arr2);

// [
//   { name: 'quick' },
//   { name: 'apple ' },
//   { name: 'fish' },
//   { name: 'tomato' },
//   'apple',
//   'strawberry',
//   'banana'
// ]

Method two is to use the spread operator (...)

let arr1 = [
  {
    name: "quick",
  },
  {
    name: "apple ",
  },
  {
    name: "fish",
  },
  {
    name: "tomato",
  },
];

let arr2 = ["apple", "strawberry", "banana"];

let merged = [...arr1, ...arr2];

// output
// [
//   { name: 'quick' },
//   { name: 'apple ' },
//   { name: 'fish' },
//   { name: 'tomato' },
//   'apple',
//   'strawberry',
//   'banana'
// ]



Extra one

Remove any duplicate items in the merged array

let arr1 = ["apple", "banana"];
let arr2 = ["apple", "strawberry", "banana", "cherry"];

let merged = [...arr1, ...arr2];

// convert the merged array to set.
// sets doesnt store duplicate elements
let set = new Set(merged); // Set(4) { 'apple', 'banana', 'strawberry', 'cherry' }

// convert back the set to an array
let finalArray = Array.from(set) //[ 'apple', 'banana', 'strawberry', 'cherry' ]

Comments