[JavaScript] 유사배열과 배열의 차이는 무엇일까?

유사배열(Array-Like Object)이란 이름 그대로 배열과 유사한 객체를 말한다. 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다. 자바스크립트에서 유사배열을 사용하기 위해서는 두 가지 조건을 성립해야한다. 먼저 숫자 형태의 indexing이 가능해야하는 것이고, 두번째로는 length 속성을 포함해야하는 것이다. 이는 유사배열을 배열처럼 사용하기 위한 최소한의 조건이다.

 

배열과의 차이점은 배열의 forEach, map, filter, reduce 같은 메서드를 사용할 수 없다는 것이다. 이를 해결하기 위해 먼저 Array.from() 메서드를 활용할 수 있다. Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해새로운Array 객체를 만들 수 있으므로, 이 메서드를 이용해 복사하여 배열로 사용하면 될 것이다. 또는 call, apply, bind을 사용한여 배열의 기능들을 사용할 수 있다. apply와 call은 함수를 호출하는 방법 중 하나로, 다른 객체에 내포되어있는 함수를 내것처럼 사용할 수 있게 해준다고 한다. 이 두가지 방법을 활용해 유사배열 객체를 배열로 활용해 수정할 수 있다.

 

let person = {
  name: '홍길동',
  age: 20,
  length: 2
}

Array.prototype.push.apply(person, ['Hi']);

console.log(person);

출력 결과