Array-like Object (유사배열)

유사배열(Array-like object)은 말그대로 배열같은 객체입니다.

그럼 배열과 같은 특성을 가지고 있어야되는데, 유사배열이라고 인정하는 기준은

1. key값이 0 부터 순차적으로 올라가며, 연속되어야한다.

2. length property를 가져야한다.

입니다.

 

그럼 왜 유사배열을 사용하는지 알아야합니다.

배열처럼 관리하고싶지만 배열의 prototype을 상속받고 싶지 않을때, 즉 메서드를 사용하지 못하게하여 사용자 실수를 방지하고 싶을때 사용합니다.

유사배열은 언제든 배열로 취급하여 사용할 수 있는데, call, apply, bind 를 호출하여 this를 바꾸거나, spread 연산자를 이용하거나, Array.from(유사배열) 을통해 배열로 만들어서 사용할 수 있습니다.

 

유사배열의 대표적인 예 querySelectAll()

DOM 조작을 할때 querySelectAll()로 여러 요소를 한번에 가져오는 경우가 있습니다.

typeof는 당연히 Object가 나오긴 합니다. Js에서 Array라는 자료형은 없으니깐요!

다시한번 Array 인스턴스인지 확인해보면 false가 나옵니다.

Array 메서드중 Array인지 판별하는 메서드를 사용해도 동일한 결과를 반환합니다.

정확히 펼쳐 보면 key:value 로 이루어진 객체임을 알수있고

NodeList를 Prototype으로 가지고있고, NodeList는 Object를 Prototype으로 가지고 있기 때문에, object의 메서드를 모두 사용할 수있습니다.

 

NodeList의 경우에는 forEach() 메서드를 내부적으로 가지고있기 때문에, 배열은 아니지만, 배열처럼 바로 사용할 수 있습니다.

저도 평소에 생각지 못했던 이유가 보통 순회할 때 forEach()를 사용했었는데 자연스레 사용되다보니 Array 였던 것으로 착각했었네요

forEach()는 이렇게 바로 사용할 수 있습니다.

유사배열을 배열으로 사용하기

위에서 언급했듯, 유사배열은 배열이 아니고, Array의 메서드를 가지고 있지도 않습니다.

그래서 Array.prototype.sort()를 호출하면 없는 메서드를 호출한 것이 되죠

하지만 유사배열은 다음과같은 방법들로 배열과 처럼 사용할 수 있습니다.

 

1. call, apply, bind

2. Array.from()

Array.from 으로 배열로 변환하기

bind()를 사용해 this 바인딩하기

apply를 사용해 간접 호출하기

call 을 사용해 간접 호출하기

Apply와 call 의 차이점은, 전달할 인자를 배열로 넘겨주느냐, 그냥 넘겨주느냐의 차이입니다.

예시) 함수의 arguments

유사배열을 사용하고 있는곳은 함수의 arguments 입니다.

함수를 호출하게 되면 arguments를 가지게 되는데, 이는 인자로 넘어온 값들을 유사배열로 가지고있습니다.