34.1 이터레이션 프로토콜
- 이터레이션 프로토콜: ES6, 순회 가능한 데이터 컬렉션 (자료구조)을 만들기 위해
ECMA Script 사양에서 정의하여 미리 약속한 규칙
- 이터러블 프로토콜
- 이터러블; 순회 가능한 자료구조
- for ... of 문으로 순회 가능, 스프레드/디스트럭쳐링 할당 대상으로 사용 가능
- 이터레이터 프로토콜
- 이터레이터; next 메서드 소유, next 메서드 호출하면 이터러블 순회, value, done 프로퍼티 갖는 객체 반환
- 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할
- 이터러블
- 일반 객체는 이터러블이 아님 (객체 리터럴)
- 일반 객체에 스프레드 문법 사용은 허용 (2021.1 TC39 stage 4)
- 이터레이터
- 이터러블의 Symbol.iterator 메서드 호출 시 이터레이터 반환
- 이터레이터는 next 메서드 가짐
- next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터 역할
- 순회 결과를 나타내는 이터레이터 result 객체 반환
- value 프로퍼티는 현재 순회 중인 이터러블의 값, done 프로퍼티는 이터러블의 순회 완료 여부 나타냄
34.2 빌트인 이터러블
- Array, String, Map, Set, TypedArray, arguments, DOM 컬렉션 (NodeList / HTMLCollection)
34.3 for ... of 문
- 이터러블 순회하면서 이터러블의 요소를 변수에 할당
- 내부적으로 이터레이터의 next 메서드 호출하여 이터러블 순회
- next 메서드가 반환한 이터레이터 result 객체의 value 프로퍼티 값을 for ... of 문의 변수에 할당
34.4 이터러블과 유사 배열 객체
- 유사 배열 객체; 마치 배열처럼 인덱스로 프로퍼티 값에 접근 가능, length 프로퍼티 갖는 객체
- for문으로 순회 가능, 인덱스로 프로퍼티 값 접근 가능
- 유사 배열 객체는 이터러블이 아닌 일반 객체임
- Symbol.iterator 메서드 없으므로 for ... of 문으로 순회 불가
- ES6 Array.from 메서드 이용하여 배열로 변환 가능
34.5 이터레이션 프로토콜의 필요성
- ES6, 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일,
for ... of 문, 스프레드 문법, 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화시킴
- 이터러블; data provider 역할
- 이터레이션 프로토콜; 다양한 데이터 provider가 하나의 순회 방식 갖도록 규정하여,
데이터 consumer가 효율적으로 다양한 데이터 provider를 사용할 수 있도록
데이터 consumer와 데이터 provider를 연결하는 인터페이스 역할
34.6 사용자 정의 이터러블
- 사용자 정의 이터러블 구현
- 이터레이션 프로토콜 준수하도록 Symbol.iterator 메서드 구현,
Symbol.iterator 메서드가 next 메서드 갖는 이터레이터 반환하도록 함
- 이터러블을 생성하는 함수
- 인수로 전달받아 이터러블 반환하는 함수
- 이터러블이면서 이터레이터인 객체를 생성하는 함수
- Symbol.iterator 메서드와 next 메서드를 소유한 이터러블이면서 이터레이터
- 무한 이터러블과 지연 평가
- 무한 수열 구현 가능
- done 프로퍼티 생략
- lazy evaluation을 통해 데이터 생성 (데이터가 필요한 시점이 되면 그 때 비로소 데이터 생성)
- 이터러블 순회 시 이터레이터 내부의 next 메서드 호출할 때 바로 데이터가 생성됨
- 불필요한 데이터 미리 생성하지 않고, 필요한 데이터를 필요한 순간에 생성 가능
- 빠른 실행 속도 기대, 불필요한 메모리 소비 X, 무한도 표현 가능
'Books > 모던 JS Deep Dive ✔️' 카테고리의 다른 글
[모던 JS Deep Dive] 36장 - 디스트럭처링 할당 (0) | 2022.01.20 |
---|---|
[모던 JS Deep Dive] 35장 - 스프레드 문법 (0) | 2022.01.20 |
[모던 JS Deep Dive] 33장 - 7번째 데이터 타입 Symbol (0) | 2022.01.19 |
[모던 JS Deep Dive] 32장 - String (0) | 2022.01.19 |
[모던 JS Deep Dive] 31장 - RegExp (0) | 2022.01.19 |
댓글