Copy array items into another array

In-depth techniques to replicate and merge arrays

Let's journey through the land of JavaScript array operations. Unearth various best practices and techniques to master the art of duplicating and uniting arrays.

1. United we stand: Merging with concat

concat() method is your go-to tool for joining two or more arrays into a new alliance, leaving the original arrays untouched.

var familyReunion = uncleBob.concat(auntSue);
// Get-togethers have never been easier!


2. Fast & Furious: Appending with push

For the thrill-seekers looking for high-octane appending, combine push() with the ... spread operator, the proverbial NOS to your JavaScript race car:

arrayA.push(...arrayB);
// Buckle up, arrayB. We're going for a ride!


Don't fret if you're in a pre-ES6 environment, Array.prototype.push.apply(arrayA, arrayB) gets you the same adrenaline rush.

3. Powerlifting: Dealing with large arrays

For those heavyweight large arrays, methods like concat or spread syntax may run out of breath. Use a loop-based regimen for maximum performance gains:

for (let i = 0; i < arrayB.length; i++) {
  arrayA.push(arrayB[i]);
  // One push at a time. No pain, no gain!
}


A glimpse into the array-tion with real-world examples

Keeping the essence: Sparse arrays

concat is mindful of your sparse array structure, keeping things just how you left them:

let hermitArray = new Array(5);
let partyArray = [1, 2, 3];
let resultArray = partyArray.concat(hermitArray);
// resultArray is [1, 2, 3, <2 empty slots>]
// Too empty? Or just the right amount of social distancing?


Shapeshifters: Array-like objects

Array-like objects like arguments or NodeList can be cloned into an array with Array.prototype.slice.call() or simply spread into a new array:

function cloneWars() {
  return [...arguments];
  // No midi-chlorians were harmed in the cloning process.
}


Order now, chaos never

Remember, order matters. To avoid chaos, be conscious of the sequence of operations.

Custom adaptations and enhancements

Flexibility in action: Custom merge function

Consider creating a custom merge function which can handle multiple scenarios:

function mixNMatch(target, ...arrays) {
  arrays.forEach(arr => {
    if (Array.isArray(arr)) {
      target.push(...arr);
      // Just like grandma's recipe, every item matters!
    } else {
      throw new TypeError('Hey! Only arrays are allowed in my soup!');
    }
  });
  return target;
}


Speedrace: Benchmarking for performance

Embrace your inner pit crew and tune your JavaScript engine to perfection with benchmark tests! Tools like jsPerf allow you to compare array copying methods and choose the optimal one for your needs.