[JS][TS] Typescript의 Iterator

Typescript의 중요한 개념들의 정리는 거의 마무리되었고, Iterator, Decorator, Type Guard에 대해서 다루면 Typescript 정리 포스팅은 일단 마무리될 것 같다. 이번에 사용하기 위해 기초 강의를 들었고, 이를 정리했다.

아마 사이드 프로젝트로 nest.js를 사용해볼 것 같은데, 이게 ts를 사용하니 기회가 된다면 좀 더 발전된 내용을 가지고 돌아올 수도 있겠다.

---

 

각설하고, 이번 포스팅에서는 iterator(반복자)에 대해서 다룰 것이다.

반복문

우선 반복문을 한 번 짚고 넘어가자. for문의 사용은 이 글을 읽는 분들은 모두 아실 테니 넘어가고, ES5냐 ES6이냐 혹은 배열이냐 그 외이냐에 따라서 다르다.

• ES5 : array.forEach 사용. break가 불가하다.
• ES6 : for (const item of array) 사용. 배열에서만 사용 가능하다(for - of 구문).
• ES6 : for (const item in object) 사용. 배열 외를 순회할 경우에 사용한다(for - in 구문).

for each 혹은 for in 구문은 C#이나 Python 등 타 언어에서도 많이 제공되기 때문에 익숙할 것이다. 간단하게 설명하자면, index를 증가시키면서 반복문을 도는 것이 아니라 객체를 순회하면서 반복문을 돌게 된다. 이 때 객체를 순회한다는 개념에서 iterator가 등장하게 된다.

Iterator(반복자)

iterator란 iterable한 객체를 순회하는 연산자이다. 쉽게 말하면 for (const item of array)에서 item이라고 보면 된다. 객체의 Symbol.iterator 함수를 호출하게 된다.

그렇다면 iterable은 무엇인가? property이고, iterator 함수가 구현되어 있으면 iterable하다고 부른다. 약간 iterator와 iterable이 서로의 정의를 떠넘기는 느낌인데, 정리하자면 iterator는 객체를 순회하는 연산자이고, iterator 함수가 구현되어 있는 것이 iterable이다.

array와 같은 것들은 기본적으로 iterable하다. 그래서 별다른 조치 없이도 우리가 for-of나 for-in 구문을 이용해 순회할 수 있는 것이다. iterator의 코드를 볼 겸 custom iterator의 예시를 보고 포스팅을 마무리하겠다.

custom iterator는 Iterable을 상속받고, Symbol.iterator 함수의 iterator의 next 함수를 구현해야 한다.

 

class CustomIterable implements Iterable<string> {
    private _arr: Array<string> = ['one', 'two']

    [Symbol.iterator]() {
        let nextIndex = 0

        return {
            next: () => {
                return {
                    value: this._arr[nextIndex++]
                    done: nextIndex < this._arr.length
                }
            }
        }
    }
}

const customIterable = new CustomIterable()

for (const item of customIterable._arr) {
    console.log(item) // 'one', 'two'
}