[JS] 자바스크립트 이터러블 Iterable 총 정리

TL;DR ⭐️

---

이터러블/이터레이터 프로토콜 - 이미지 출처 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 — 동기 이터레이터

---

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

 

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

 

이터러블

배열은 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
}

 

이터레이터 객체

아래 range 변수는 숫자 간격을 from(1)과 to(5) 속성으로 나타내고 있는 일반적인 객체다. 일반 객체는 이터러블이 아니므로 반복문을 돌리면 에러가 발생한다. 하지만 Symbol.iterator 메서드를 추가하면 반복 가능한(이터러블) 객체로 만들 수 있다.

const range = { from: 1, to: 5 };

for (const num of range) {
  console.log(num); // Error! range is not iterable
}

 

range 객체에 Symbol.iterator 메서드를 추가하고, 이 메서드를 호출하면 next() 메서드를 갖는 이터레이터 객체를 반환해야 된다. for of 반복문은 이터레이터 객체만을 대상으로 동작한다.

// 코드 참고 JavaScript Info
// ⑴ for of 시작 시 Symbol.iterator 메서드를 호출한다
range[Symbol.iterator] = function () {
  // ⑵ Symbol.iterator는 이터레이터 객체를 반환해야 된다
  // for of 문은 이터레이터 객체를 대상으로 동작하기 때문이다
  return {
    current: this.from,
    last: this.to,

    // ⑶ for of 문을 순회할 때마다 next() 메서드가 호출된다
    next() {
      // ⑷ next()는 { done: Boolean, value: any } 객체를 반환해야 된다
      if (this.current <= this.last) {
        return { done: false, value: this.current++ };
        // current++는 후위 증감 연산자므로 증가하기 전 값을 반환해서 value 속성에 할당된다
      } else {
        return { done: true };
      }
    },
  };
};

 

다시 for of 문을 실행해보면 정상적으로 동작한다.

for (const num of range) {
  console.log(num); // 1, 2, 3, 4, 5
}

 

💡 정리하면 Symbol.iterator를 호출해서 반환한 이터레이터 객체와, 이 객체 안에 정의한 next() 메서드에 의해 반복문에서 사용할 값을 만들어내는 구조다.

 

1. for of 반복문 시작 → Symbol.iterator 호출 → 반한된 이터레이터 객체를 대상으로 동작
   1. Symbol.iterator가 없으면 에러가 발생한다
   2. Symbol.iterator는 항상 next() 함수가 포함된 이터레이터 객체를 반환해야 된다. ⚡️
2. for of 반복문은 순회할 값을 가져오기 위해 next() 메서드 호출
   1. next() 메서드의 반환값은 { done: Boolean, value: any } 형태의 객체여야 한다. ⚡
   2. done 속성은 반복의 종료 여부를 나타낸다.
   3. value 속성은 현재 순회중인 이터러블의 값이다.

 

객체 자체를 이터레이터로 만들기

range 객체 자체를 이터레이터 객체(range[Symbol.iterator]() 반환값)와 반복 대상 객체(next() 반환값)를 포함하는 이터레이터로 만들면 코드를 더 간결하게 작성할 수 있다.

const range = {
  from: 1,
  to: 5,

  [Symbol.iterator]() {
    this.current = this.from;
    return this;
  },

  next() {
    if (this.current <= this.to) {
      return { done: false, value: this.current++ };
    } else {
      return { done: true };
    }
  },
};

 

💡 range.to에 Infinity를 할당하면 range는 무한대가 된다. 많은 난수를 생성해야될 때 유용.

1. for of 반복문 시작
2. range[Symbol.iterator]() 메서드 호출
3. range 객체 반환. 이 객체엔 아래 2개를 모두 포함하므로 for of 문도 잘 작동한다.
   1. 반복 대상 객체를 반환하는 필수 메서드 next()
   2. 반복 진행 상태를 나타내는 this.current

 

명시적으로 이터레이터 호출하기

문자열도 이터러블이다. 따라서 for of 문으로 순회할 수 있다.

const str = 'hello';
for (const letter of str) console.log(letter); // h e l l o

 

문자열에 대한 이터레이터를 만들고, 이를 직접 호출하는 방법으로 문자열을 순회할 수도 있다. 반복 시작 → 반복 중지 → 다른 작업 수행 → 다시 반복 하는 방식으로 반복 과정을 쪼갤 수 있는 장점이 있다. 

