Slice and Splice

The requirement for this freeCodeCamp algorithm is to take an argument of two arrays and an index. From there, we need to splice the first array arr1 into the second array arr2 at the specified index n. Lastly, we need to make sure that both arrays remain unchanged, and that we return the new array we've created.

Requirements

• frankenSplice([1, 2, 3], [4, 5], 1) should return [4, 1, 2, 3, 5]
• frankenSplice([1, 2], ["a", "b"], 1) should return ["a", 1, 2, "b"]
• frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2) should return ["head", "shoulders", "claw", "tentacle", "knees", "toes"]
• All elements from the first array should be added to the second array in their original order.
• The first array should remain the same after the function runs.
• The second array should remain the same after the function runs.

Psuedocode

Let's write out each step we'll take to solve the problem.

// Create a function that accepts 2 arrays (arr1 & arr2) and an index (n)
    // Create a copy of arr2
    // Loop through arr1
    // Splice each item of arr1 into arr2 at the index n
    // Increment the n on every pass of the loop
  // Return the copy of arr2

Solving the Algorithm

Setting up our function

Let's create a function that accepts 3 arguments, arr1, arr2, and n.

function frankenSplice(arr1, arr2, n) {
  
};

Create a copy of our array

Per the requirements, we can't manipulate the original arrays, arr1 and arr2. With that being said, we need to figure out what the best way to do this will be. Hmm...🤔

Let's take a look at the docs for Array.prototype.slice().

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

That's pretty interesting. The slice() method appears to do exactly what we need.

We know that slice() takes two optional arguments, begin and end.

We also know that...

If begin is undefined, slice begins from index 0.

Therefore, it will essentially provide us with a copy of the entire array.

Let's put it to use:

function frankenSplice(arr1, arr2, n) {
  	var arr2Copy = arr2.slice();
}
console.log(arr2Copy);

Try this the code snippet in your browser console.

Splice the first array into the second array at the index

Let's create the remaining logic we need in order to splice arr1 into arr2 at the given index n.

First, let's read up on Array.prototype.splice()

Array.prototype.splice() accepts 3+ arguments. A start which is the index to start at, an optional deleteCount which is the number of items to be deleted, and an optional number of items to be inserted into the array.

Solution

Let's see how we can convert our psuedocode into a working solution:

function frankenSplice(arr1, arr2, n) {
  	var arr2Copy = arr2.slice();
	for (var i = 0; i < arr1.length; i++) {
		arr2Copy.splice(n++, 0, arr1[i]);
	}
  return arr2Copy;
}
frankenSplice([1, 2, 3], [4, 5], 1)

Note: Thanks to @Cliff3CS for giving me the low down on how to properly use the plus-plus operator, as in the n++ of the solution above. This will increment n everytime the loop passes over it, as opposed to adding n++ below the line: arr2Copy.splice(n++, 0, arr1[i]);.

Final Thoughts

Hopefully you found this to be a helpful walkthrough of this freeCodeCamp algorithm on how to slice and splice arrays!

Shoot me an email at tim@timwheeler.com with any questions and if you enjoyed this, stay tuned and subscribe below! 👇