TL;DR ⭐️

이터레이션 프로토콜(左 이터러블 프로토콜 + 右 이터레이터 프로토콜) via Poiemaweb

*Symbol.iterator 메서드가 구현되어 있는 객체를 이터러블(iterable)이라고 한다. 간단히 말하면 이터러블은 반복 가능한 객체다. 배열, 문자열은 Symbol.iterator 메서드가 이미 구현되어 있는 대표적인 내장 이터러블이다. 이터러블을 사용하면 어떤 객체든 ➊for of 반복문 ➋전개 문법 ➌배열 구조분해 할당의 대상으로 사용할 수도 있다.*

• for of 문을 사용할 수 있는 객체를 이터러블이라고 한다

• 이터러블엔 Symbol.iterator 메서드(혹은 프로토타입 체인에 의해 상속)가 구현되어 있어야 한다.

  • Symbol.iterator는 for of에 의해 자동으로 호출되며, 명시적으로 호출하는 것도 가능하다
  • Symbol.iterator 메서드가 반환하는 객체는 “이터레이터”라고 부른다
  • 이터레이터는 반복 과정을 처리하며, for of 문은 이터레이터 객체만을 대상으로 동작한다
  • 이터레이터 안에는 반복 대상 객체{ done: Boolean, value: any }를 반환하는 next() 메서드가 구현되어 있어야 한다.
    • done 속성 : 반복의 종료 여부
    • value 속성 : 현재 순회중인 이터러블의 값
    • for of 문에서 값을 순회할 때마다 next() 메서드를 호출해서 value를 가져온다

• 문자열, 배열 같은 내장 이터러블엔 Symbol.iterator가 구현되어 있다. 이들은 모두 이터러블이다.

  console.log(Symbol.iterator in Array.prototype) // true
  console.log(Symbol.iterator in String.prototype) // true
  console.log(Symbol.iterator in Object.prototype) // false
  

• 유사 배열은 인덱스와 length 프로퍼티를 가진, 배열처럼 보이는 객체다. 이터러블과는 다르므로 주의.

• Array.from 메서드를 이용해 유사 배열과 이터러블을 진짜 배열로 만들 수 있다.

Symbol.iterator — 동기 이터레이터

<aside> 💡 데이터 컬렉션을 순회하기 위해 이터레이션 프로토콜(규칙)이 ES6에 도입됐다. 이터레이션 프로토콜을 준수한 객체는 이터러블이라고 부른다. 이터러블은 Symbol.iterator 메서드를 직접 구현하거나, 프로토타입 체인에 의해 Symbol.iterator 메서드를 상속받은 객체를 말한다.

이터러블은 for of 반복문 / 전개 문법 / 배열 구조분해 할당의 대상으로 사용할 수 있다. 배열, 문자열 등은 Symbol.iterator 메서드를 소유하므로 이터러블 프로토콜을 준수한 이터러블이다. 따라서 이들은 반복 가능한 객체이다.

</aside>

이터러블

배열은 Symbol.iterator 메서드가 구현되어 있는 이터러블이다. Symbol.iterator는 자바스크립트의 특수한 내장 심볼이며, 호출하면 이터레이터 객체를 반환한다. 이터레이터 객체는 next() 라는 메서드를 갖는다.

next()를 호출할 때마다 이터러블 객체를 순회하여 value done 프로퍼티를 갖는 객체(반복 대상 객체 혹은 이터레이터 리절트 객체라고 부른다)를 반환한다. value 속성은 현재 순회하는 요소의 값을 나타낸다.

const array = [1, 2, 3]; // 배열은 이터러블 프로토콜을 준수한 이터러블이다
const iterator = array[Symbol.iterator](); // next 메서드를 갖는 이터레이터 객체 반환

// next() 메서드가 반환하는 이터레이터 리절트 객체는 value와 done 프로퍼티를 갖는다
iterator.next(); // { value: 1, done: false }
iterator.next(); // { value: 2, done: false }
iterator.next(); // { value: 3, done: false }
iterator.next(); // { value: undefined, done: true }

위 코드에서 ➊Symbol.iterator 메서드 호출 → ➋이터레이터 객체 반환 → ➌이터레이터 객체의 next() 메서드를 호출하는 과정은 아래 반복문이 작동하는 것과 동일하다.

const array = [1, 2, 3];
for (const num of array) { 
	console.log(num) // 1, 2, 3
}

이터레이터 객체