CODEWITHSUNDEEP
javascriptarraysfor-loop
Emmanuel Balderas
Emmanuel Balderas

Reputation: 33

How to concatenate two arrays using for loops on javascript?

I want to merge two arrays through for loops and assign them into a new array.
I have these two arrays:

const drivers = ['Verstappen', 'Hamilton', 'Raikkonen', 'Bottas', 'Lando Norris', 'Leclerc', 'Ricciardo', 'Vettel', 'Stroll', 'Tsunoda'];
const livery = ['Red Bull', 'Mercedes-Benz', 'McLaren', 'Ferrari', 'Aston Martin', 'Alpha Tauri'];

I want to assign each one of these 'drivers' a livery (not necessarily the real one they represent irl), but every time I try to tweak my code I end up assigning each driver all the liveries when I only want to give them one or I manage to get only the last 'driver' on the array with the last 'livery'.

All the versions of my code usually revolve around this:

const drivers = ['Verstappen', 'Hamilton', 'Raikkonen', 'Bottas', 'Lando Norris', 'Leclerc', 'Ricciardo', 'Vettel', 'Stroll', 'Tsunoda'];
const livery = ['Red Bull', 'Mercedes-Benz', 'McLaren', 'Ferrari', 'Aston Martin', 'Alpha Tauri'];
let resultArray = [];

const loopIndex = (arrays, arrays2) => {
    for (i = 0; i < arrays.length; i++)
        for (j = 0; j < arrays2.length; j++)
            resultArray = arrays[i].concat(arrays2[j]);
}; 

loopIndex(drivers, livery);
console.log(resultArray); //Inputs TsunodaAlpha Tauri

Expected Output:

resultArray = ['VerstappenRedBull','HamiltonMercedes Benz','RaikkonenMcLaren','BottasFerrari','Lando NorrisAston Martin','LeclercAlpha Tauri','RicciardoRed Bull','VettelMercedes-Benz','StrollMcLaren','TsunodaFerrari'];

Or something similar I just wanted to see if i could concatenate one driver with one livery using for loops.

Upvotes: 0

Views: 194

Answers (3)

secan
secan

Reputation: 2669

If you want to use a for loop, you could do something like:

const drivers = ['Verstappen', 'Hamilton', 'Raikkonen', 'Bottas', 'Lando Norris', 'Leclerc', 'Ricciardo', 'Vettel', 'Stroll', 'Tsunoda'];

const livery = ['Red Bull', 'Mercedes-Benz', 'McLaren', 'Ferrari', 'Aston Martin', 'Alpha Tauri'];

const resultArray = [];

for (let i = 0; i < drivers.length; i++) {
  const j = i % livery.length;

  resultArray.push(`${drivers[i]} | ${livery[j]}`);
}

/*
or the slightly more compact version, using forEach:

drivers.forEach((driver, index) => {
  const j = index % livery.length;
  
  resultArray.push(`${driver} | ${livery[j]}`);
})
*/

console.log(resultArray);

Anyway I would suggest using Array.prototype.map():

const drivers = ['Verstappen', 'Hamilton', 'Raikkonen', 'Bottas', 'Lando Norris', 'Leclerc', 'Ricciardo', 'Vettel', 'Stroll', 'Tsunoda'];

const livery = ['Red Bull', 'Mercedes-Benz', 'McLaren', 'Ferrari', 'Aston Martin', 'Alpha Tauri'];

const resultArray = drivers.map((driver, index) => {
  const j = index % livery.length;
  
  return `${driver} | ${livery[j]}`
});

console.log(resultArray)

[edit] An explanation on line const j = index % livery.length;

As drivers and livery array have two different lengths, at some points you will "run out of teams" and you need to instruct your code to go back to the beginning of the livery array.

const arr1 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
const arr2 = ['a', 'b', 'c', 'd', 'e', 'f']
// expected output: ['Aa', 'Bb', 'Cc', 'Dd', 'Ee', 'Ff', 'Ga', 'Hb', 'Ic', 'Jd', 'Ke'];

A first tentative approach could be doing something like:

arr1.forEach((item, indexArr1) => {
  const indexArr2 = indexArr1 < arr2.length ? indexArr1 : indexArr1 - arr2.length
  // ...
})

This can work as long as arr1 is up to double the size of arr2; but what if arr1 has 11 items and arr2 only 5?
When indexArr1 is 10 (11th item), indexArr2 would be calculated as 10 - 5 = 5, which is not a valid index for arr2 (whose indexes go from 0 to 4).

Luckily we have the % operator, which returns the reminder of a division between two numbers and works in this way:

indexArr1 arr2.length indexArr2 logic
0 5 0 0 / 5 = 0 (reminder 0)
1 5 1 1 / 5 = 0 (reminder 1)
2 5 2 2 / 5 = 0 (reminder 2)
3 5 3 3 / 5 = 0 (reminder 3)
4 5 4 4 / 5 = 0 (reminder 4)
5 5 0 5 / 5 = 1 (reminder 0)
6 5 1 6 / 5 = 1 (reminder 1)
7 5 2 7 / 5 = 1 (reminder 2)
8 5 3 8 / 5 = 1 (reminder 3)
9 5 4 9 / 5 = 1 (reminder 4)
10 5 0 10 / 5 = 2 (reminder 0)
11 5 1 11 / 5 = 2 (reminder 1)
12 5 2 12 / 5 = 2 (reminder 2)
13 5 3 13 / 5 = 2 (reminder 3)
14 5 4 14 / 5 = 2 (reminder 4)
... ... ... ...

Upvotes: 2

Rohit Sharma
Rohit Sharma

Reputation: 605

As per the Output requirement, you need to do the following

const drivers = ['Verstappen', 'Hamilton', 'Raikkonen', 'Bottas', 
'Lando Norris', 'Leclerc', 'Ricciardo', 'Vettel', 'Stroll', 'Tsunoda'];
    const livery = ['Red Bull', 'Mercedes-Benz', 'McLaren', 'Ferrari', 
'Aston Martin', 'Alpha Tauri'];
     let resultArray = [];

     const loopIndex = (arrays, arrays2) => {
        arrays.forEach((arrayItem, i) =>
        {
            const j = i % arrays2.length;
            resultArray.push(`${arrayItem}${arrays2[j]}`)
        });
    }; 

loopIndex(drivers, livery);
console.log(resultArray); //Inputs TsunodaAlpha Tauri

Upvotes: 0

Rohit Sharma
Rohit Sharma

Reputation: 605

One way to do this is as follows

const drivers = ['Verstappen', 'Hamilton', 'Raikkonen', 'Bottas', 'Lando 
    Norris', 'Leclerc', 'Ricciardo', 'Vettel', 'Stroll', 'Tsunoda'];
const livery = ['Red Bull', 'Mercedes-Benz', 'McLaren', 'Ferrari', 'Aston 
    Martin', 'Alpha Tauri'];
let resultArray = [];

const loopIndex = (arrays, arrays2) => {
    console.log(arrays,arrays2);
    for (i = 0; i < arrays.length; i++)
        resultArray.push(arrays[i])
    for (j = 0; j < arrays2.length; j++)
        resultArray.push(arrays2[j])
}; 

loopIndex(drivers, livery);
console.log(resultArray); //Inputs TsunodaAlpha Tauri

//result will be as follow (final array containing 16 items, 10 from first array and 6 from second array)

  [1]: https://i.sstatic.net/sgrUk.png

Upvotes: 0

Related Questions