Running a function more than once changes an array inside the function

Question

This next example function works just fine:

const data = [1, 2, 3, 4, 5];

function insertAndShift(arr, number) {
  const cutOut = arr.splice(-number);
  return [...cutOut, ...arr];
}

console.log('Output: ', insertAndShift(data, 2));
// Output: [4,5,1,2,3]

However, when I call the function another time, I suddenly get a wrong response:

const data = [1, 2, 3, 4, 5];

function insertAndShift(arr, number) {

  // The next starting array should be [1,2,3,4,5] on both occasions.
  // However, on the second occasion it will only be [1,2,3].
  // Which was the array in the first time the function was called.
  console.log('arr: ', arr);

  const cutOut = arr.splice(-number);
  return [...cutOut, ...arr];
}

console.log('Output: ', insertAndShift(data, 2));
// Output: [4,5,1,2,3]

console.log('Output: ', insertAndShift(data, 3));
// Output: [1,2,3]
// Should be: [3,4,5,1,2]

Is this a scoping issue? Or what is exactly happening here?

splice mutates the array. So after your first call data has changed. — Yoshi
– Yoshi, Commented Nov 20, 2019 at 13:13

Nicolas · Accepted Answer · 2019-11-20 13:17:21Z

3

In Javascript, all, non primitive, variable are passed "by reference", which mean you can modify a variable from inside a function. This is where you need to be careful. Usually, you would clone your array before doing anything with it, this way, the original array won't be affected by your mutations.

const data = [1, 2, 3, 4, 5];

function insertAndShift(arr, number) {
  let clonedArray = [...arr];
  // The next starting array should be [1,2,3,4,5] on both occasions.
  // However, on the second occasion it will only be [1,2,3].
  // Which was the array in the first time the function was called.

  const cutOut = clonedArray.splice(-number);
  return [...cutOut, ...clonedArray];
}

console.log('Output: ', insertAndShift(data, 2));

console.log('Output: ', insertAndShift(data, 3));

edited Nov 20, 2019 at 13:17

answered Nov 20, 2019 at 13:12

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Remi Over a year ago

Nice! Ty. Would you happen to have an article/blogpost regarding this specific topic? Or a keyword I should search for?

Nina Scholz Over a year ago

not all variables are passed by reference ... eg primitive values.

Nicolas Over a year ago

@NinaScholz you are right, i've edited my answer for accuracy.

Remi Over a year ago

Is there a reason you're using let instead of const for the clonedArray?

Nicolas Over a year ago

@Remi you can check out this article I have not red it in it's entirity but it's seams pretty accurate.

|

Nina Scholz · Accepted Answer · 2019-11-20 13:22:55Z

2

Beside of cloning an array, you could take parts directly with Array#slice and build a new array - without using mutating Array#splice.

function insertAndShift(array, number) {
    return [...array.slice(-number), ...array.slice(0, -number)];
}

const data = [1, 2, 3, 4, 5];

console.log(...insertAndShift(data, 2)); // [4, 5, 1, 2, 3]
console.log(...insertAndShift(data, 3)); // [3, 4, 5, 1, 2]

answered Nov 20, 2019 at 13:22

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

Remi Over a year ago

Very nice. I will accept the answer of Nicolas since that answers my question on the 'change of the variable'. But upvoted yours since this is a nice addition to the function.

Collectives™ on Stack Overflow

Running a function more than once changes an array inside the function

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related