array-like object 유사 배열 객체 iterable object 이터러블 객체

유사 배열 객체(array-like object)와 이터러블 객체(iterable object)는 두 가지 서로 다른 객체 유형입니다. 이 두 객체 유형의 공통점과 차이점, 특징 및 내부 동작은 다음과 같습니다.

공통점:

둘 다 배열과 유사한 구조를 지니고 있으며, 원소에 접근할 수 있는 방법을 제공합니다.

차이점:

• 유사 배열 객체: 인덱스로 원소에 접근할 수 있고, length 속성이 있지, 배열의 메서드(예: map, forEach 등)를 사용할 수 없는 객체입니다.
• 이터러블 객체: 반복 가능한 프로토콜(iterable protocol)을 구현한 객체로, Symbol.iterator를 통해 얻을 수 있는 이터레이터(iterator)를 통해 순회할 수 있습니다. 배열, 문자, Set, Map 등이 이터러블 객체의 예입니다.

유사 배열 객체의 특징과 내부 동작:

// 유사 배열 객체 생성
const arrayLike = {
  0: "a",
  1: "b",
  2: "c",
  length: ,
};

// 요소 접근과 순회
for (let i = 0; i < arrayLike.length; i++) {
  console.log(arrayLike[i]); // 'a' 'b' 'c'
}

// 배열 메서드 사용 불가
arrayLike.map((value) => value.toUpperCase()); // TypeError arrayLike.map is not a function

이터러블 객체의 특징과 내부 동작:

// 이터러블 객체 생성 (예: 배열)
const iterable = ["a", "b", "c"];

 이터레이터 얻기
const iterator = iterable[Symbol.iterator]();

// next() 메서드를 사용하여 순회
let result = iterator.next();
while (!result.done) {
  console.log(result.value); // 'a' 'b' 'c'
  result = iterator.next();
}

// 반복 가능한 메서드 사용 가능
iterable.forEach((value) => console.log(value.toUpperCase())); // 'A' 'B' 'C'

결론:

• 유사 배열 객체: 원소가 인덱싱되어 있고 length 프로퍼티가 있는 객체이지만, 배열 메서드를 사용할 수 없습니다. Array.from으로 배열로 변환한 후에 배열 메서드를 사용할 수 있습니다.
• 이터러블 객체: Symbol.iterator를 구현한 객체로, 순회는 이터레이터를 통해 수행할 수 있습니다. 이터러블 객체는 순차적인 메서드를 지원하며, 반복 가능한 프로토콜을 사용해 다양한 컬렉션에 대해 통일된 방식으로 작동할 수 있습니다.