const str = 'hello';
const iterator = str[Symbol.iterator](); // StringIterator {}

while (true) {
  const { value, done } = iterator.next();
  if (done) break;
  console.log(value); // h e l l o
}

 

커스텀 이터러블로 피보나치 구현하기 ⭐️

💡 배열이나 문자열 등은 모든 데이터를 메모리에 확보한 다음 데이터를 공급한다. 반면 이터러블을 사용하면 이터러블이 데이터 공급자 역할을 하며, 지연 평가를 통해 데이터를 생성한다. 지연 평가는 데이터가 필요한 시점이 될때 데이터를 생성하는 기법이다. 지연 평가를 사용하면 불필요한 메모리를 소비하지 않고, 무한도 표현할 수 있는 장점이 있다.

 

일반 객체를 이터러블로 만들어서 피보나치 수열(1, 2, 3, 5, 8, ...)을 반환하는 객체를 구현할 수 있다.

// 피보나치 수열을 반환하는 이터러블 객체
const fibonacci = {
  // Symbol.iterator 메서드를 구현해서 이터러블 프로토콜을 준수한다
  [Symbol.iterator]() {
    let [pre, cur] = [0, 1];
    const max = 10; // 최대값

    // Symbol.iterator 메서드는 next 메서드를 포함한 "이터레이터 객체"를 반환한다
    return {
      // fibonacci 객체를 순회할 때마다 next 메서드가 호출된다
      // next 메서드는 "이터레이터 리절트 객체"를 반환한다
      next() {
        [pre, cur] = [cur, pre + cur]; // [1, 1] [1, 2] [2, 3] [3, 5] ...
        return {
          value: cur,
          done: cur >= max,
        };
      },
    };
  },
};

// fibonacci 객체는 이터러블 프로토콜을 준수했으므로 for of 문으로 순회할 수 있다
for (const num of fibonacci) {
  // for of 문은 done 프로퍼티가 true가 될 때까지 반복한다.
  // for of 내부에서 break 문을 사용할 수 있다. *ex) if (num >= 10) break;*
  console.log(num); // 1 2 3 5 8
  // 13부터 max 값(10) 이상이므로 done 프로퍼티가 true가 돼서 더이상 순회하지 않는다
}

// spread 문법(전개연산자)을 이용해 이터러블을 배열로 변환할 수 있다
const fiboNum = [...fibonacci]; // [1, 2, 3, 5, 8]

// 이터러블은 spread 문법, 구조분해할당, Map/Set 생성자에도 사용된다
const [first, second, ...rest] = fibonacci; // 1 2 [3, 5, 8]

 

위 예제의 이터러블은 외부에서 최대 반복 횟수를 지정할 수 없다. 이를 개선하려면 최대 반복 횟수인 max를 인자로 받아 이터러블이면서 이터레이터인 객체를 반환하는 함수를 만들면 된다. 이터러블이면서 이터레이터인 객체를 생성했으므로 Symbol.iterator 메서드를 호출하지 않아도 된다(생성한 객체에 next 메서드가 이미 구현되어 있으므로).

// 아래 객체는 Symbol.iterator, next 메서드를 모두 소유했으므로 이터러블이면서 이터레이터다
{
  [Symbol.iterator]() { return this; }, // next 메서드를 갖는 이터레이터 반환
  next() { /* ... */ }
}

 

// 이터러블이면서 이터레이터인 객체를 반환하는 fibonacci 함수
const fibonacci = (max) => {
  let [pre, cur] = [0, 1];

  return {
    // 이터러블이면서 이터레이터인 객체 반환
    [Symbol.iterator]() {
      return this;
    },
    next() {
      [pre, cur] = [cur, pre + cur]; // [1, 1] [1, 2] [2, 3] [3, 5] ...
      return { value: cur, done: cur >= max }; // 이터레이터 리절트 객체 반환
    },
  };
};

// iter는 이터러블이면서 이터레이터
let iter = fibonacci(10);

// 여기서 iter는 이터레이터
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}

iter = fibonacci(20);

// 여기서 iter는 이터러블
for (const num of iter) console.log(num); // 1 2 3 5 8 13

 

next() 메서드가 반환하는 이터레이터 리절트 객체의 done 프로퍼티를 생략해서 무한 이터러블(무한의 피보나치 수열 생성)을 구현할 수도 있다.

