Follow

Follow

# Slice and Splice - JavaScript Solution & Walkthrough

## (12/16) Learn how to solve coding challenges using FreeCodeCamp's curriculum.

Benjamin Semah
·Apr 12, 2022· • 12/16 Slice and Splice
• Understanding the Challenge
• Pseudocode
• Solving the Challenge
• Final Solution
• Congratulations! ## 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.

1. `...arr2.slice(0, n)` This gets all elements of arr2 from index 0 to indext n(index n not inclusive)

2. `...arr1` This inserts all elements of arr1 starting at index n

3. `...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!