[javascript] 이터러블(iterable)

이터러블(iterable)

• iterable은 반복이 가능한 데이터 구조를 의미
• for...of나 스프레드(...) 같은 ES6 기능이 바로 이 특징을 활용하는 예로, 기능을 활용해  하나씩 값(value)을 꺼낼 수 있는 객체
• 중요한 조건: 객체 안에 Symbol.iterator 메서드가 있어야 함
• Symbol.iterator는 이터레이터(iterator)를 반환하고, 이 iterator 를 통해 값을 하나씩 순회할 수 있음

---

대표적인 iterable 객체

* 객체는 이터러블이 아님, (따라서 for..of로 바로 순회할 수 없음)

종류	예시	설명
배열	[1,2,3]	값이 순서대로 나옴
문자열	'hello'	문자 하나씩 순회 가능
Map	new Map([[1,'a'],[2,'b']])	키-값 쌍 순회
Set	new Set([1,2,3])	중복 없는 값 순회
arguments	함수 내부 arguments	유사 배열(iterable)
NodeList	document.querySelectorAll('div')	DOM 요소 순회 가능

---

iterable 내부 원리

const iterable = [1,2,3];
const iterator = iterable[Symbol.iterator]();

console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

 

1. for...of가 호출되면, 객체의 Symbol.iterator를 찾음
2. Symbol.iterator()가 이터레이터 객체 반환
3. 이터레이터는 .next() 메서드가 있고, .next()를 호출하면 {value*현재값), done(반복 끝여부)} 객체를 반환
4. done이 true가 될 때 반복 종료

• 이터레이터(Iterator)는 Symbol.iterator()가 반환하는 객체, .next()로 값을 하나씩 반환
• Symbol.iterator : 객체를 이터러블로 만들어주는 특별한 메서드
  
  • 객체가 Symbol.iterator 메서드를 가지고 있어야 for...of, 스프레드, 배열 디스트럭처링 등 반복 기능을 사용할 수 있음
  • Symbol.iterator() 호출 시 이터레이터 객체를 반환