Array-like Object
2024-05-22 오후 11시 45분
2024-06-22 오후 11시 45분
배열은 아니지만 인덱스로 접근할 수 있고 length 속성을 가지는 특수한 배열처럼 보이는 객체
querySelectAll, document.body.children으로 요소를 가져오면 유사배열 객체로 값이 온다.
<div class="text">Hello</div>
<div class="text">World</div>
<div class="text">I'm</div>
<div class="text">Programmer</div>
const texts = document.querySelectorAll('.text');
console.log(texts);
각각의 key가 숫자이고, length 값이 존재하는 객체다.
객체이기때문에 Array.forEach, map, filter등의 메서드를 사용할 수가 없다.
각각의 클래스에 해당되어있는 텍스트를 가져올 때, 방법이 없다고 생각할 수 있다.
따라서 우리는 Array.from() 메서드를 활용해서 새로운 Array를 생성해야 한다.
Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. (MDN)
const texts = document.querySelectorAll('.text');
Array.from(texts).map((text) => console.log(text));
사용법이 좀 어렵다고 느낄수도 있겠다. Array.from으로 변수에
위와 같은 활용을 한다면 코드를 절약할 수 있다.
그래서, Array와 Object 둘다 존재하는데, 이걸 대체 왜알아야해?
놀랍게도 Array-like Object를 리턴하는 API가 간혹가다 종종있다.
이걸 모르고 있다면 왜 배열 메서드가 작동 안하지? 라는 생각을 하는 경우가 존재하게 될 것이다.
구시대의 유물이지만, 당황하지않고 처리하기 위해 알아두자.
댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.
