JS - Array.from() : Array-like Object(유사 배열) 를 진짜 Array로 바꿔주는 메소드

 

const getarray = document.querySelectorAll("button");

console.log(getarray);

const buttonclass = document.getElementsByClassName("btn");

console.log(buttonclass);

Array.from(buttonclass).forEach((buttonclass) => {
  buttonclass.addEventListener("click", () =>
    console.log("i have been clicked")
  );
});

다음과 같은 코드가 있다.

 

getarray 변수에는 querySelectorAll 이라는 메서드를 사용해서, HTML에 있는 button element 들을 모두 가져오고있다.

 

querySelectorAll 메서드를 사용하여 button element 들을 가져오면, getarray 에는 NodeList 형식으로 가져온 모든 엘리먼트들이 배열처럼 저장된다!

 

하지만 querySelectorAll 메서드가 아닌, 엘리먼트를 가져오는 다른 메서드를 사용하여 중복된 여러 요소를 가져오면

HTMLCollection 이라는 배열형식으로 저장된다. 이떄 HTMLCollection이 글의 제목에서 말하는 Array-like object(유사배열) 이다.

 

그래서 유사배열을 찐 배열처럼 사용하기 위해 Array.from을 이용하여 이벤트 리스너를 달아주고 있는것이다.

 

 

NodeList에 있는 각각 엘리먼트에 이벤트 리스너를 추가하고싶을때 forEach 메서드를 이용하여 추가하면 오류가 발생하지 않는다.

const getarray = document.querySelectorAll("button");

getarray.forEach((btn) => {
  btn.addEventListener("click", () =>
    console.log("i have been clicked")
  );
});

위 코드는 별 문제 없이 잘 동작할 것이다.

하지만 유사 배열인 HTMLCollection 형식을 가진 변수에 똑같은 방법으로 하면 forEach는 작동하지 않을것이다.

왜냐면 유사배열은 forEach 라는 메서드를 가지고 있지 않기때문.

 

const buttonclass = document.getElementsByClassName("btn");

buttonclass.forEach((btn) => {
  btn.addEventListener("click", () =>
    console.log("i have been clicked")
  );
});

위 처럼 작성하면 오류가 날것이다!

 

그래서 이때 사용하는것이 Array.from 메서드이다.

 

이 메서드는 유사배열을 찐 배열처럼 동작하게 해준다!

 

const buttonclass = document.getElementsByClassName("btn");

Array.from(buttonclass).forEach((btn) => {
  btn.addEventListener("click", () =>
    console.log("i have been clicked")
  );
});

Array.from(유사배열) 이런식으로 Array.from메서드로 감싸주면, querySelectorAll 을 사용하지 않고 여러 요소들을 가져온 상황에서 유용하게 이벤트리스너를 달아줄수도있고, 배열 메서드를 사용해야 하는 상황에 유용하게 사용할 수 있다!