javascript - 2 次元配列をループすると Uncaught TypeError: property 4 is undefined が発生するのはなぜですか?

Question

だから私はテトリスを構築しています。配列データを作成した後、配列内のすべての文字列が「いっぱい」であるかどうかをチェックし、その下のスペースを空にできるようにすることで、重力を実装しようとしています。ただし、何かが未定義であることを示唆するエラーが表示されます。for ループと for...of ループを試し、グーグルで調べてみました。なぜこのエラーが発生するのですか?どうすれば修正できますか?

const editor = document.getElementById("edit");
var data = [];

function array(x, text) {
  var y = [];
  for (var i = 0; i < x - 1; i++) {
    y.push(text);
  }
  return y;
}

for (var i = 0; i < 20; i++) {
  data.push(array(10, "b"));
}

function draw() {
  var j;
  var i;
  var dataOut = data;
  for (i = 0; i < data.length; i++) {
    for (j = 0; j < data[i].length; j++) {
      if (data[i][j] == "a" && data[i + 1][j] == "b") {
        if (i < data.length - 1) {
          dataOut[i][j] = "b";
          dataOut[i + 1][j] = "a";
        }
      }
    }
  }
  data = dataOut;
  console.log(data);
  requestAnimationFrame(draw);
}
data[0][4] = "a";
requestAnimationFrame(draw);