title: Why does a tetris piece fall all at once instead of one at a time?
body: <p>I am making tetris in JS. When making a block fall, it makes the block reach the bottom of the screen in one draw instead of slowly approaching the bottom. I tried creating a variable that stores the changes to be made so that it only looks at the current board, but no luck. After checking whether the output variable is <code>==</code> to the board, it seems like the board is changing after all, as it returns true. What's going on?</p>
  
  <p>EDIT: I have successfully made a shallow copy of the array. It still falls to the bottom immediately, though. What's going on?
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [];
            function array(x, text) {
                var y = [];
                for (var i = 0; i &lt; x-1; i++) {y.push(text);}
                return y;
            }          
  for (var i=0; i&lt;20; i++){data.push(array(10, "b"));}
  function draw(){
      var j;
      var i;
      var dataOut = [...data];
      for (i = 0; i &lt; data.length - 1; i++){
          for (j = 0; j &lt; data[i].length; j++){
              if (data[i][j] == "a" &amp;&amp; data[i + 1][j] == "b" &amp;&amp; i &lt; data.length - 1) {
                  
                  dataOut[i][j] = "b";
                  dataOut[i + 1][j] = "a";
                 
              }
          }
      }
      data = dataOut;
  }
  data[0][4] = 'a';
  draw();
  console.log(data);</code></pre>
  </div>
  </div>
  </p>