[TIL] 06_iterable protocol, generator

💡새롭게 알게 된 것

---

iterable protocol

이터러블 프로토콜은 순회(반복) 가능한 객체를 나타내는 프로토콜을 의미한다.

for...of 반복문, ... 전개 연산자(Spread Operator), 구조 분해 등과 함께 동작 할 수있다.

아래 ES5, ES6에서의 순회를 비교해보자

---

기존 ES5에서의 순회

// index, length 프로퍼티에 의존
const arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]) // 1 2 3 
}

const str = 'abc';
for (var i = 0; i < str.length; i++) {
console.log(str[i]) // a b c 
}

ES6에서의 순회

// ES6 이후  --- 선언적
for (const a of arr) {
console.log(a) // 1 2 3 
}
for (const a of str) {
console.log(a) // a b c 
}

---

array 뿐만 아니라 기존에 인덱스 사용이 불가했던 set, map과 같은 객체들을 모두 for...of 문으로 순회할 수 있다.

const set = new Set([1, 2, 3]);
for (const a of set) console.log(a) // 1 2 3
console.log(set[0]) // undefined


const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const a of map) console.log(a) // ["a", 1]  ["b", 2]  ["c", 3]
console.log(map[0]) // undefined

이러한 이터러블 프로토콜은 해당 객체가 이터러블이여야만 가능하다.

---

iterable/iterator

• 이터러블(iterable) : 이터레이터(iterator)를 리턴하는 [Symbol.iterator]( )라는 키값의 메소드를 가진 객체
  ex. arr, set, map

• 이터레이터(iterator) : { value, done }객체를 리턴하는 next()메소드를 가진 객체

console.dir(arr);

/*
> Array(3)
  > __proto__ : Array(0)
     ...
     > Symbol(Symbol.iterator): ƒ values()
     ...
*/

위에서 정의한 arr이 내부에서 Symbol(Symbol.iterator): ƒ values()를 확인함으로 다음과 같은 사실을 알 수 있다.

• Array는 Symbol(Symbol.iterator)라는 key를 가진 함수가 존재한다.
• Array는 이터레이터(iterator)를 반환하는 Symbol.iterator라는 키값의 메소드를 가진 객체이다.

전개연산자 역시 iterator protocol을 따르고 있다

const a = [1, 2];
console.log([...a, ...[3, 4]]); // [ 1, 2, 3, 4 ]
console.log([...arr, ...set, ...map]); // [ 1, 2, 3, 1, 2, 3, [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

a[Symbol.iterator] = null;
console.log([...a, ...[3, 4]]); // TypeError: a is not iterable

---

사용자 정의 iterable protocol

이터러블 프로토콜을 따라 순회 동작을 사용자가 임의로 정의할 수 있다. 이는 이터러블이 다양하게 활용될 수 있음을 뜻한다.

const iterable = {
  [Symbol.iterator]() {
    let i = 3;
    return {
      next() {
        return i === 0 ? { done: true } : { value: i--, done: false }
      },
      [Symbol.iterator]() { return this; } 
    }
  }
}
let iterator = iterable[Symbol.iterator]();
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { done: true }

for (const a of iterable) console.log(a) // 3 2 1 

---

제너레이터

제너레이터의 실행 결과인 제너레이터 객체는 이터레이터 객체이다.
또한 [Symbol.iterator]()를 가지는 이터러블이기도 하다.

function *generator() {
  yield 1;
  if (false) yield 2;
  yield 3;
  return 100; 
}

let iter = generator();
console.log(iter[Symbol.iterator]() == iter) // true
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 100, done: true}
console.log(iter.next()); // {value: undefined, done: true}

for (const a of generator()) console.log(a) // 1 3

제너레이터 객체는 이터레이터이자 이터러블이기 때문에 역시 순회가 가능하다. 또한 제너레이터에는 마지막에 리턴 값을 만들 수 있다. 하지만 done 또한 ture가 되기 때문에 순회의 대상이 되진 않는다.

참고
데브코스 강의
https://junhobaik.github.io/iterable-protocol/

---

💭느낀점

이터러블과 제네레이터... 덕분에 다양한 데이터 타입들을 순회하고 가공하는 것을 매우 편리하게 해줄 것 같다!bb 전체적인 컨셉은 이해가 되나, 아직까지 각 단어와 개념이 완벽히 정립되지 않았기 때문에 다양하게 작성해보고 천천히 익히며 습득을 할 계획이다.