JavaScript - Iterable

이소라·2022년 12월 26일
0

JavaScript

목록 보기
17/22

이터러블(iterable)

이터레이션 프로토콜(iteration protocol)

  • ES6에서 도입된 프로토콜

  • 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙

    • ES6 이전의 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체, DOM 컬렉션 등)은 통일된 규약이 없어서 for 문, for...in 문, forEach 메서드 등 다양한 방법으로 순회할 수 있었음
    • ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했음

  • 이터레이션 프로토콜(iteration protocol)

    • 이터러블 프로토콜(iterable protocol)

      • 이터러블 프로토콜 : Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbole.itertor 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환함
      • 이터러블(iterable) : 이터러블 프로토콜을 준수한 객체
        • for...of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있음

    • 이터레이터 프로토콜(iterator protocol)

      • 이터레이터 프로토콜: 이터레이터는 next 메서드를 소유하며 next 메서드를 호출하면 value와 done 프로퍼티를 갖는 이터레이터 리절트 객체(iterator result object)를 반환함
      • 이터레이터(iterator): 이터레이터 프로토콜을 준수한 객체
        • 이터러블의 요소를 탐색하기 위한 포인터 역할을 함

이터러블(iterable)

  • 이터러블 프로토콜을 준수한 객체
    • Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체
  • for...of 문으로 순회 가능함
  • 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능함
const array = [1, 2, 3];
// 배열은 Array.prototype의 Symbol.itertor 메서드를 상속받음
console.log(Symbol.iterator in array); // true

// 이터러블인 배열은 for...of 문으로 순회 가능함
for (const item of array) {
  console.log(item); // 1, 2, 3
}

// 이터러블인 배열은 스프레드 문법의 대상으로 사용 가능함
console.log([...array]); // [1, 2, 3]

// 이터러블인 배열은 배열 디스트럭처링 할당의 대상으로 사용 가능함
const [a, ...rest] = array;
console.log(a, rest); // 1, [2, 3]
  • Symbol.iterator 메서드를 직접 구현하지 않거나 상속받지 않은 일반 객체는 이터러블 프로토콜을 준수하는 이터러블이 아님
    • 따라서, 일반 객체는 for...of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용 불가능함
const obj = { a: 1, b: 2 };
// 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아님
console.log(Symbol.iterator in obj); // false

// 이터러블이 아닌 일반 객체는 for...of 문으로 순회 불가능
for (const item of obj) {
  console.log(item);
}

// 이터러블이 아닌 일반 객체는 배열 디스트럭처링 할당의 대상으로 사용 못함
const [a, b] = obj; // TypeError: obj is not iterable
  • 2021년 1월 TC39 프로세스 stage 4 단계에 제안되어 있는 스프레드 프로퍼티 제안은 일반 객체에 스프레드 문법의 사용을 허용함
const obj = { a: 1, b: 2 };

console.log({ ...obj }); // { a: 1, b: 2 }

이터레이터(iterator)

  • 이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 가짐
    • 이터레이터의 next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터 역할을 함
    • next 메서드를 호출하면, 이터러블을 순처적으로 한 단계씩 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체(iterator result object)를 반환함
      • 이터러블 리절트 객체의 프로퍼티
        • value : 현재 순회 중인 이터러블의 값
        • done : 이터러블의 순회 완료 여부



빌트인 이터러블

  • JavaScript는 이터레이션 프로토콜을 준수한 객체인 빌트인 이터러블을 제공함
빌트인 이터러블Symbol.iterator 메서드
ArrayArray.prototype[Symbol.iterator]
StringString.prototype[Symbol.iterator]
MapMap.prototype[Symbol.iterator]
SetSet.prototype[Symbol.iterator]
TypedArrayTypedArray.prototype[Symbol.iterator]
argumentsarguments.prototype[Symbol.iterator]
NodeListNodeList.prototype[Symbol.iterator]
HTMLCollectionHTMCollection.prototype[Symbol.iterator]



for...of 문

  • for...of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당함
    • 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for...of 문의 변수에 할당함
    • 이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고, true이면 이터러블의 순회를 중단함
for (const item of [1, 2, 3]) {
  console.log(item); // 1, 2, 3
}
  • 위 예제의 for...of 문의 내부 동작을 for 문으로 표현하면 다음과 같음
const iterable = [1, 2, 3];

const iterator = iterable[Symbor.iterator]();

for (;;) {
  const res = iterator.next();
  
  if (res.done) break;
  
  const item = res.value;
  console.log(item); // 1 2 3
}

Note:

  • for...in 문
    • 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거함
    • 이때 프로퍼티 키가 심벌인 프로퍼티는 열거하지 않음



이터러블과 유사 배열 객체

  • 유사 배열 객체
    • 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체
      • length 프로퍼티를 갖기 때문에 for 문으로 순회 가능함
      • 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로 가지므로 인덱스로 프로퍼티 값에 접근 가능함
    • 이터러블이 아닌 일반 객체임
      • 유사 배열 객체에는 Symbol.iterator 메서드가 없기 때문에 for...of 문으로 순회 불가능함
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

for (let i = 0; i < arrayLike.length; i++) {
  console.log(arrayLike[i]); // 1 2 3
}

