JS:유사배열(Array Like Object)

유사 배열은 생긴것 List(배열)같지만 배열이 아닌 것을 의미한다.

이것이 무슨 말인 고 하니, 배열처럼 생겼지만, 배열이 사용하는 메소드를 자유롭게 사용하지 못하는 것을 말한다.

유사 배열의 종류

1.함수(화살표 함수 표현이 아닌)내의 arguments 

2. jQuery selector 에 의해 반환되는 jQuery object

3.document에서 반환된 객체 (ex document.querySelectorAll() or document.getElementsByClassName())

따라서 유사배열을  '배열'처럼 사용하기 위한 방법들이 있다.

var arrLikeObj={
  0: "0 is 0% of 10.",
  1: "1 is 10% of 10.",
  2: "2 is 20% of 10.",
  3: "3 is 30% of 10.",
  4: "4 is 40% of 10.",
  5: "5 is 50% of 10.",
  6: "6 is 60% of 10.",
  7: "7 is 70% of 10.",
  8: "8 is 80% of 10.",
  9: "9 is 90% of 10.",
};

1.Array.prototype.[method].call()

call()메소드를 사용하여 객체를  배열 메소드에 바인딩 하는 것이다.

Array.prototype.push.call(arrLikeObj, ’10 is 100% of 10.’);

2.ES6문법 사용

유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해  배열 객체를 만든다.

Array.from(arrLikeObj)push.(’10 is 100% of 10.’);

3.스프레스 연산자(spread operator)

const arr =[ ...arrLikeObj ];

arr.push(’10 is 100% of 10.’);

4. Object.values() 사용

const arr=Object.values(arrLikeObj);

arr.push(’10 is 100% of 10.’);

출처

https://medium.com/@sayes2x/what-is-an-array-like-object-f5dc3d4ab3f6
https://dev.to/capscode/what-is-array-like-object-in-javascript-3f5m
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values