유사배열 객체(Array-like Objects)와 배열 메서드

FrontEnd .....

 

안녕하세요 웹파트 YB 박희선입니다 🤤

이번 공유과제에서는 2주차 과제를 진행하며 제가 다시한번 개념을 정리한, 유사배열객체에 대해 설명드리도록 하겠습니다 !

 

 

 

---

 

유사배열객체

 

유사 배열 객체는 배열처럼 동작하지만 진짜 배열(Array)은 아닌 객체를 말합니다. 유사배열객체는 다음과 같은 특징을 갖고 있습니다.

• length 속성을 가지며, 정수형 인덱스(0부터 시작)를 갖고있다.
• 배열 메서드를 지원하지않는다. push, pop 같은 대부분의 배열 메서드와 속성을 직접적으로 사용할 수 없다. 
• DOM 요소 리스트, 합수의 인자 객체, 문자열 등이 해당한다.

배열은 다양한 메서드를 사용할 수 있지만, 이로 인해 추가적인 메모리 공간이 필요합니다. 따라서 유사 배열 객체는 배열보다 메모리와 성능 면에서 이점을 가지기 때문에 주로 사용합니다.

 

<div class="text">Wave</div>
<div class="text">Web</div>
<div class="text">AND</div>
<div class="text">SOPT</div>

 

const texts = document.querySelectorAll('.text');
console.log(texts);

 

위의 자바스크립트 구문의 출력은 다음과 같습니다.

 

인덱스 0~3까지의 배열처럼 보이지만, 사실은 객체입니다 !

{
  0:div.text,
  1:div.text,
  2:div.text,
  3:div.text,
  length: 4,
}

 

const array = [1, 2, 3];
const nodes = document.querySelectorAll('text');

Array.isArray(array); // true
Array.isArray(nodes); // false

 

왜 유사 배열 객체와 배열과의 차이점을 알아야 할까요?

 => 바로, 배열의 map, filter, reduce 같은 메서드들을 사용할 수 없기 때문입니다!

 

(NodeList는 forEach를 사용할 수 있습니다.)

 

그러면 어떻게 해야 할까요?

 

바로, Array.from() 메서드를 사용하면 됩니다.

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.(MDN)

 

위의 text 클래스에 있는 글자들을 출력해보겠습니다. 

기존의 texts 변수에 들어있는 유사 배열 객체는 map() 메서드를 사용할 수 없습니다. (Type Error 발생)

const texts = document.querySelectorAll('.text');
Array.from(texts).map((text) => console.log(text)); // [ 'Wave', 'Web', 'AND', 'SOPT' ]

 

이 때, Array.from을 사용해 texts를 새로운 Array로 만들어 map 함수를 사용할 수 있습니다!

 

 

대부분 과제의 핵심 기능은 HTML 태그를 script에서 조작해 구현하는 기능이 대부분이었습니다.

특히, 체크박스 기능을 구현하는 부분이 있었는데요 !!!

 

const checkBoxes = document.querySelectorAll('input[type=checkbox]');

 

보통 위와 같은 구문으로 checkBoxes 변수에 값을 저장하는데, 이때 checkBoxes는 배열이 아닌 유사 배열 객체이기 때문에 조건에 따른 값을 반환하는 filter나, map() 배열 메서드를 사용할 수 없습니다. 

 

const checkedMemberIds = Array.from(checkBoxes).filter((cb)=> ...);

 

이제 우리는 Array.from을 붙여서 filter과 같은 메서드를 이용해 값을 받을 수 있습니다 😀✨✨✨

 

---

결론

유사 배열 객체와 배열은 비슷해 보이지만, 배열 메서드를 직접 사용할 수 있다는 점에서 차이가 있습니다. 유사 배열 객체는 인덱스와 length 속성을 가지지만, 배열처럼 다양한 메서드를 바로 쓸 수는 없죠.

하지만 Array.from()을 사용해 유사 배열 객체를 배열로 변환하면, 배열 메서드도 활용할 수 있습니다. 결국, 유사 배열 객체도 배열로 변환해 배열처럼 다룰 수 있어 유연한 데이터 처리가 가능합니다 !