자바스크립트 이터러블과 제너레이터

TLDR;

이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 이터러블은 Symbol.iterator메서드를 가지고 있으며, 메서드 실행시 next함수를 가지고 있는 이터레이터를 반환하는데, next함수 실행시 value와 done을 프로퍼티로 가지고 있는 이터레이터 리절트객체를 반환한다.

 

이터러블은 for...of문, spread문법, 디스트럭쳐링 할당 등이 가능하다.

 

유사배열객체와 이터러블을 구분할 필요가 있는데, 유사배열객체는 인덱스와 length를 가지고 있어서 인덱스로 접근가능하고, for 문이 사용가능한 객체이다. 이터러블은 이터레이터 프로토콜을 준수한 객체이다. 따라서 유사배열객체가 반드시 이터러블은 아니다.

유사배열과 이터러블을 배열로 만들어 활용할 수 있는데, Array.from()을 사용하면 배열로 변경되어, 배열의 내장 메서드들이 사용가능해진다.

1. 이터러블

이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다.
즉, 이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 객체를 말한다.

그렇다면 이터러블 프로토콜이란 무엇일까?

이터러블 프로토콜

• 이터러블 프로토콜 : Symbol.iterator ( ) 메서드를 가지고 있으며, 호출 시 이터레이터 프로토콜을 준수한 Iterator를 반환하는 규약
• 이터레티어 프로토콜 : next 메서드를 소유하며, next 메서드 호출 시 이터러블을 순회하며 value와 done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 규약. 이터레이터는 이터러블을 요소를 탐색하기 위한 포인터 역할을 함

이터러블 프로토콜을 알고 다시 이터러블에 대해 이해해보자면,

이터러블 프로토콜을 준수하는 객체라는 것은 Symbol.iterator()메서드를 가지고 있으며, Symbol.iterator 메서드 호출 시 Iterator를 반환하는데, 이 Iterator는 next( ) 메서드를 가지고 있으며, next 메서드 호출시 {value: , done: } 처럼 생긴 이터레이터 리절트를 반환하는 것이다.

이터러블을 만들고 싶다면!!

1) 객체 안에서 Symbol.iterator라는 함수를 만들고
2) 그 함수가 Iterato프로토콜을 따르는 Iterator를 리턴하도록 하면 되는데,
3) Iterator 프로토콜을 따른다는 것은 next ( ) 함수를 리턴하는 것인데,
4) next( ) 함수는 다시 { value: 값 , done : true/false}와 같은 이터레이터 리절트 객체를 리턴하면 된다.

 

2. 이터러블의 특징과 빌트인 이터러블

이터러블의 특징

이터러블은 for...of문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.

const array = [1,2,3];

// 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
console.log(Symbol.iterator in array); // true

const iterator = array1.values();
for(const value of iterator){
    console.log(value);
}

// 이터러블은 for...of 문으로 순회 가능하다.
for (const item of array) {
    console.log(item);
};

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

// 이터러블인 배열은 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.
const [a, ...rest] = array;
console.log(a, rest); [1, [2,3]]

// * 비교 *
// 이터러블이 아닌 일반 객체는 for..of 사용 안되고, for..in만 사용할 수 있다.
const obj = { 0: 1, 1: 2 };
for(const item in obj){
    console.log(item);   // key를 출력
}

빌트인 이터러블

자바스크립트는 이터레이션 프로토콜을 준수한 객체인 빌트인 이터러블을 제공한다. 다음 표준 빌트인 객체들은 빌트인 이터러블이다.

이 중, 배열과 문자열은 가장 광범위하게 쓰이는 내장 이터러블이다.

// 문자열 예시
for (let char of 'look'){
    alert(char); // 글자 하나당 한 번씩, 총 4회 호출된다.
}

 

3. 이터러블과 for...of문 뜯어보기

이터러블이 무엇을 반환하는지 뜯어보기

이터러블이 최종적으로 무엇을 반환하는지 알아보기 위해 이터레이터의 next함수를 직접 실행시켜보자.

