Slice and Splice - JavaScript Solution & Walkthrough

12/16 Slice and Splice

You are given two arrays and an index.

Copy each element of the first array into the second array, in order.

Begin inserting elements at index n of the second array.

Return the resulting array. The input arrays should remain the same after the function runs.

function frankenSplice(arr1, arr2, n) {

  return arr2;
}

frankenSplice([1, 2, 3], [4, 5, 6], 1);

Credit: FreeCodeCamp.org

Understanding the Challenge

In this challenge, we are given a function that takes three(3) arguments. The first two arguments are arrays arr and arr2. The third arguments is an index number n.

The challenge here is to copy and paste all the elements of arr1 into arr2. We cannote just paste them anywhere. We have to paste them at the given index n.

In the example, arr1 is [1, 2, 3], arr2 is [4, 5, 6] and n is given as 1.

Given these inputs, the function should return [4, 1, 2, 3, 5, 6]. As can be seen, we've copied all elements of arr1 into arr2. And the were positioned at index 1. In the resulting array, the number 4 has an index of 0, followed by the first element of arr1 which has an index of 1.

Don't forget we've also been informed that the "input arrays should remain the same after the function runs" In other words, the function should not mutate the any of the input arrays.

Pseudocode

Given two arrays(arr1 and arr2) and an index number(n)
  Copy all the elements of arr1
  Paste them in arr2 beginning at the given index(n)
Return the resulting array
Ensure that the input arrays remains intact

Solving the Challenge

The title of the challenge Slice and Splice gives a clue on how we can go about solving this challenge.

The splice method mutates changes the existing array on which it is applied. Since we've been informed that the input arrays should remain the same after the function runs, we are not going to use the .splice() method.

We'll use the .slice() method. This method does not mutate the existing It only returns a copy of part of an existing array. It takes arguments that determines where the copy should start and end. Let's an example.

const myArray = ["a", "b", "c", "d", "e"];
const mySlice = myArray.slice(1, 4) 
console.log(mySlice) // ["b", "c", "d"]
console.log(myArray) = ["a", "b", "c", "d", "e"]

In our example, the copy to be made mySlice(1, 4) starts from index 1(inclusive) and ends at index 4(not inclusive).

Note: When we log myArray after the slice has been, it still remain the same. Nothing changes in the original array.

To solve our challenge, we'll use the .slice() method together with the ... spread operator.

function frankenSplice(arr1, arr2, n) {
  let finalArray = [
    ...arr2.slice(0, n), ...arr1, ...arr2.slice(n, arr2.length)
  ]
  return finalArray;
}

frankenSplice([1, 2, 3], [4, 5, 6], 1); // [ 4, 1, 2, 3, 5, 6 ]

Our finalArray is made of three sections. let's break it down.

...arr2.slice(0, n) This gets all elements of arr2 from index 0 to indext n(index n not inclusive)
...arr1 This inserts all elements of arr1 starting at index n
...arr2.slice(n, arr2.length) The provides all the remaining elements of arr2 from index n to the last element.

Final Solution

function frankenSplice(arr1, arr2, n) {
  let result = [
    ...arr2.slice(0, n), ...arr1, ...arr2.slice(n, arr2.length)
  ]
  return result;
}

frankenSplice([1, 2, 3], [4, 5, 6], 1); // [ 4, 1, 2, 3, 5, 6 ]

Congratulations!

You just cracked the 12th challenge in this series.

Cheers and happy coding!