유사 배열 객체와 반복 작업

가끔 반본적인 객체형태의 데이터를 반복 작업해야 한다면 골머리가 아프다 배열형태라면 쉽게 처리하기 쉽지만 객체형태라면 쉽게 처리가 힘들기에 되도록 배열형태로 값을 주고받곤 했다.

그러던 와중 유사 배열 객체와 이 객체를 반복작업을 할 수 있는 메서드를 알게되었고 유사 배열 객체 (array-like object) 라는 한정적인 객체의 형태(?) 만 가능한 작업으로 보이나 알아두면 좋을 듯 하여 정리하게 됨

쓰게될지는 모르겠음

가장 큰 특징으로 lengh 속성이 따로 가지고 있다는 것과 키값이 순서가 눈에 띈다 그것을 제외하면 객체와 다름 없어 보인다.
실제로 [[Prototype]]: Object 특별하게 다른놈은 아닌듯 하다.

// 유사 배열 객체 모양
const arr_like = {0: 'I', 1: 'am', 2: 'array-like', length: 3} // [[Prototype]]: Object

arr_like[2]; // returns, array-like 
arr_like.length; // returns 3

대표적인 유사 배열 객체(array-like object) 의 형태로 html의 자식요소를 불러오면 이런모양이다

Array.from()

유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

    Array.isArray(Array.from(arr_like)) // true

실제로 객체가 배열로 변경되고 똑같이 매핑만 해주면 되고 Array.from() 의 두번째 인자로 함수를 던져줘서 자연스럽게 매핑해도 된다.

    Array.from(arr_like, (v) => (v)) // ['I', 'am', 'array-like']

자세한 활용방법은 역시나 공식문서를 참고하자

---

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

https://daily.dev/blog/why-do-you-need-to-know-about-array-like-objects