이터레이터를 객체에 담아 next함수를 실행시킬때 마다, value와 done이 출력되고, 전부 출력한 후에는 value는 'undefined', done은 false를 반환하는 것을 볼 수 있다.

const arr = ['m', 'i', 'n', 'j', 'u'];

const iterator = arr.values(); 
console.log(iterator);           // Array Iterator { next() }

console.log(iterator.next());    // {value: 'm', done: false}
console.log(iterator.next());    // {value: 'i', done: false}
console.log(iterator.next());    // {value: 'n', done: false}
console.log(iterator.next());    // {value: 'j', done: false}
console.log(iterator.next());    // {value: 'u', done: false}
console.log(iterator.next());    // {value: undefined, done: false}

for ... of 문 뜯어보기

for... or 문은 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for... of 문의 변수에 할당한다. 그리고 이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고, true이면 이터러블의 순회를 중단한다.

// 이터러블
const array = [1, 2, 3];

for (const item of iterator) {
    console.log(item)
}

// 위의 for...of 문을 실행하면 벌어지는 일
const iterator = array.values();    // 이터레이터를 가져와
while (true) {                      
    const item = iterator.next();   // next메서드를 실행시켜 이터레이터 리절트 객체를 변수에 담는다.
    if(item.done) break;       // 현재의 이터레이터 객체의 done이 false 면 계속 진행          
    console.log(item.value);   // 이터레이터 객체의 값을 콘솔에 찍기
}

* 참고. array.values( )는 array iterator 객체를 반환한다.

 

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

유사배열객체

• 유사배열객체란?
  • 인덱스와 length프로퍼티가 있어서 배열처럼 보이는 객체
  • 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고
  • length 프로퍼티를 갖는 객체 ( 그렇기 때문에 for문으로 순회할 수 있다.)

const arrayLike = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
};

// length 프로퍼티를 갖기에 for문 순회가 가능하다.
for (let i = 0; i < arrayLike.length; i++){
    console.log(arrayLike[i]); // 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.
}

자, 유사배열 객체를 보면 이터러블 프로토콜은 준수하고 있지 않지? (Symbol.iterator ( )를 메서드로 가지고 있지도, 프로토타입을 통해 상속받지도 않았지?) 그렇기 때문에 유사 배열 객체는 for...of 문으로 순회할 수 없다.

단, arguments. NodeList, HTMLCollection은 유사 배열 객체이면서 이터러블이다. 정확히 말해, 유사배열객체인 arguments, NodeList, HTMLCollection 객체에 Symbol.iterator 메서드를 구현하여 이터러블이 되었다. 따라서 얘네들은 유사배열 객체로 쓰면서 for...of 문도 사용 가능하다.

이터러블과 유사배열 객체를 진짜 배열로 만들어주는 Array.from

Array.from을 사용하면 이터러블과 유사배열 객체를 진짜 배열로 만들어줄 수 있다!

유사배열객체를 배열로 만들기

const arrayLike = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
};

let realArray = Array.from(arrayLike); [1,2,3]
realArray.pop();  // 배열 메서드 사용가능

이터러블을 배열로 만들기

let 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 }; 
        } 
    } 
};

console.log(Array.from(range));     // [1,2,3,4,5]

 

5. 나만의 이터러블 만들어보기

0부터 10이하 숫자까지 숫자 2배를 순회하는 이터러블 만들기

const multiple = {
    [Symbol.iterator]() {
        const max = 10;
        let num = 0;
        return {
            next() {
                return {value: num++ * 2, done: num > max}
            }
        }
    }

}

for(const num of multiple){
    console.log(num);       // 0, 2, 4, 6, 8 ..... 18
}

이터레이션을 재사용 가능하도록 함수로 만들기

function makeIterable(InitailValue, maxValue, callback){
return {
    [Symbol.iterator]() {
        const max = maxValue;
        let num = initialValue;
        return {
            next() {
                return {value: callback(num++), done: num > max}
            }
        }
    }
}
}

const multiple = makeIterable(0, 20, (n) => n * 2);

for(const num of multiple){
    console.log(num)
}

 

