Why is my state array variable being treated as "pass-by-reference" and mutated when I use it as a parameter to another function?

Question

I have a simple component here where I set a state variable called input to the value of an array of numbers. Then, within useEffect I call a function that randomizes the initial state array, and puts the results in a new state variable called output.

I need my input array to stay in the same order. However, it is being mutated when I call the shuffleArray function.

I thought there was no way to alter the value held by a variable passed as a parameter, which would be possible if JavaScript supported passing by reference.

const App = () => {
  const [input, setInput] = React.useState([90, 32, 28, 8, 21, 24, 64, 92, 45, 98, 22, 21, 6, 3, 27, 18, 11, 56, 16, 42, 36, 2, 60, 38, 24, 8, 16, 76, 62, 14, 84, 32, 24, 18, 8, 5, 25, 68, 65, 26, 22, 2, 52, 84, 30, 8, 2, 90, 5, 34, 56, 16, 42, 36]);

  const [output, setOutput] = React.useState([]);

  const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
  }
  
  React.useEffect(() => {
      setOutput(shuffleArray(input));
  }, [])
  
  return (
    <div>
      [
       {
           input.length > 0 ?
               input.map((n, i) => (
                   <span key={i}>
                     { (i? ", " : "") + n }
                   </span>
               ))
               : 
               "No array..."
       }
      ]
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

`shuffleArray` mutates the array in place. It does not create a copy of the array first. — Đinh Carabus, Dec 17 '21 at 19:28
Please review [Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/q/518000) - you cannot change what a variable is assigned to, however objects can be mutated without reassigning a variable. These are two different concepts. — VLAZ, Dec 17 '21 at 19:41
@VLAZ Ohhhhh wait. I was aware that Objects were the exception to the rule. I wasn't considering that the Array is indeed an Object. Okay that makes sense. Thanks! — silencedogood, Dec 17 '21 at 19:43
Objects aren't really exceptions. The rule is the same - you cannot change what a variable is assigned to by passing its value to a function: `foo(x)` cannot reassign `x` via the parameter only. However, primitives cannot be mutated - if you wan to change the `4` to a `2`, for example, you need to do it through reassignment. Object properties can be altered without reassigning. — VLAZ, Dec 17 '21 at 19:47
@VLAZ Perhaps my phrasing was off. But I get it. My understanding of the rule was simply incorrect. Thanks again! — silencedogood, Dec 17 '21 at 19:50

score 1 · Accepted Answer · edited Dec 17 '21 at 20:00

The input is changed because that's the way pass-by-value works. Primitives cannot be mutated without reassignment. However, when it comes to objects (and arrays, as in this case), properties of the object can be mutated without reassignment.

If you want to keep input unchanged, you can use Array.from instead and manipulate a copy of the array.

const App = () => {
  const [input, setInput] = React.useState([90, 32, 28, 8, 21, 24, 64, 92, 45, 98, 22, 21, 6, 3, 27, 18, 11, 56, 16, 42, 36, 2, 60, 38, 24, 8, 16, 76, 62, 14, 84, 32, 24, 18, 8, 5, 25, 68, 65, 26, 22, 2, 52, 84, 30, 8, 2, 90, 5, 34, 56, 16, 42, 36]);

  const [output, setOutput] = React.useState([]);

  const shuffleArray = (array) => {
    const shuffled = Array.from(array);
    for (let i = shuffled.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = shuffled[i];
        shuffled[i] = shuffled[j];
        shuffled[j] = temp;
    }
    return shuffled;
  }
  
  React.useEffect(() => {
      setOutput(shuffleArray(input));
  }, [])
  
  return (
    <div>
      [
       {
           input.length > 0 ?
               input.map((n, i) => (
                   <span key={i}>
                     { (i? ", " : "") + n }
                   </span>
               ))
               : 
               "No array..."
       }
      ]
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

score 1 · Answer 2 · answered Dec 17 '21 at 19:58

1

Javascript actually passes Objects and Arrays by "Copy of a Reference" as explained in this SO answer: https://stackoverflow.com/a/13104500/17704187

So your shuffleArray function actually mutates the contents of the input array.

answered Dec 17 '21 at 19:58

TomSt

11
1

Why is my state array variable being treated as "pass-by-reference" and mutated when I use it as a parameter to another function?

2 Answers2