// 무한 이터러블을 생성하는 fibonacci 함수
const fibonacci = () => {
  let [pre, cur] = [0, 1];

  return {
    [Symbol.iterator]() {
      return this;
    },
    next() {
      [pre, cur] = [cur, pre + cur]; // [1, 1] [1, 2] [2, 3] [3, 5] ...
      return { value: cur }; // done 프로퍼티 생략
    },
  };
};

for (const num of fibonacci()) {
  if (num > 1000) break;
  console.log(num); // 1 2 3 5 8 13 ...
}

const [f1, f2, f3] = fibonacci(); // 구조분해할당을 이용해 3개 요소만 가져올 수 있다
console.log(f1, f2, f3); // 1 2 3

 

(번외) ES6에서 제공하는 빌트인 이터러블 목록

아래 항목들은 모두 Symbol.iterator 메서드를 소유한 이터러블이므로 for of 문으로 순회할 수 있다.

빌트인 이터러블	Symbol.iterator 메서드
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]

 

이터러블과 유사 배열

---

• 이터러블(iterable) : Symbol.iterator 메서드가 구현된 객체
• 유사 배열(array-like) : 인덱스와 length 프로퍼티를 가진, 배열처럼 보이는 객체

 

아래 arrayLike는 인덱스와 length 속성을 가지므로 유사 배열이지만, 이터러블 객체는 아니다. 이터러블 객체가 아니므로 for of 문도 사용할 수 없다. 반면 위 예시의 range 이터러블 객체는 length와 인덱스 속성이 없으므로 유사 배열이 아니다.

 

💡 예외적으로 arguments, NodeList, HTMLCollection은 유사 배열 객체면서 이터러블이다.

const arrayLike = {
  0: 'Hello',
  1: 'World',
  length: 2,
};

for (const el of arrayLike) {
} // Error! arrayLike is not iterable
arrayLike.push(2); // arrayLike.push is not a function

 

이터러블 객체와 유사 배열(객체)은 배열이 아니므로 push, pop 같은 배열 메서드를 사용할 수 없다.

 

이터러블 / 유사배열에서 배열 메서드 사용하기

---

Array.from

Array.from 메서드는 ➊이터러블 객체나 ➋유사 배열을 받아 진짜 배열(Array)을 만든다. 그럼 push 같은 배열 메서드를 사용할 수 있다. Array.from은 넘겨받은 인자가 이터러블 혹은 유사 배열이면 객체내 모든 요소를 새로운 배열로 복사한다(이터러블 객체를 넘기면 next() 메서드가 반환한 모든 value 값이 새로운 배열의 요소로 추가된다).

// 유사 배열
const arrayLike = {
  0: 'Hello',
  1: 'World',
  length: 2,
};

// [유사 배열 -> 배열]
const arrayFromArrayLike = Array.from(arrayLike); // ['Hello', 'World']
arrayFromArrayLike.push('JavaScript');
console.log(arrayFromArrayLike); // ['Hello', 'World', 'JavaScript']

// [이터러블 객체 -> 배열]
// range는 위 예제의 이터러블 객체
const arrayFromIterable = Array.from(range); // [1, 2, 3, 4, 5]

 

유사 배열에선 length 속성 값 만큼 복사한 요소를 새로운 배열에 추가한다. 요소 개수보다 많은 length를 입력했다면, length 위치와 대응하는 요소가 없을땐 undefined가 배열에 담기므로 주의한다.

 

💡 Array.from 첫번째 인자에 특정 길이를 갖는 배열을 넘길 때 Array(n) 대신 { length: n } 형태로 넘길 수도 있다ex) Array.from({ length: 2 }) → [undefined, undefined]

const arrayLike = {
  0: 'Hello',
  1: 'World',
  length: 4,
};

Array.from(arrayLike); // ['Hello', 'World', undefined, undefined]

 

Array.from 매핑 함수

Array.from(arrayLike[, mapFn[, thisArg]])

 

Array.from 두번째 인자는 매핑 함수를 받는다. 매핑 함수를 넘기면 객체의 각 요소를 대상으로 해당 매핑 함수가 적용된 값이 새로운 배열에 담긴다. thisArg는 각 요소에 this를 지정할 때 사용한다.

// range는 위 예제의 이터러블 객체
Array.from(range); // 매핑 함수 적용 전 [1, 2, 3, 4, 5]
Array.from(range, num => num * 2); // 매핑 함수 적용 후 [2, 4, 6, 8, 10]

 

Array.from은 객체가 가진 이터러블 속성을 이용해 동작하며, 내부에선 아래와 동일한 반복문이 돌아간다.

