Slice and splice challenge index incrementing

Hello. I was wondering if anyone would be able to explain to me why, when iterating through arr1 with a for loop and applying that iteration as a parameter in the splice method, does it return the elements of the array in reverse order without incrementing the index parameter? Shouldn’t it return the elements from the 0 index because of the way its iterated in the for loop without having to increment the index parameter? The spread syntax, I would imagine, works in the same way as the for loop when iterating the array from index 0 on. Why would the index not need to be incremented when using the spread syntax as opposed to a for loop?

Link to challenge: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice

Sorry, but it’s a bit difficult to visualize what you’re trying to do without seeing some code samples. Do you mind adding some code?

Ah, I think I see what’s happening.

You’re using a loop to iterate over arr1, and calling splice on each iteration to insert an item from arr1 into arr2, one at a time.

Something like this, right?

for (let i = 0; i < arr1.length; i++) {
  result.splice(n, 0, arr1[i]);
}

Let’s take the example in the code where the parameters are [1, 2, 3], [4, 5, 6], and 1.
If we take away the loop and just write step by step what the loop is doing, it would look like this:

result.splice(1, 0, 1); // result is [4, 1, 5, 6]
result.splice(1, 0, 2); // result is [4, 2, 1, 5, 6]
result.splice(1, 0, 3); // result is [4, 3, 2, 1, 5, 6]

The problem is that it’s always inserting the new item at the 1-index.

As opposed to using the spread operator without a loop, which is akin to this:

result.splice(1, 0, 1, 2, 3); // result is [4, 1, 2, 3, 5, 6]

Does that help?

Sure…

frankenSplice(arr1, arr2, n){
       let newArr = arr2.slice();
       for(let i = 0; i < arr1.length; i++){
             newArr.splice(n, 0, arr1[i])
      }
   return newArr
}

I expected it to return:

[4, 1, 2, 3, 5]

instead it returned:

[4, 3, 2, 1, 5]

but once the n index parameter was incremented:

frankenSplice(arr1, arr2, n){
       let newArr = arr2.slice();
       for(let i = 0; i < arr1.length; i++){
             newArr.splice(n, 0, arr1[i])
             n++
      }
   return newArr
}

the function returned:

[4, 1, 2, 3, 5]

the spread syntax has the same effect as the above code:

frankenSplice(arr1, arr2, n){
       let newArr = [...arr2];
       
       
   return newArr.splice(n, 0, ...arr1)

so I am just trying to understand why incrementing the n index parameter was needed if the for loop should be the same as the spread operator. Trying to understand “under the hood” what is going on with the code for it to insert the array into that index in reverse order instead of from the 0 index to nth index.

It’s not reversing anything, it’s doing exactly what you told it to do.

result.splice(1, 0, 1); // insert 1 at index 1
result.splice(1, 0, 2); // insert 2 at index 1
result.splice(1, 0, 3); // insert 3 at index 1

This is not what you want. What you want is

  1. insert 1 at index 1
  2. insert 2 at index 2
  3. insert 3 at index 3

You need to account for the already placed items if you choose to use splice in a for loop. Rather than incrementing n (you really shouldn’t be mutating arguments), you could simply add the increment variable i.

for (let i = 0; i < arr1.length; i++) {
  result.splice(n + i, 0, arr1[i]);
}
1 Like

That makes sense. I was trying to figure out why it was doing that, but that was exactly the explanation that I needed. Thank you very much!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.