For Loop in Slice and Splice Challenge

Hi everyone. this is my first post ever so forgive me if there was any mistakes.

I think I understand the solution to the problem posted. there is one thing I can’t seem to get my head around. I tried the for loop method and it works just fine except that it splices the values of arr1 in backwards order. if I tried this :

function frankenSplice(arr1, arr2, n) {
let localArray = arr2.slice();

for (let i = 0; i < arr1.length; i++) {

  localArray.splice(n, 0, arr1[i]);
}

return localArray;

};

the Answer will be :
[4, 3, 2, 1, 5, 6]

but if I added n++ as in the answer provided :

function frankenSplice(arr1, arr2, n) {

// It's alive. It's alive!

let localArray = arr2.slice();

for (let i = 0; i < arr1.length; i++) {

  localArray.splice(n, 0, arr1[i]);

  n++;

}

return localArray;

};

the answer will be :
[4, 1, 2, 3, 5, 6];

Can someone please explain to me why this is happening ?
Thank you in advance!!!

Challenge: Slice and Splice

Link to the challenge:

What a coincidence! I’m struggling with this! I checked the hints which did allow me to break down the problem. However my code is still not passing the tests. I checked what you wrote and saw that n++ makes the index increment. The way my loop works, has the values entered as 3,2,1; n++ does 1,2,3 which I don’t quite undertand why. I tried (i+1) before trying out n but still it didn’t work. I had thought that that would pass the other problems, since that would take care of the sorting, but even by adding that, it didn’t happen. I don’t know what is missing.

function frankenSplice(arr1, arr2, n) {

let newArray = arr2.slice(0)

for (let i=0 ; i < arr1.length ; i++) {

newArray.splice(n,0, arr1[i])

  console.log(newArray)

}

return arr2;

}

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

I still could not figure out why n++ changes the way arr1 is spliced into arr2 in backwards order. However, in your code you have logged newArray to the console :

for (let i=0 ; i < arr1.length ; i++) {

newArray.splice(n,0, arr1[i])

  console.log(newArray)

}

return arr2;

}

this will make the function log newArray every time the loop is called. which is 3 times. the result will be that it will log the following to the console :

[4, 1, 5, 6]

[4, 2, 1, 5, 6]

[4, 3, 2, 1, 5, 6]

And that is not going to pass the test. the result should only be :

[4, 1, 2, 3, 5, 6]

and then you returned arr2 .

what you should do instead is to return newArray outside the for loop after it has taken the values from arr1. as in my answer. that’s what i have figured out so far.

Lets do some documentation research:

The splice() method changes the contents of an array

So, splice() changes the array. But if you put those changes inside of a loop, you get a mess. Its a big, big no-no to change your array as you iterate over it.

Specifically in this case, if you add an element, then you are shifting over all of the other elements.

You are better off changing this to avoid modifying the array as you iterate over it.

I think I have just figured out why n++ is needed.

When we run the following code without n++ :

function frankenSplice(arr1, arr2, n) {

let localArray = arr2.slice();

for (let i = 0; i < arr1.length; i++) {

  localArray.splice(n, 0, arr1[i]);

}

return localArray;

};

it will constantly splice a single value from arr1 to index n. Which in this case will be 1. So the loop will act like the following :

first loop : localArray.splice((1), 0, arr1[0]) result → (4, 1, 5, 6);
second loop : localArray.splice((1), 0, arr1[1]) result → (4, 2, 1, 5, 6);
third loop : localArray.splice((1), 0, arr1[2]) result → (4, 3, 2, 1, 5, 6);

where as if you increment the index(n) with every loop :

first loop : localArray.splice((1), 0, arr1[0]) result → (4, 1, 5, 6);
second loop : localArray.splice((2), 0, arr1[1]) result → (4, 1, 2, 5, 6);
third loop : localArray.splice((3), 0, arr1[2]) result → (4, 1, 2, 3, 5, 6);

please guys let me know if this is correct or if I wasn’t clear enough. Thank you in advance.

Yeah, you have the basic idea of what’s going on here.

It’s easier to insert all of the elements all at once like the second solution in the guide article, imho.

I figured, i Just wanted to understand how this really works. Thank you for confirming