배열 유사배열

 

<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">10</button>

 

const btns = document.getElementsByClassName("btn");
btns.forEach(btn => {
	btn.addEventListener("click", () => console.log("클릭"))
});

 

버튼을 클릭할때마다 콘솔이 찍히게 하려하지만 위의 코드는 에러가 납니다.

btns가 배열처럼 보이지만 사실은 유사배열이기 때문에 forEach같은 배열 메서드를 사용할 수 없습니다.

Array.isArray(btns) 을 찍어보면 false가 나오는걸 보실 수 있습니다.

 

Array.from(btns).forEach(btn => {
	btn.addEventListener("click", () => console.log("클릭"))
});

 

Array.from()으로 배열을 반환받아 사용하면 됩니다.