// TypeError: arrayLike is not iterable
for (const item of arrayLike) {
  console.log(item);
}
  • arguments, NodeList, HTMLCollection은 유사 배열 객체이면서 이터러블임
    • ES6에서 이터러블이 도입되면서 arguments, NodeList, HTMLCollection 객체에 Symbol.iterator 메서드를 구현하여 이터러블이 됨
    • 배열도 Symbol.iterator 메서드를 구현하여 이터러블이 됨



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

  • ES6 전과 후의 순회 가능한 데이터 컬렉션 정의

    • ES6 이전의 순회 가능한 데이터 컬렉션은 통일된 규약 없이 for 문, for...in 문, forEach 메서드 등 다양한 방법으로 순회할 수 있었음
    • ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화함

  • 이터러블은 for...of 문, 스프레드 문법, 배열 디스트럭처링 할당과 같은 데이터 소비자에 의해 사용되므로 데이터 공급자의 역할을 함

    • 다양한 데이터 공급자가 이터레이션 프로토콜을 준수하도록 규정하면, 데이터 소비자는 이터레이션 프로토콜만 지원하도록 구현하면 됨
      • 이터레이션 프로토콜이 데이터 소비자와 데이터 공급자를 연결하는 인터페이스 역할을 함



사용자 정의 이터러블

사용자 정의 이터러블 구현

  • 이터레이션 프로토콜을 준수하지 않는 일반 객체도 이터레이션 프로토콜을 준수하도록 구현하면 사용자 정의 이터러블이 됨
    • 이터레이션 프로토콜을 준수하도록 Symbol.iterator 메서드를 구현하고 Symbol.iterator 메서드가 next 메서드를 갖는 이터레이터를 반환하도록 함
    • 이터레이터의 next 메서드를 호출하면 done과 value 프로퍼티를 가지는 이터레이터 리절트 객체를 반환하도록 함
    • for...of 문은 이터레이터 리절트 객체의 done 프로퍼티가 true가 될 때까지 반복하며 done 프로퍼티가 true가 되면 반복을 중지함
const fibonacci = {
  [Symbol.iterator]() {
    let [pre, cur] = [0, 1];
    const max = 10;
    
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { value: cur, done: cur >= max };
      }
    };
  }
};

for (const num of fibonacci) {
  console.log(num); // 1 2 3 5 8
}
  • 이터러블은 스프레드 문법, 배열 디스트럭처링 할당에도 사용할 수 있음
const arr = [...fibonacci];
console.log(arr); // [1, 2, 3, 5, 8]

const [first, second, ...rest] = fibonacci;
console.log(first, second, rest); // 1 2 [3, 5, 8]

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

  • 이터러블이면서 이터레이터인 객체
    • Symbol.iterator 메서드와 next 메서드를 소유한 객체
      • Symbol.iterator 메서드를 호출하면 this를 반환함
// 이터러블이면서 이터레이터인 객체
{
  [Symbol.iterator]() { return this; }
  next() {
    return { value: any, done: boolean };
  }
}
const fibonacciFunc = function (max) {
  let [pre, cur] = [0, 1];
  return {
    [Symbol.iterator]() { return this; }
    next() {
      [pre, cur] = [cur, pre + cur];
      return { value: cur, done: cur >= max };
     }
  };
};

let iter = FibonacciFunc(10);

for (const num of iter) {
  console.log(num); // 1 2 3 5 8
}

console.log(iter.next()); // { value: 1, done: false}
console.log(iter.next()); // { value: 2, done: false}
console.log(iter.next()); // { value: 3, done: false}
console.log(iter.next()); // { value: 5, done: false}
console.log(iter.next()); // { value: 8, done: false}
console.log(iter.next()); // { value: 13, done: true}

무한 이터러블과 지연 평가

  • 무한 이터러블을 생성하는 함수를 정의해보자
const fibonacciFunc = function (max) {
  let [pre, cur] = [0, 1];
  return {
    [Symbol.iterator]() { return this; }
    next() {
      [pre, cur] = [cur, pre + cur];
      return { value: cur };
     }
  };
};

for (const num of fibonacciFunc()) {
  if (num > 10000) break;
  console.log(num); // 1 2 3 5 8 ... 4181 6765
}

// 배열 디스트럭처링 할당을 통해 무한 이터러블에서 3개의 요소만 취득
const [f1, f2, f3] = fibonacciFunc();
console.log(f1, f2, f3); // 1 2 3

  • 위 예제의 fibonacciFunc 함수는 무한 이터러블을 생성함

    • 하지만 데이터 소비자인 for...of 문이나 배열 디스트럭처링 할당 등이 실행되기 이전까지 데이터를 생성하지 않음

  • 위 예제의 이터러블은 지연 평가를 통해 데이터를 생성함

    • 지연 평가 : 데이터가 필요한 시점 이전까지는 미리 생성하지 않다가 데이터가 필요한 시점이 되면 그때야 비로소 데이터를 생성하는 기법
    • 지연 평가를 사용하면 빠른 실행 속도를 기대할 수 있고 불필요한 메모리를 소비하지 않으며 무한도 표현할 수 있다는 장점이 있음
profile
이소라
이전 포스트

JavaScript - Symbol

다음 포스트

JavaScript - 브라우저의 렌더링 과정

0개의 댓글