탭기능 만들며 배우는 for 반복문 2 바닐라로만 짤때요

let buttonAll = document.querySelectorAll(".tab-button");
let tabAll = document.querySelectorAll(".tab-content");

for (let i = 0; i < buttonAll.length; i++) {
  buttonAll[i].addEventListener("click", function () {
    buttonAll.forEach((el) => {
      el.classList.remove("orange");
      console.log(el);
    });
    buttonAll[i].classList.add("orange");

    tabAll.forEach((el) => {
      el.classList.remove("show");
    });
    tabAll[i].classList.add("show");
  });
}

요런식으로 작성해도 괜찮죠?

foreach는 아직 배운거 아닌데 제이쿼리 없이 for문 만으로 작성하니 코드가 반복되는 부분도 많고 너무 지저분 하더라구요