How can I make two JS Splice work together

Question

I have two splice methods that work as expected but only if I have one at a time

const prev = [
    [135,136,137,138,139],
    [275,276,277,278,279],
];

const after = [
    [141,142,143,144,145],
    [281,282,283,284,285],
];

scrollFrom.splice(0, 0, 135,136,137,138,139);

I get:

[135, 136, 137, 138, 139, 140 ...]

If I only have:

(...)
scrollFrom.splice(1, 0, ...after[0]);

I will get:

[140, 141, 142, 143, 144, 145 ...]

However if I have both splice functions, like this:

(...)
scrollFrom.splice(0, 0, ...prev[0]);
scrollFrom.splice(1, 0, ...after[0]);

The result is this:

[135, 141, 142, 143, 144, 145, 136, 137, 138, 139, 140 ... ]

What I would like to obtain is this:

[135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145 ... ]

Can you help me figure out what I am doing wrong or other solutions? Thanks in advance.

Answer 1

I think the issue is that you're not allowing for the items you've already inserted. You're using index 1 for the second splice , but prev has more than one entry in it. Insted:

scrollFrom.splice(0, 0, ...prev[0]);
scrollFrom.splice(prev[0].length, 0, ...after[0]);
// −−−−−−−−−−−−−−−^^^^^^^^^^^^^^

Live Example:

 const prev = [ [135,136,137,138,139], [275,276,277,278,279], ]; const after = [ [141,142,143,144,145], [281,282,283,284,285], ]; const scrollFrom = []; // Or whatever scrollFrom.splice(0, 0, ...prev[0]); scrollFrom.splice(prev[0].length, 0, ...after[0]); // −−−−−−−−−−−−−−−^^^^^^^^^^^^^^ console.log(scrollFrom);

 .as-console-wrapper { max-height: 100% !important; }

Answer 2

I wasn't taking into consideration that the indexes of the array increase with the first splice, duh!

            scrollFrom.splice(0, 0, ...prev[0]);
            scrollFrom.splice(6, 0, ...after[0]);

This returns: [135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, ...] perfect!

Thanks for the replies.

Answer 3

When calling the second splice , you should account for the items inserted using the first splice . So instead of splicing from 1 you should splice from after the last element:

let initialLength = scrollFrom.length;                                  // cache the initial length of 'scrollFrom' in case it is not equal to 1 (contains 0 or more than 1 elements)
scrollFrom.splice(0, 0, ...prev[0]);                                    // insert elements from `prev[0]` at the begining of the array
scrollFrom.splice(prev[0].length + initialLength, 0, ...after[0]);      // insert elements from `after[0]` at the "new end" which is after the newly added elements and the already existing elements

Or better yet, use unshift to insert the prev[0] elements and push to insert after[0] elements like so:

scrollFrom.unshift(...prev[0]);
scrollFrom.push(...after[0]);

unshift will insert the new elements before the already existing elements of scrollFrom , whereas push will instert them after.