6. 이터러블의 사용

배열이나 문자열 등은 모든 데이터를 메모리에 미리 확보한 다음 데이터를 공급한다. 하지만 이터러블의 경우 for...of 문이나 배열 디스트럭처링 할당 등이 실행되기 이전까지는 데이터가 생성되지 않다가, next()메서드를 호출할 때 데이터가 생성되는 지연 평가(lazy evaluation)을 통해 데이터를 생성한다.

지연 평가를 사용하면 불필요한 데이터를 미리 생성하지 않고 필요한 데이터를 필요한 순간에 생성하므로,

• 빠른 실행 속도를 기대할 수 있고
• 불필요한 메모리를 소비하지 않으며 무한도 표현할 수 있다는 장점이 있다.

---

7. 제너레이터

이터러블을 사용할 때 보통 for...of 문을 사용하는데, 그러면 반복해서 일이 쭉 수행되고 직접 그 반복이 돌아가는 것을 멈출 수 없다. 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다.

일반 함수와의 차이점

1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.
2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.
3. 제너레이터 함수 호출 시 코드 실행이 아니라 제너레이터 객체를 반환한다.

제너레이터 함수 사용법

1. 생성

• function* 키워드로 생성하며,
• 하나 이상의 yield 표현식을 포함한다.
• 주의할 점 : 화살표 함수로 정의 어렵고, new 생성자 함수로 호출할 수 없다.

2. 사용

• 제너레이터 함수를 실행시키면 제너레이터 객체를 반환하며
• 제너레이터 객체의 next 함수를 사용하면 yield 구문 하나씩 실행된다.
• 제너레이터 객체에는 일반 이터레이터에는 없는 return과 throw메서드가 있다

function* genFunc(){
	yield 1;
	yield 2;
	yield 3;
}

const generator = gneFunc();

console.log(generator.next()); // {value: 1, done: false}
console.log(generator.return(30)); // {value: 30, done: true} // value에 전달받은 값을 넣고, 바로 모든 제너레이터를 실행 완료시켜버린다.

console.log(generator.throw('Error!')); // 인수로 전달받은 에러를 발생시키고, value에 undefined를, done에 true를 갖는 이러테리어 리절트 객체를 반환

 

8. 제너레이터의 활용

이터러블 구현

제너레이터 함수를 사용하면 이터러블을 훨씬 간단히 구현할 수 있다.

// 기존의 이터러블
const multiple = {
    [Symbol.iterator]() {
        const max = 10;
        let num = 0;
        return {
            next() {
                return {value: num++ * 2, done: num > max}
            }
        }
    }

}

// 제너레이터를 통하여 구현한 이터러블 - 진짜 간단!!!
function* multipleGenerator(){
    for(let i = 0; i<10; i++){
        yield i ** 2;
    }
}

제너레이터 안,밖으로 정보 교환

function* gen(){
    let ask1 = yield "2 + 2 = ?";

    alert(ask1);

    let ask2 = yield "3 * 3 = ?";

    alert(ask2);
}

let generator = gen();

alert(generator.next().value); // "2 + 2 = ?", 아직 ask에는 값이 담기지 않음

alert(generator.next(4).value); // 1) 먼저 ask1에 값 할당, 2) value 출력 "3 * 3 = ?" 
alert(generator.next(9).done); // 1) 먼저 ask2에 값 할당, 2) done 출력 true

활용예시

의사 난수 생성기 만들기 : 고정값을 받아 아래 공식을 사용해 제너레이터를 만들어내는 함수인 pseudoRandom(seed)

function* pseudoRandom(seed) {
  let value = seed;

  while(true) {
    value = value * 16807 % 2147483647
    yield value;
  }

};

let generator = pseudoRandom(1);

console.log(generator.next().value) // 16807
console.log(generator.next().value) // 282475249
console.log(generator.next().value) // 1622650073

 

---

 

 

참고

• 자바스크립트 딥다이브 34장 이터러블
• https://ko.javascript.info/iterable
• https://poiemaweb.com/es6-iteration-for-of
• https://ko.javascript.info/generators