[TS] 반복기와 생성기

📣  반복기 이해하기

✔️ tsconfig.json에서 downlevelIteration 항목을 true로 설정해야 반복기가 정상적으로 동작한다.

 

📍 반복기와 반복기 제공자

➰ for...of 구문은 다른 프로그래밍 언어에서도 '반복기'라는 주제로 찾아볼 수 있다.

➰ 반복기는 다음과 같은 특징이 있는 객체이다.

    ﹒ next라는 이름의 메서드를 제공한다. 

    ﹒ next 메서드는 value와 done이라는 두 개의 속성을 가진 객체를 반환한다.

// 반복기 제공자
export const createRangeIterable = (from: number, to: number) => {
    let currentValue = from
    return {
        next() {
            const value = currentValue < to ? currentValue++ : undefined
            const dome = value == undefined
            return {value, done}
        }
    }
}

➰ createRangeIterable 함수는 next 메서드가 있는 객체를 반환하므로 반복기를 제공하는 역할을 한다.

➰ 반복기를 제공하는 역할을 하는 함수를 '반복기 제공자(iterable)' 라고 한다.

 

import {createRangeIterable} fromo './createRangeIterable'
const iterator = createRangeIterable(1, 3+1)	// 반복기는 현재 동작하지 않는다.
while(true) {
    const {value, done} = iterator.next()	// 반복기를 동작시키다.
    if(done) break
    console.log(value)	// 1 2 3
}

➰ createRangeIterable 함수를 호출해서 반복기를 iterator 변수에 저장한다.

➰ 반복기는 위처럼 반복기 제공자를 호출해야 얻을 수 있다.

➰ 사용자가 for...of 구문을 작성하면 TSC 컴파일러는 이처럼 반복기 제공자와 반복기를 사용하는 코드로 바꿔준다.

 

📍 반복기는 왜 필요한가?

➰ range 함수랑 비교했을 때, range 함수는 값이 필요한 시점보다 이전에 미리 생성한다.

➰ 반복기는 값이 필요한 시점에 비로소 생성한다.

➰ 결과적으로 시스템 메모리의 효율성 관점에서 보면 반복기가 훨씬 메모리를 적게 소모한다.

 

📍 for...of 구문과 [Symbol.iterator] 메서드

➰ range 함수는 for...of 구문의 of 뒤에 올 수 있다.

import {range} from './range'
for(let value of range(1, 3+1))
	console.log(value)

 

➰ 하지만 반복기를 of 뒤에 적용하면 '[Symbol.iterator]() 메서드가 없다' 라는 오류가 발생한다.

import {createRangeIterable} from './createRangeIterable'
const iterable = createRangeIterable(1, 3+1)
for(let value of iterable)
	// 오류
    console.log(value)

➰ 이 오류는 createRangeIterable 함수를 클래스로 구현해야 한다는 것을 의미한다.

➰ 클래스는 for...of 구문의 of 뒤에 올 수 있다.

 

export class RangeIterable {
    constructor(public from: number, public to: number) {}
    [Symbol.iterator]() {
        const that = this
        let currentValue = that.from
        return {
            next() {
                const value = currentValue < that.to ? currentValue++ : undefined
                const done = value == undefined
                return {value, done}
            }
        }
    }
}

➰ 클래스의 메서드는 function 키워드가 생략되었을 뿐 function 키워드로 만들어지는 함수이다.

➰ function 키워드로 만들어진 함수는 내부에서 this 키워드를 사용할 수 있다.

➰ 4행의 this는 RangeIterable 함수를 담고 있는데, next 함수 또한 function 키워드가 생략된 메서드이므로 컴파일러가 next의 this로 해석하지 않게 하는 코드 트릭이다.

 

📍 Iterable<T>와 Iterator<T> 인터페이스

➰ 반복기 제공자에 Iterable<T>와 Iterator<T> 제네릭 인터페이스를 사용할 수 있다.

 

1️⃣ Iterable<T>

class 구현 클래스 implements Iterable<생성할 값의 타입> {}

➰ 자신을 구현하는 클래스가 [Symbol.iterator] 메서드를 제공한다는 것을 명확하게 알려주는 역할 

 

2️⃣ Iterator<T>

[Symbol.iterator](): Iterator<생성할 값의 타입> {}

➰ 반복기가 생성할 값의 타입을 명확하게 알려준다.

 

export class StringIterable implements Iterable<string> {
    constructor(private strings: string[] = [], private currentIndex: number = 0) }{}
    [Symbol.iterator](): Iterator<string> {
        const that = this
        let currentIndex = that.currentIndex, length = that.strings.length
        
        const iterator: Iterator<string> = {
            next(): {value: string, done: boolean} {
                const value = currentValue < length ? that.strings[currentIndex++] : undefined
                const done = value == undefined
                return {value, done}
           	}
        }
        return iterator
    }
}

