[ JavaScript ] 이터러블 iterable (feat. 유사배열 array-like)

이터러블 iterable 이란?

• [Symbol.iterator]() 메서드를 가진 객체이다.

• for ...of 문으로 순회할 수 있다,

• 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체

• Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 등이 있다

//배열에서 이터러블 표식을 없애버리면 어떻게 될까?

let arr = [1,2,3]
for(const a of arr) console.log (a) // 정상작동 1,2,3

arr[Symbol.iterator] = null; // 이렇게 하면 순회가 되지 않는다
for(const a of arr) console.log (a) // Uncaught TypeError: arr is not iterable

이터레이터 iterator 란?

{value: 값, done: true/false} 형태의 이터레이터 객체를 리턴하는 next() 메서드를 가진 객체이다.

next 메서드로 순환 할 수 있는 객체이다.

이터러블 vs 유사 배열

이터러블 객체라고 해서 유사 배열 객체는 아니고, 유사 배열 객체라고 이터러블 객체인 것도 아니다.

• 이터러블 : 메서드 Symbol.iterator가 구현된 객체 ; for..of를 사용할 수 있다

• 유사 배열 : 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체 ; 숫자 인덱스와 length 프로퍼티가 있다

어떻게 배열 메서드를 적용할까?

Array.from()

• 이터러블이나 유사 배열을 받아 진짜 Array를 만들어 준다.

  이 과정을 거치면 배열 메서드를 사용할 수 있다.

let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2
};

let arr = Array.from(arrayLike); // (*)
alert(arr.pop()); // World (메서드가 제대로 동작합니다.)

• 매핑mapping 함수를 선택적으로 넘겨줄 수 있다.

//arr = [1,2,3,4,5]
let arr = Array.from(range, num => num * num);

alert(arr); // 1,4,9,16,25

---

참조
https://ko.javascript.info/iterable
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%B4%ED%84%B0%EB%9F%AC%EB%B8%94-%EC%9D%B4%ED%84%B0%EB%A0%88%EC%9D%B4%ED%84%B0-%F0%9F%92%AF%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4