[모던 자바스크립트 Deepdive] 읽기 - Iterable

🥽 이터레이션 프로토콜

• 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 미리 약속한 규칙

  ES6에서 도입되었다.

이터레이션 프로토콜에는 2가지가 있다.

• 이터러블 프로토콜
• 이터레이터 프로토콜

🔵 Iterable

이터러블 프로토콜을 준수한 객체를 이터러블이라 한다.
이터러블은 for...of문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.

🔵 Iterator

이터레이터 프로토콜을 준수한 객체를 이터레이터라한다.
이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다.
이터러블의 symbol.iterator 메서드가 반환한 이터레이터는 next메서드를 갖는다.

🥽 for ...of 문

for...of문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.
for (변수선언문 of 이터러블) {}

• 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회한다.
• next 메서드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for...of문의 변수에 할당한다.
• 이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고 true이면 이터러블의 순회를 중단한다.

🥽 이터러블과 유사배열 객체

🔵 유사배열 객체

유사배열 객체는 이터러블이 아니라 일반 객체다.
배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.
length 프로퍼티를 갖기 때문에 for문으로 순회할 수 있고 , 인덱스를 나타내는 숫자형식의 문자열을 프로퍼티 키로 가지므로 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.

유사배열 객체는 이터러블이 아니라 일반 객체다.
Symbol.iterator 메서드가 없으므로 for...of문으로 순회할 수 없다.

🔵 이터러블인 유사배열 객체

• arguments
• NodeList
• HTMLCollection

ES6에서 이터러블이 도입되면서 이 유사배열 객체에는 Symbol.iterator를 구현하여 이터러블이 되었다.

🔵 이터러블이 아닌 유사배열 객체

• arrayLike

🥽 순회를 위한 배열 변환

🔵 Array.from()

• 유사배열 객체 또는 이터러블을 인수로 전달받아 배열로 변환하여 반환한다.

Reference

• 모던 자바스크립트 딥다이브