「ボタンが生成され、配列に追加される」
という処理をより深く理解しようと思い、
console.log() を反復処理の中や、関数の最後に書き込んでみたのですが

  function setupDots() {
    for (let i = 0; i < slides.length; i++) {
      const button = document.createElement('button');
      console.log(button); // 生成されたボタンを確認　←この部分が main.js:30
      console.log(dots); //この時点での dots の中身を確認
      dots.push(button);
      document.querySelector('nav').appendChild(button);
    }

    dots[0].classList.add('current');
    console.log(dots); // この時点での dots の中身を確認
  }

  updateButtons();
  setupDots();

この時、最初の console.log(button) ですでに
<button class="current"></button> と表示されていて、
current クラスがすでに付いているように見えますがそれはなぜですか。

また、そのすぐ下の console.log(dots) でも空の配列 [] が表示されますが、
詳細を開いてみるとすでに要素が追加された状態に見えます。
この場合どのような順序で処理が行われているのでしょうか。