---

📣  생성기 이해하기

✔️ ESNext JS와 타입스크립트는 yield라는 키워드를 제공한다.

➰ yield는 return 키워드처럼 값을 반환한다.

➰ yield는 반드시 function* 키워드를 사용한 함수에서만 호출할 수 있다.

➰ function* 키워드로 만든 함수를 '생성기(generator)'라고 한다.

➰ 생성기는 반복기를 쉽게 만들어 준다(반복기 제공자로 동작한다)

export function* generator() {
    console.log('generator started...')
    let value = 1
    while(value < 4)
        yield value++
    console.log('generator finished...')
}

for(let value of generator())
    console.log(value)
    
// generator started...
// 1
// 2
// 3
// generator finished...

 

📍 setInterval 함수와 생성기의 유사성

➰ 생성기가 동작하는 방식 : 세미코루틴

➕ 세미코루틴이란?

➰ 타입스크립트처럼 단일 스레드로 동작하는 프로그래밍 언어가 마치 다중 스레드로 동작하는 것처럼 보이게 하는 기능

 

➰ 자바스크립트가 기본으로 제공하는 setInterval 함수를 사용해 세미코루틴 동작 방식을 구현할 수 있다.

const period = 1000
let count = 0
console.log('program started...')
const id = setInterval(() => {
    if(count >= 3) {
        clearInterval(id)
        console.log('program finished...')
    }
    else
        console.log(++count)
},period)

// program started...
// 1 1초 간격으로 1 2 3이 출력된다.
// 2
// 3
// program finished

 

📍 function* 키워드

➰ 생성기는 오직 function* 키워드로 선언해야 하므로 화살표 함수로는 생성기를 만들 수 없다.

➰ function* 은 그 자체로 키워드이고, function 키워드에 *을 붙인 것이 아니다.

 

📍 yield 키워드

➰ 반복기를 자동으로 만들어주며, 반복기 제공자 역할도 수행한다.

// 생성기
export function* rangeGenerator(from: number, to: number) {
    let value = from
    while(value < to) {
        yield value++
    }
}

// while 패턴으로 동작하는 생성기
let iterator = rangeGenerator(1, 3+1)
while(1) {
    const {value, done} = iterator.next()
    if(done) break
    console.log(value) // 1 2 3
}

// for...of 패턴으로 동작하는 생성기(클래스로 만들지 않아도 of 뒤에 들어갈 수 있음
for(let value of rangeGenerator(4, 6+1))
    console.log(value) // 5 6 7

 

📍 반복기 제공자의 메서드로 동작하는 생성기 구현

export class IterableUsingGenerator<T> implements Iterable<T> {
    constructor(private values: T{] = [], private currentIndex: number = 0) {}
    [Symbol.iterator] = function* () {
        while(this.currentIndex < this.values.length)
            yield this.values[this.currentIndex++]
    }
}

➰ 생성기를 클래스 메서드의 몸통이 되게 하려면 반드시 [Symbol.iterator] = function* () 형식으로 구현해야 한다.

 

📍 yield* 키워드

➰ yield는 단순히 값을 대상으로 동작하지만, yield*은 다른 생성기나 배열을 대상으로 동작한다.

function* gen12(){
    yield 1
    yield 2
}

export function* gen12345() {
    yield* gen12()
    yield* [3, 4]
    yield 5
}

import {gen12345} from './yield-star'

for(let value of gen12345())
     console.log(value) // 1 2 3 4 5

➰ gen12345() 함수가 호출되면, yield* gen12() 함수가 호출되서 yield문이 값 1을 생성하고 코드는 정지한다. 그리고 다시 for문에 의해 yield* gen(12) 가 실행되고, 정지가 풀리면서 값 2를 생성한다.

 

📍 yield 반환값

export function* gen() {
    let count = 5
    let select = 0
    while(count--) {
        select = yield `you select ${select}`
    }
}

export const random = (max, min=0) => Math.rount(Math.random() * (max-min)) + min

import {random, gen} from './yield-return'
const iter = gen()
while(true) {
    const {value, done} = iter.next(random(10, 1))
    if(done) break
    console.log(value)
}

➰ yield 연산자의 반환값은 반복기의 next 메서드 호출 때 매개변수에 전달하는 값이다.

➰ const {value, done} = iter.next(random(10, 1)) 구문은 next 메서드 호출 때 난수를 생성해 전달한다.