JavaScript Array Merge

For a project, I needed the ability to merge an array from a remote source with an array living in memory in the browser. JavaScript doesn’t have an explicit function that handles this outright, so I cooked up a little prototype that I am sharing today.

The specific issue I was concerned with was the original array could possibly have thousands of items, so I didn’t want to use a for or while loop for this very reason. Also, I wanted to have a single method that handled adding elements at the front of the array, end of the array or replacing any items in the array. Finally, it was important to my project that the original array is not modified.

Let’s start by looking at the final prototype product.

Array.prototype.smoothInsert = function( newArray, start, howMany ) {
	/*
		This code takes an array and replaces a section
		of an array with the values found in the new array
 
		* howMany is optional
	*/
	var al = howMany || newArray.length;
	if( start < this.length )
	{
		var begin = this.slice(0, start);
		var end = this.slice( al+begin.length );
		var combine = begin.concat( newArray ).concat( end );
		return combine;
	}
	else if( start >= this.length )
	{
		var n = start - this.length;
		var a = new Array( n );
		var combine = this.concat(a).concat( newArray );
 
		return combine;
	}
 
	else { return this.concat( newArray );	 }
 
}

Let’s talk about exactly what is happening in the above code. The first argument is the new array you want to add into the existing array. The second is the start position to start adding the new array. This is similar to how JavaScript slice works. The final argument is the end position, or how many items to replace / update with the new array. If this is undefined, the length of the array passed into argument 1 is used.

Now that we have all the variables defined, let’s look at a few examples where this comes in handy.

var remoteArray = ["remote2","remote3", "remote4", "remote5" ];
var inPageArray = ["current1",,,,,"current6", "current7", "current8", "current9", "current10"];
var finalArray = inPageArray.smoothInsert( remoteArray, 1 );
console.log( finalArray ); // ["current1", "remote2", "remote3", "remote4", "remote5", "current6", "current7", "current8", "current9", "current10" ]

The final array (the original is not modified – just like slice), combines the remote array with the in page array, it does this by leveraging slice and concat, two built-in functions. Since slice doesn’t modify the original array, we have to offset the second slice in order to get the ‘end’ portion of the array. Once we have done this, we concat the whole this back together and end up with our desired array.

The next condition is when the start position is longer than the length of the current array. When this occurs, we want to ensure the empty positions are retained using ‘undefined’. To do this, we initialize a new array whose length if the difference between the original array and the start position, then we concat the original array, with the spacer array and add the remote array. Le’ts see an example

var remoteArray = ["remote10", "remote11", "remote12", "remote13"];
var inPageArray = ["current1", "current2", "current3", "current4" ];
var finalArray = inPageArray.smoothInsert( remoteArray, 9 );
console.log( finalArray ); //current1,current2,current3,current4,,,,,,remote10,remote11,remote12,remote13

That’s it, now you have a built-in method to handle those more complex slice / concat scenarios. Enjoy!