Why is my state array variable being treated as "pass-by-reference" and mutated when I use-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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.