배열일까? 아닐까? 유사 배열 객체

 

목차
1. 유사 배열객체란?
2. 무슨 차이일까?
3. 유사배열 객체에 어떤 것이 있을까?
4. 배열로 변환하기

 

1. 유사 배열 객체란?

• 배열처럼 인덱스를 통해 요소에 접근할 수 있는 객체 

js에서 DOM을 제어하다가 보면 여러 요소를 선택하여 어떤 동작을 할 때가 있다. 배열처럼 여러 요소를 가지고 있는 요소를 제어할 때면 배열에 관한 메서드를 사용하려 했지만 잘 안되는 경우가 있었을 것이다. 왜 그랬는지 알아보자.

<div class="item">첫번째 요소</div>
<div class="item">두번째 요소</div>
<div class="item">세번째 요소</div>
<div class="item">네번째 요소</div>
<div class="item">다섯번째 요소</div>

<script>
    const list = document.querySelectAll("item");
    console.log(list);
</script>

querySelectorAll을 사용하여 요소들을 선택하면 이렇게 배열의 모습으로 HTML요소를 가져올 수 있다. 

이와 같은 형태는 우리가 흔히 알고 있는 배열과 유사하지만 실상은 요소를 의 주소를 가지고 있는 키와 값으로 이루어진 객체이다. 그와 동시에 배열처럼 인덱스를 통해 각각의 요소를 접근할 수 있다. 하지만 배열과는 다르기 때문에 배열에서 접근할 수 있는 map(),push(), pop() 같은 메서드에는 접근할 수 없다. 

 

2. 무슨 차이일까?

1) 배열 매서드 접근 여부

=> 배열은 당연히 Array의 객체로서 배열 메서드에 접근할 수 있지만 유사배열 객체는 일반 객체이기 때문에 배열 메서드에 접근하여 사용할 수 없다.

 

2) 자료구조

=>  배열은 연속된 메모리 공간에 요소를 저장하는 자료구조지만 유사 배열 객체는 일반 객체이며, 프로퍼티로 숫자형 인덱스를 가지고 있어 배열처럼 보일 뿐이다.

 

3. 유사 배열 객체는 어떤 것이 있을까?

1) DOM 컬렉션

-> querySelector(), getElementsByClassName()같이 DOM에 대한 컬렉션을 반환하는 메서드를 통해 생성된 객체

 

2) 아큐먼트 객체

-> arguments 또한 인덱스로 접근할 수 있는 유사배열 객체다 

 

4. 배열로 변환하기

코드를 작성하다 보면 메서드를 사용하기 위해 유사배열 객체를 배열로 변환해야하는 경우가 있다. 그런 경우 어떻게 해야할까? 

NodeList인 유사배열 객체를 배열로 변환하는 방법을 알아보도록 한다. 

<div class="item">첫번째</div>
<div class="item">두번째</div>
<div class="item">세번째</div>
<div class="item">네번째</div>
<div class="item">다섯번째</div>

 

1) Array를 통해 배열로 변환

Array클래스에는 유사배열 객체를 얕은 복사하는 정적 메서드인 from메서드가 있다. 해당 메서드를 사용하여 배열로 변환할 수 있다. 

<script>
    const list = document.querySelectorAll(".item");
    const arr = Array.from(list);
</script>

 

2) 반복을 통해 배열에 추가

유사배열 객체도 인덱스로 접근할 수 있는데 배열에서 사용가능한 forEach를 사용하여 각각의 요소를 일반 배열에 추가하면 배열로 사용할 수 있다. 

<script>
    const list = document.querySelectorAll(".item");
    const arr = []
    list.forEach(el => { arr2.push(el) });
</script>

 

3) 스프레드 연산자를 사용한 변환

스프레드 연산자는 연결, 복사를 하는데 다방면으로 이용되는 연산자다. 이것을 이용하여 새로운 배열에 기존 배열을 복사하여 할당하면 좀더 쉽게 배열로 변환할 수 있다.

<script>
    const list = document.querySelectorAll(".item");
    const arr3 = [...list];
</script>