How to combine two arrays into an array of objects in JavaScript

Today we'll be talking about how to combine two arrays into an array of objects in JavaScript.

Combining two arrays into an array of objects can be a great way to store data in JavaScript. It's easy to do, and it gives you the flexibility to access the data quickly and easily.

How to combine two arrays into an array of objects. #

The first step is creating two separate arrays that contain all of your desired information. For example, if you are combining names with codes, create one array for names and another array for codes.

<script>
  let names = ["Red", "Yellow", "Black"]; 
  let codes = ["#ff0000", "#ffff00" , "#000000"];  
</script>

Next we will combine these two arrays into an object using the map() method which takes a function as its argument.

<script>
    let names = ["Red", "Yellow", "Black"]; 
    let codes = ["#ff0000", "#ffff00" , "#000000"];  

    let colorCode = names.map(function(name, i){
      return {name : name , code : codes[i++]}; 
    });  

    console.log(colorCode)
</script>

The above code creates an object called colorCode that contains both our name and code information from each item in our original two separate arrays. This works because on each iteration through our loop we add 1 to i so that when it reaches 3 (the last index) it stops adding anymore values from the second array codes.

1. Combine two arrays into an array of objects using for loop #

   We can also use a for loop to iterate through both arrays and create a new array of objects. See the following example.

   <script>
       let names = ["Red", "Yellow", "Black"]; 
       let codes = ["#ff0000", "#ffff00" , "#000000"];  
   
       const colorCode = [];
   
       for(let i = 0; i < names.length; i++) {
          colorCode.push({ name: names[i], code: codes[i] });
       }
   
       console.log(colorCode)
   </script>

   Try it Yourself »

2. Combine two arrays into an array of objects Using reduce() method #

   The reduce() method is used to reduce an array to a single value by applying a function to each element of the array. We can also use this function to combine two arrays into an array of objects. The example is given below.

   <script>
       let names = ["Red", "Yellow", "Black"]; 
       let codes = ["#ff0000", "#ffff00" , "#000000"];  
   
   
       const colorCode = names.reduce((acc, name, index) => {
           acc.push({ name, code: codes[index] });
          return acc;
       }, []);
   
   
       console.log(colorCode)
   </script>

   Try it Yourself »

3. Combine two arrays into an array of objects using forEach() method #

   The forEach() function allows us to iterate over the elements of an array and perform an action on each element. We can use it to combine two arrays into an array of objects.

   <script>
       let names = ["Red", "Yellow", "Black"]; 
       let codes = ["#ff0000", "#ffff00" , "#000000"];  
   
       let colorCode = [];
       
       names.forEach((name, i) => {
         colorCode.push({name, code: codes[i]});
       });
   
       console.log(colorCode)
   </script>

   Try it Yourself »