[JS] 이터러블? 이터레이터?

이터레이션 프로토콜

1. 이터러블 프로토콜

• 이터러블 프로토콜을 준수한 객체 -> 이터러블

이터러블

• Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현 or 상속 받은 객체
• for ... of, 스프레드 문법, 배열 디스트럭처링 할당의 대상

스프레드 프로퍼티 제안

• 일반 객체에 스프레드 문법의 사용을 허용

빌트인 이터러블

• Array, String, Map, Set, TypedArray, arguments, DOM 컬렉션(NodeList, HTMLCollection)

2. 이터레이터 프로토콜

• 이터레이터 프로토콜을 준수한 객체 -> 이터레이터
• 객체가 Symbol.iterator의 키 값으로 메소드를 갖고,
  해당 메소드 실행 시, 이터레이터 인스턴스가 반환될 때

이터레이터

• next 메서드를 이용해 이터러블 요소를 탐색하기 위한 포인터 역할을 한다
• next 메서드의 반환 값: 이터레이터 리절트 객체
  - value: 현재 순회 중인 이터러블의 값
  - done: 이터러블의 순회 완료 여부
  

이터레이션 프로토콜의 필요성

• ES6 이전, 순회 가능한 데이터 컬렉션들은 통일된 규약 없이 나름의 다양한 방법으로 순회 가능 했다.
• ES6 에서 순회 가능한 데이터 컬렉션들을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 일원화
  -> 다양한 데이터 공급자(순회 가능한 데이터 컬렉션들)가 하나의 순회 방식을 갖도록 규정

for ... of 문

for (elem of 이터러블) { ... }

• ES6에서 등장
• 이터러블을 순회하면서 이터러블의 요소를 변수에 할당
  - 모든 객체에 적용되는 것이 아닌, 이터러블 객체에 대해서만 적용
• 내부적으로 이터레이터의 next 메서드를 호출,
  이터레이터 리절트 객체의 done 프로퍼티 값이 true이면 순회 중단

• elem에는 원소의 실제 값이 바인딩 됨
• forEach와 달리 break, continue 키워드로 실행 흐름 제어 가능

for ... in 문

for (elem in arr) { ... }

• [[Enumerable]] 값이 true인 프로퍼티 순회하며 열거
• elem에는 원소의 키값이 바인딩 됨

유사 배열 객체

• 마치 배열처럼 인덱스로 프로퍼티 값에 접근 가능하고 length 프로퍼티 갖는 객체
• 이터러블 X
  - 단, arguments, DOM 컬렉션은 유사 배열 객체이면서 이터러블
  
• 유사 배열 객체 or 이터러블 -> 배열로 변환: Array.from 이용하기