모던 자바스크립트 Deep Dive - 34. 이터러블

둡둡·2024년 2월 23일

Modern Javascript Deep Dive

목록 보기
35/49

34.1. 이터레이션 프로토콜

  • ES6 도입된 이터레이션 프로토콜: 순회 가능한 데이터 컬렉션(자료 구조)을 위한 규칙
  • for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용하도록 일원화
  • 이터러블 프로토콜 (iterable)
    • Symbol.iterator를 프로퍼티 키로 사용하거나 상속 받아 호출하여 이터레이터 프로토콜을 준수한 이터레이터 반환함
    • 이를 준수한 객체를 이터러블이라고 함
    • 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능
  • 이터레이터 프로토콜 (interator)
    • Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터 반환
    • next 메소드: value, done 프로퍼티를 갖는 이터레이터 리절트 객체 반환
    • 이러한 규약을 이터레이터 프로토콜, 이를 준수한 객체를 이터레이터라고 함
    • 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할

34.1.1. 이터러블

  • 이터러블: 이터러블 프로토콜을 준수한 객체
  • Symbol.iterator를 프로퍼티 키로 사용하거나 상속받은 객체
    • 배열, 문자열, Map, Set 등
  • for ... of 문으로 순회 가능
  • 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능
  • 일반 객체는 이터러블이 아님
    • 스프레드 프로퍼티 제안(Stage 4)은 일반 객체에 스프레드 문법 사용 허용

34.1.2. 이터레이터

  • 이터러블 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터 반환
  • 이터레이터의 next 메서드
    • 각 요소를 순회하기 위한 포인터 역할
    • 이터러블을 순회하며 결과를 나타내는 이터레이터 리절트 객체 반환
      • value : 순회 중인 이터러블의 값
      • done : 이터러블의 순회 완료 여부

34.2. 빌트인 이터러블

  • 이터레이션 프로토콜을 준수한 빌트인 이터러블 객체 제공
    • Array : Array.prototype[Symbol.iterator]
    • String : String.prototype[Symbol.iterator]
    • Map : Map.prototype[Symbol.iterator]
    • Set : Set.prototype[Symbol.iterator]
    • TypedArray : TypedArray.prototype[Symbol.iterator]
    • arguments : arguments[Symbol.iterator]
    • DOM 컬렉션 : NodeList.prototype[Symbol.iterator], HTMLCollection.prototype[Symbol.iterator]

34.3. for ... of 문

  • 이터러블을 순회하면서 이터러블 요소를 변수에 할당함
  • for (변수선언문 of 이터러블) { ... }
    • for ... in 문과 유사함 -> 심벌 프로퍼티 키 열거 제외
  • 이터레이터의 next 메서드 호출하여 순회
  • 이터레이터 리절트 객체의 value 값을 변수에 할당함
  • 이터레이터 리절트 객체의 done 값이 true가 되면 순회 중단

34.4. 이터러블과 유사 배열 객체

  • 유사 배열 객체는 이터러블이 아닌 일반 객체
    • Symbol.iterator 메서드가 없으므로 for ... of 문 순회 불가
  • ES6 이터러블 도입하면서 배열, arguments, NodeList, HTMLCollection 객체에 Symbol.iterator 메서드 구현
    • 유사 배열 객체이면서 이터러블
    • arrayLike 제외
  • 유사 배열 객체는 ES6 도입된 Array.from 메서드를 통해 이터러블로 변환 가능

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

  • ES6 이전의 순회 가능한 데이터 컬렉션(배열, 문자열, 유사배열 객체 등)은 다양한 방법으로 순회함
  • ES6 이터레이션 프로토콜을 통해 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화
  • 이터러블은 데이터 공급자의 역할
    • 이터레이션 프로토콜을 규정하여 해당 규정만 지원하도록 구현하면 됨
  • 이터레이션 프로토콜은 하나의 순회 방식을 규정하여, 효율적으로 다양한 데이터 공급자를 사용할 수 있도록 데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할

34.6. 사용자 정의 이터러블

34.6.1. 사용자 정의 이터러블 구현

  • 이터레이션 프로토콜을 준수하도록 Symbol.iterator 메서드 구현
      1. Symbol.iterator 메서드 구현
      1. Symbol.iterator 메서드가 next 메서드를 갖는 이터레이터 반환하도록 함
      1. next 메서드는 done과 value 프로퍼티를 갖는 이터레이터 리절트 객체 반환
      1. done = true 가 되면 반복 중지

34.6.2. 이터러블을 생성하는 함수

  • 수열의 최대값을 인수로 전달받아 이터러블 반환하는 함수 구현 가능

34.6.3. 이터러블이면서 이터레이터인 객체를 생성하는 함수

  • 이터러블의 Symbol.iterator 메서드 호출하면 이터레이터 생성 가능
// 이터러블이면서 이터레이터인 객체
// 이터레이터를 반환하는 Symbol.iterator 메서드와 이터레이션 리절트 객체를 반환하는 next 메서드 소유
{
  [Symbol.iterator]() { returnL this; },
  next() {
    return { value: any, done: boolean };
  }
}

34.6.4. 무한 이터러블과 지연 평가

  • 최대값 없이 구현하면 무한 이터러블 생성 가능
  • 지연 평가 : 데이터가 필요한 시점 이전까지는 생성하지 않다가 필요한 시점에 생성하는 기법
    • 평가 결과가 필요할 때까지 평가를 늦추는 기법
  • 무한 이터러블을 생성하는 메서드에서 데이터 소비자인 for ... of 문이나 배열 디스트럭처링 할당 등이 실행되기 전까지는 데이터를 생성하지 않음
  • 지연 평가를 사용하면 필요한 순간에 생성하므로 빠른 속도와 불필요한 메모리를 소비하지 않음

[출처] 모던 자바스크립트, Deep Dive

profile
괴발개발라이프

0개의 댓글