[JS] 유사배열 객체

유사배열 객체란?
배열과 유사한 동작을 하는 객체
유사배열 겍체는 일반적으로 배열 메서드를 사용할 수 없는 객체들 중에서도 length 프로퍼티를 가지고있으며, 숫자 인덱스를 사용하여 접근 가능

유사배열 객체?

유사배열 객체는 다양한 DOM객체에 많이 사용되는데 예를 들어 querySelctolrAll()메서드로 얻어진 DOM요소들은 NodeList 객체로 반환되며
이 NodeList 객체를 유사배열 객체이다
또한 arguments객체 역시 유사배열 객체이다

유사배열 객체에는 배열 메서드를 직접 사용할 수 없기 때문에 Array.prototype객체의 메서드를 빌려와서 사용해야하는데 이를 위해서 call()이나 apply()메서드를 사용하여 this 값을 배열 객체로 지정하거나 Array.from() ( 얕은복사 ) 를 사용해야한다

유사배열은 당연히 배열이아니기 때문에 배열에 사용하는 메서드(forEach, filter, reduce, map)등을 사용할 수 없다

//유사배열 형태

const suwan = {
	key : value,  //key 값은 숫자
    length : 1,

}

Array.from() 을 이용해서 유사배열 객체를 새로운 Array객체로 처리 예제

let arrObj = {
	0 : "Hi",
    1 : "Nihao",
    2 : "Konnichiwa",
    length : 3,
 };
 Array.from(arrObj).map((element)=>console.log(element));

유사배열 객체를 얕게 복사(Array.from())해 새로운 Array 객체를 만든다

NodeList 객체 처리 예제

const items = document.querySelectorAll(".item");
Array.prototype.forEach.call(items, function(item) {
  console.log(item);
});

위 코드에서는
1. querySelectorAll메서드로 .tiem클래스를 가지는 모든 DOM요소를 가져옴
2. items 변수에 할당
3. Array.prototype객체의 forEach()메서드를 call()메서드를 사용하여, items 객체를 첫번째 인자로 전달
--> forEach() 메서드가 items객체를 배열로 취급하여 사용할 수 있게된다

arguments 객체 처리 예제

function myFunction() {
  const args = Array.prototype.slice.call(arguments);
  console.log(args);
}

myFunction(1, 2, 3);

위 코드에서는
1. myFunction() 함수가 호출될 때 전달된 인자들을 arguments객체로 받아옴
2. Array.prototype객체의 slice() 메서드를 call()을 사용하여,
arguments 객체를 첫번째 인자로 전달
--> slice() 메서드가 arguments객체를 배열로 취급하여 사용할 수 있게된다