안녕하세요 웹파트 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()을 사용해 유사 배열 객체를 배열로 변환하면, 배열 메서드도 활용할 수 있습니다. 결국, 유사 배열 객체도 배열로 변환해 배열처럼 다룰 수 있어 유연한 데이터 처리가 가능합니다 !
'2주차' 카테고리의 다른 글
[JavaScript] 이벤트위임 (0) | 2024.10.27 |
---|---|
메모이제이션 - useCallback, useMemo + React.memo (0) | 2024.10.25 |
로컬스토리지, 세션스토리지, 쿠키 (0) | 2024.10.25 |
나랑 약속해줘.. Promise..🤫 (0) | 2024.10.24 |
일급 객체와 JS 함수 뜯어보기 (0) | 2024.10.15 |