이터러블, 이터레이터란?

Iterable 객체

반복 가능한(iterable, 이터레블)객체는 배열을 일반화한 객체다. 이터러블이라는 개념을 사용하면 어떤 객체든 for..of 반복문을 적용할 수 있다.

배열은 대표적인 이터러블이다. 배열 외에도 다수의 내장 객체가 반복 가능하다. 문자열 역시 이터러블의 예이다.

이터러블과 유사배열

• 이터러블(iterable)은 메서드 Symbol.iterator 가 구현된 객체다.
• 유사 배열(array-like)은 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체다.

브라우저나 호스트 환경에서 자바스크립트를 사용해 문제를 해결할 때 이터러블 객체나 유사 배열 객체 혹은 둘 다인 객체를 만날 수 있다.

이터러블 객체(for..of를 사용할 수 있다)이면서 유사 배열 객체(숫자 인덱스와 length 프로퍼티가 있다)인 문자열이 대표적인 예이다.

이터러블 객체라고 해서 유사 배열 객체는 아니다. 유사 배열 객체라고 해서 이터러블 객체인 것도 아니다. 위 예시의 range는 이터러블 객체이긴 하지만 인덱스도 없고, length 프로퍼티도 없으므로 유사 배열 객체가 아니다.

//인덱스와 length 프로퍼티가 있음 => 유사배열
let arrayLike = {
	0: "Hello",
	1: "World",
	length: 2
};

//Symbol.iteraotr가 없으므로 에러 발생
for (let item of arrayLike) {}

이터러블과 유사 배열은 대개 배열이 아니기 때문에, push, pop 등의 메서드를 지원하지 않습니다. 이터러블과 유사 배열을 배열처럼 다루고 싶을 때 이런 특징은 불편함을 초래한다. range에 배열 메서드를 사용해 무언가를 하고 싶을때는 어떻게 하면 좋을까?

Array.from

범용 메소드 Array.from은 이터러블이나 유사 배열을 받아 ‘진짜' Array를 만들어준다. 이 과정을 거치면 어터러블이나 유사 배열에 배열 메서드를 사용할 수 있다.

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

let arr = Array.from(arrayLike);
alert(arr.pop());

Array.from은 객체를 받아 이터러블이나 유사 배열인지 조사한다. 넘겨 받은 인수가 이터러블이나 유사 배열인 경우, 새로운 배열을 만들고 객체의 모든 요소를 새롭게 만든 배열로 복사한다.

즉,

for..of 를 사용할 수 있는 객체를 이터러블이라고 부른다.

• 이터러블엔 메서드 Symbol.iterator가 반드시 구현되야 한다.
  • obj[Symbol.iterator]의 결과는 이터레이터라고 부른다. 이터레이터는 이어지는 반복과정을 처리한다.
  • 이터레이터 객체엔 {done: Boolean, value: any}을 반환하는 메서드 next()가 반드시 구현되야 한다. done:true은 반복이 끝났음을 의미하고 그렇지 않은 경우엔 value가 다음 값이 된다.
• 문자열이나 배열 같은 내장 이터러블에도 Symbol.iterator가 구현되어 있다.

참고자료 -

 

iterable 객체

iterable 객체