정의
유사배열객체 : 배열처럼 보이지만 실제 key가 숫자이고 length값을 가지고 있는 객체.
JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사배열객체에 담겨서 온다.
Example
index.html(html파일)
<body>
<div class="text">Hello</div>
<div class="text">World</div>
<div class="text">I'm</div>
<div class="text">Programmer</div>
<script src="javascript.js"></script>
</body>
javascript.js(js파일)
let array = [1,2,3]; //[1,2,3]
let nodes = document.querySelectorAll('.text');// NodeList[div, div, div,..]
let els = document.body.children;// HTMLCollection[div,div,..,script]nodes, els값을 console을 찍어보면 아래와 같은 값이 찍힌다.
얼핏 보기에는 array, nodes, els 모두 비슷하게 []로 감싸져있어 셋 전부 배열처럼 보여 차이점을 잘 모를 수 있다.
하지만 여기서 array는 배열, nodes와 els는 유사배열객체이다.
Array.isArray 메서드를 사용해서 어떤 것이 배열인지를 확인해보자.
console.log(Array.isArray(array));// true
console.log(Array.isArray(nodes));// false
console.log(Array.isArray(els));// false여기서 배열 리터럴로 만든 array만 배열이다.
**배열을 생성하는 방법 중 하나인 배열리터럴 : 0개 이상의 요소를 쉼표로 구분하여 대괄호([])로 묶는다.
유사배열은 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체이다.
const arrayLike = {
0: 'apple',
1: 'banana',
2: 'orange',
length: 3
};
//arayLike[0] === 'apple'
//array.length === 3
하지만!!
배열과 유사배열객체를 구분해야하는 이유는, 유사배열의 경우 배열의 메서드(forEach, map, filter, reduce..)를 사용할 수 없기 때문이다.
이럴때 쓰는 메서드는 -> Array.from()
유사배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변화하여 반환.
Array.from(arrayLike); //['apple', 'banana', 'orange']
참조 : https://www.zerocho.com/category/JavaScript/post/5af6f9e707d77a001bb579d2
'JavaScript' 카테고리의 다른 글
| 객체지향 Class 문법 (0) | 2023.05.26 |
|---|---|
| [JS] 연산자 - 산술연산자 (0) | 2023.04.27 |
| 변수의 정의, 변수 호이스팅, var / let / const의 특징 (0) | 2023.02.13 |
| 스코프 checkpoint 문제 (0) | 2022.03.04 |
| SPA란? (0) | 2022.02.21 |
