[javaScript] classList.toggle 로 n개의 div의 class를 제어

페이지 빌더로 랜딩페이지를 만드는 프로젝트를 하던 도중 특정버튼으로 n개의 div 섹션의 visible 을 제어해야 하는 경우가 생겼다.
페이지 빌더의 특성상 class 를 추가해주는 등의 커스텀 기능은 없었고, section 생성하면 div 엘레멘트가 생성되고 공통 class와 고유식별 id 가 생성되었다.
특정버튼을 클릭하면 이 n개의 고유id 들을 특정해서 해당 div 섹션에 visible 클래스를 toggle 하는 방법으로 하기로 했다.

방법1:

document.addEventListener("DOMContentLoaded", function () {
  const section1 = document.querySelector("#section1");
  const section2 = document.querySelector("#section2");
  const section3 = document.querySelector("#section3");
  const toggleButton = document.querySelector("#toggleButton");
  
  toggleButton.addEventListener("click", function() {
  	section1.classList.toggle("visible");
    section2.classList.toggle("visible");
    section3.classList.toggle("visible");
  })
});

원하는 대로 동작은 하지만 코드가 중복되어 보인다.

Refactor:

document.addEventListener("DOMContentLoaded", function () {
  const toggleButton = document.querySelector("#toggleButton");
  
  toggleButton.addEventListener("click", function() {
  	const ids = ['section1', 'section2', 'section3'];
      ids.forEach(id => {
        document.getElementById(id).classList.toggle('visible');
      });
  })
});