index.html の

<button class="current"></button>
      <button></button>
      <button></button>

の代わりに

main.js の

const dots = [];
function setupDots( ) {
    for (let i = 0; i < slides.length; i++) {
      const button = document.createElement('button');
      dots.push(button);
      document.querySelector('nav').appendChild(button);
    }
    dots.classList.add('current');
setupDots();

これらがあればドットが生成される意味がわかりませんでした。
なぜ index.html の nav から button がなくなってもドットが生成されるのでしょうか？

また、style.css の

nav button + button {
  margin-left: 8px;
}

nav button {
  border: none;
  width:16px;
  height: 16px;
  background: #ddd;
  border-radius: 50%;
  cursor:pointer;
}

nav .current {
  background: #999;
}

これらも index.html の nav の中の button と紐づいているからデザインされていたように思うのですが、どのように理解すればよろしいでしょうか？