[JavaScript] iterable 쉽게 이해하기

https://www.yankodesign.com/2022/12/28/this-sleek-inception-top-is-a-world-record-setting-toy-that-spins-for-more-than-4-hours/

 

 

👶🏻시작하기 전에 

처음 자바스크립트의 이터레이터라는 개념을 접했을 때 '어렵다' 라고 생각했던 기억이 있습니다. [Symbol.iterator] 라는 것을 가지고 있어야 한다는데 저게 무슨 문법인지 모르겠고, 혼란스러웠던 기억이 있습니다. 오늘은 제너레이터에 대해 칼럼을 작성하기 이전에 이터레이터 개념에 대해 조금 더 쉽게 이해할 수 있는 글을 작성해 보고자 합니다. 그리 어렵지 않으니 함께 가봅시다! 

 

 

ES6와 이터러블

자바스크립트에서 ES6 이전의 순회 가능한 자료구조들은 통일된 규약 없이 각자 나름의 독립적인 구조를 가지고 순회를 했었습니다.  ES6 에서는 순회 가능한 자료구조를 ”이터러블"로 통일하여 일원화 하였고, 그리하여 for…of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 하였습니다. 

 

 

이터러블과 이터레이션 그리고 이터레이션 프로토콜 

간단하게 말해 이터러블과 이터레이터는 객체입니다. 근데 그냥 객체가 아니라 순회 기능을 수행할 수 있도록 하기 위해 특정한 프로퍼티와 메서드를 가지고 있도록 만든 객체이죠. 그리고 어떤 프로퍼티와 메서드를 만들어야 '이러러블', '이터레이터' 라고 부를 수 있는지 규약으로 정해 두었습니다. 이 규약이라는 것은 간단하게 말해  '어떠한 함수를 구현하고, 어떠한 값을 가지고 있어야 한다' 라고 정해놓은 약속입니다. 그리고 이 약속을 우리는 "이터러블 프로토콜" 과 "이터레이터 프로토콜"이라고 부르기로 했습니다. 그리고 어떤 객체가 이터레이션 프로토콜을 구현한다라는 것은 이터러블 프로토콜을 구현하고 있는 것입니다. 

 

 

이터러블 프로토콜

어떠한 객체가 이터러블이 되기 위해서는 (1) [Symbol.iterator]를 객체 내에 key로 가지고 있어야 하며 (2) [Symbol.iterator]()  는 이터레이터를 반환해야 합니다. 

 

const iterableObj = {
	Symbol.iterator: function() {
    return iteratorObj
  }
}

 

이런 구조를 가지고 있는 것이지요. Symbol.iterator는 객체의 key이며 대괄호 표기법으로 객체의 키에 접근하는 것입니다. 그리고 해당 키의 value로는 메서드를 가지고 있는데요, 이 메서드는 실행시 iterator 를 반환하는 함수입니다. 

정리하면 이터러블이란 Symbol.iterator 라는 키에 이터러블을 반환하는 함수를 값으로 가지고 있는 객체입니다. 이터러블 객체는 이런 조건을 갖추어야 하고 이를 이터러블 프로토콜이라 부르는 것이지요. 

 

 

이터레이터 프로토콜 

바로 전 예제에서 이터러블은 이터레이터를 반환하는 함수를 값으로 하는 Symbol.iterator 라는 키값으로 가지고 있는 객체임을 알았습니다. 여기서 반환되는 이터레이터 객체는 next() 메서드를 가지고 있어야 합니다. 그리고 이 next() 메서드를 실행하면 IteratorResult 라는 객체를 반환합니다. IteratorResult 객체는 value와 done 이라는 프로퍼티를 가지고 있어 순환이 끝났는지를 알 수 있게 합니다.  

 

 

이터러블 눈으로 확인하기 

지금까지 이터러블, 이터레이터가 되기 위해 갖추어야 할 조건에 대해 알아보았습니다. 추상적이게 느껴지나요? 이번에는 눈으로 확인하며 조금 더 직관적으로 이해해 보겠습니다. 

 

//(1)
const iteratorFn = Array.prototype[Symbol.iterator];
console.log(iteratorFn); //[Function: values]

//(2)
const iteratorObj = Array.prototype[Symbol.iterator]();
console.log(iteratorObj); //Object [Array Iterator] {}

 

 

자바스크립트의 빌트인 객체인 Array는 이터레이션 프로토콜을 구현합니다. 즉, 자바스크립트의 모든 배열은 이터러블 객체입니다. 위 예제를 통해 [Symbol.iterator] 는 함수이며 [Symbol.iterator]()는 그 함수를 실행한 것이죠. 그 결과 변수 iteratorFn 에는 함수가 할당되며, iteratorObj 에는 이 함수를 실행하여 반환된 이터레이터가 할당되죠. 물론 iteratorObj 는 next() 메서드를 가지고 있겠지요? 

 

 

Iterator 사용해 보기

 

 

const arr = [1, 2, 3];
const iteratorObject = arr[Symbol.iterator]();

//(1) next(...args: [] | [TNext]): IteratorResult<T, TReturn>;

console.log(iteratorObject.next()); //{ value: 1, done: false }
console.log(iteratorObject.next()); //{ value: 2, done: false }
console.log(iteratorObject.next()); //{ value: 3, done: false }
console.log(iteratorObject.next()); //{ value: undefined, done: true }

 

 

위 예제에서는 이터레이터가 가지고 있는 next() 메서드를 활용해서 값을 순회해 보았습니다. 주석으로 처리된 부분에 보시면 next() 메서드는 IteratorResult를 반환합니다.( 제네릭과 타입스크립트에 익숙하지 않다면 넘어가도 좋습니다. ) 이렇게 반환된 객체는 value와 done을 가지고 있으며 for...of 와 같이 이터레이터를 활용해서 값을 순회하는 문법은 이를 이용해 값을 순회할 수 있습니다. 

 

 

for...of 는 어떻게 동작할까?

 

 

const array = [1,2,3];
const iterator = array.values(); //values(): IterableIterator<T>;

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

for (let item of array) { //(2)
  console.log(item);
}

 

for of문은 아마도 내부적으로 (1)과 같이 구현되어 있으리라 추측해 볼 수 있습니다. done이 true가 될 때까지 value를 순회합니다. 이는 (2)와 동일합니다. 이터레이터의 next() 메서드와 그 결과값인 IteratorResult 객체를 활용해서 순회를 하고 있습니다. 

 

 

정리합시다. 

이터러블, 이터레이터에 대해 간단히 알아보았습니다. 쉽게 핵심만 전달하는데 초점을 맞추었기에, 이를 바탕으로 더 자세한 글을 찾아보시면 이해하는데 도움이 되리라는 생각에서 글을 결심하게 되었습니다. 읽어주셔서 감사합니다 : )