Array gets mutated after array element is passed into splice() method as arguement

Question

I was trying to solve the Water Connection Problem

I have an inputs array

const inputs = [
    [7, 4, 98],
    [5, 9, 72],
    [4, 6, 10],
    [2, 8, 22],
    [9, 7, 17],
    [3, 1, 66]
]

when I pass an element of that array's inner array into splice() method like newArray.splice(-2, 0, item[1]) the original one, input[item] is getting mutated.

Here is the full code

const inputs = [
  [7, 4, 98],
  [5, 9, 72],
  [4, 6, 10],
  [2, 8, 22],
  [9, 7, 17],
  [3, 1, 66]
]

const starts = inputs.filter(element =>
  !(inputs.map(item => item[1]).includes(element[0]))
);

const arrayAppender = (array, element) => {
  const newArray = element;
  let elementAdd;
  let traversalDone = false;
  while (!traversalDone) {
    elementAdd = false;
    array.some(item => {
      if (newArray[newArray.length - 2] === item[0]) {
        newArray.splice(-1, 0, item[1]);
        newArray[newArray.length - 1] = newArray[newArray.length - 1] > item[2] ? item[2] : newArray[newArray.length - 1];
        elementAdd = true;
        return true;
      }
    })
    if (!elementAdd) traversalDone = true;
  }
  return newArray;
}

console.log(starts.sort().length);

starts.forEach((element, index) => {
  starts[index] = arrayAppender(inputs, element);
  console.log(starts[index][0], starts[index][starts[index].length - 2], starts[index][starts[index].length - 1]);
});

at the end of execution inputs[1] changes from [5, 9, 72] to [5, 9, 7, 4, 6, 10]

when I tried to see what causes the change, newArray.splice(-1, 0, item[1]) ; this line of code was what's triggering it (found using debugger).

The code is working and doing what it's supposed to do, But I'm very much curious to see what's causing the above mentioned odd behavior and how can this be solved.

Thanks in advance.

`const newArray = element;` <-- this does not create a new array. It still is the same array, with just a new variable referencing it. Any mutation to the array will be visible via whichever variable that references this array. — trincot, May 03 '21 at 11:37
[Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) — Andreas, May 03 '21 at 11:38
@trincot `element` is the element of `starts` array, which was a the result of filter method on inputs array. Does filter method also produce a reference than a copy ? — me.nkr, May 03 '21 at 11:45
This is unrelated to `filter`. When you pass an array as argument to a function, then the variable that receives that argument will still be that same array. This is true for all objects (also arrays): they are references. — trincot, May 03 '21 at 11:52

score 1 · Accepted Answer · answered May 03 '21 at 11:44

starts array is new array but it has only the reference of inner array like [7, 4, 98], which you are passing as an element parameter in arrayAppender function and then referencing with new variable newArray. So this part you can modify by using spread operator as below.

const arrayAppender = (array, element) => {
  const newArray = [...element]; // spread operator to create new array
  // your code......
};

Array gets mutated after array element is passed into splice() method as arguement

1 Answers1