[javascript] 유사배열

유사배열

• 유사배열은 배열과 비슷하게 생겼지만 진짜 배열은 아닌 객체
  즉, 배열처럼 인덱스(0, 1, 2...)와 length 프로퍼티가 있어서 배열처럼 접근할 수 있지만,
  배열 메서드(Array.prototype 메서드)는 없는 객체

특징

1. 인덱스로 요소에 접근 가능 (ex, obj[0], obj[1])
2. length 속성 존재
3. 배열 고유 메서드(ex: push(), pop(), forEach())를 사용할 수 없음
4. 반복문 접근 가능(for, while)
5. 일반 객체이므로 배열 메서드를 바로 사용할 수 없음
6. Array.from() 또는 전개 연산자 ...로 배열로 변환 가능
   • 유사배열을 진짜 배열로 만들어야 배열 메서드를 쓸 수 있음
   • Array.from() 함수나 [...obj] (이터러블인 경우)로 변환 가능
7. 반복문으로 접근 가능
   • 유사배열은 인덱스로 접근 가능하기 때문에 for 문이나 while 문으로 순회할 수 있음
     다만 for...of 문법은 유사배열 객체가 이터러블(iterable)일 때만 사용가능
     • 예를 들어 NodeList는 이터러블이어서 for...of 가능
     • arguments 객체는 이터러블이 아니라서 for...of 불가능
8. 배열과 다르게 내부 프로퍼티(심볼 등)는 없음
9. 객체타입 ( typeof 결과는 "object"(일반 객체)이고, 배열의 경우 "object"(배열 타입))

---

유사배열과 배열 차이  

구분	배열(Array)	유사배열(array-like object)
타입	object (배열 타입)	object (일반 객체)
메서드	push(), pop(), forEach() 등 배열 메서드 보유	배열 메서드 없음
인덱스 접근	O	O
length 프로퍼티	O	O
순회 가능 여부	O	for, for...of (NodeList 등 일부 유사배열은 순회 가능)
변환 필요성	없음	필요 (배열 메서드 사용 시 배열로 변환 필요)

---

주요 유사배열의 종류

arguments 객체

• 함수 안에서 자동으로 생성되는, 함수 인자들을 담고 있는 유사 배열.

---

 

DOM 메서드 결과

1) HTMLCollection

• document.getElementsByTagName(), document.getElementsByClassName() 같은 DOM 메서드가 반환.
• 실시간으로 DOM 변화 반영.

2) NodeList

• document.querySelectorAll() 등이 반환.
• 정적(Static)이 기본 (변경 반영 안 됨).
• 일부 메서드(forEach)는 사용 가능하지만 배열은 아님

---

문자열 (String)

• 문자열도 인덱스로 접근 가능 + length 있음.
• 하지만 불변(immutable)이라 수정 불가

---

Rest Parameters 전(구) 시절 패턴

• ES6 이전에는 함수 인자를 다루기 위해 배열 대신 유사 배열(arguments)을 많이 사용.
• 지금은 ...rest 문법으로 대체 가능.

---

사용자가 만든 유사 배열 객체

• length 속성과 인덱스를 직접 부여해서 만들 수 있음.

const pseudoArray = {0: 'apple', 1: 'banana', length: 2};
console.log(pseudoArray[0]); // apple
console.log(pseudoArray.length); // 2

---

유사배열을 진짜 배열로 변환하는 방법

1. Array.from()

const arr = Array.from(arguments);
arr.forEach(item => console.log(item));

2.전개 연산자(...)

const arr = [...nodeList];
arr.forEach(item => console.log(item));

3. Array.prototype.slice.call

const arr = Array.prototype.slice.call(arguments);
arr.forEach(item => console.log(item));