// Array.from 내부는 아래와 동일한 반복문이 작동한다
const arr = [];
for (const num of range) {
  arr.push(num);
}

console.log(arr); // [1, 2, 3, 4, 5]

 

Array.from는 이터러블 속성을 이용해 동작하므로 문자열에도 사용할 수 있다.

const str = 'hello';
Array.from(str); // ['h', 'e', 'l', 'l', 'o']
[...str]; // ['h', 'e', 'l', 'l', 'o'] -> 전개 연산자를 사용할 수도 있다

 

for of / for in 내부 동작의 차이점 ⭐️

---

for of와 for in 문은 유사해보이지만 내부는 다르게 동작한다.

 

for of

for of 문은 이터레이터의 next 메서드를 호출해서 이터러블(Symbol.iterator 메서드가 구현되어 있는 객체)을 순회한다. next 메서드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값은 for of 문의 변수에 할당한다. 이터레이터 리절트 객체의 done 속성이 false면 반복을 계속하고, true면 반복을 중지한다.

for (변수선언문 of 이터러블) {
  /* ... */
}

 

for in

for in 문은 객체의 프로토타입 체인에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트(플래그) [[Enumerable]] 값이 true인 프로퍼티를 순회하며 열거(enumeration) 한다(객체 프로퍼티 혹은 상속받은 프로토타입의 프로퍼티). 프로퍼티 키가 심벌인 프로퍼티는 열거하지 않는다.

for (변수선언문 in 객체) {
  /* ... */
}

 

프로퍼티의 열거 가능여부는 프로퍼티 설명자 객체를 반환하는 Object.getOwnPropertyDescriptor 메서드를 이용해 확인할 수 있다. 객체 프로퍼티 설명자에 대한 더 자세한 내용은 링크 참고.

const obj = { name: 'John' };
Object.getOwnPropertyDescriptor(obj, 'name');
// {value: 'John', writable: true, enumerable: true, configurable: true}
// enumerable 플래그가 true이므로 for in 문으로 순회할 수 있는 것

 

for in은 객체 프로퍼티뿐만 아니라 상속 받은 프로토타입의 프로퍼티까지 열거한다. 하지만 toString 같은 Object.prototype의 프로퍼티는 [[Enumerable]] 값이 false 이므로 열거되지 않는다.

Object.getOwnPropertyDescriptor(Object.prototype, 'toString');
// {writable: true, enumerable: false, configurable: true, value: ƒ}

for (const attr in Object.prototype) console.log(attr); // undefined

 

Symbol.asyncIterator — 비동기 이터레이터

---

지금까지 살펴본 이터레이터는 모두 동기 이터레이터다. 만약 서버 데이터를 불러오거나 비동기 작업을 수행해야 한다면 비동기 이터레이터를 이용하면 된다. 이터러블 객체를 비동기적으로 만드려면 아래 작업이 필요하다.

 

1. Symbol.iterator 대신 Symbol.asyncIterator 사용
2. next 메서드는 프로미스 반환
3. 반복 작업은 for await (const item of iterable) 사용

 

	동기 이터레이터	비동기 이터레이터
이터레이터 제공 메서드	Symbol.iterator	Symbol.asyncIterator
next() 메서드 반환 값	모든 값	Promise
반복 작업	for of	for await of

const range = {
  from: 1,
  to: 5,
  // 반복문 최초 실행 시 Symbol.asyncIterator 호출 -> 이터레이터 객체 반환
  [Symbol.asyncIterator]() {
    return {
      current: this.from,
      last: this.to,
      // next 메서드 앞에 async 키워드를 붙였으므로 항상 프로미스 반환
      // 반복문에 의해 각 이터레이션마다 next() 호출 -> 프로미스로 감싼 이터레이터 리절트 객체 반환
      async next() {
        await new Promise((resolve) => setTimeout(resolve, 1000)); // 비동기 작업

        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        }
        return { done: true };
      },
    };
  },
};

(async () => {
  for await (const value of range) console.log(value);
})(); // 1초 간격으로 1~5까지 출력

 

💡 전개 문법은 일반 이터레이터(Symbol.iterator)가 필요하므로 비동기 이터레이터에선 작동하지 않는다.

console.log(...range); // Found non-callable @@iterator

 

레퍼런스

---

• iterable 객체 | JavaScript Info
• Iteration & for...of | PoiemaWeb

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요