Javascript&Typescript

이터러블(iterable)과 이터레이터(iterator)

Robinkim93 2023. 2. 7. 20:32

디자인 패턴 관련 내용을 학습하던 중, 이터레이터 패턴(Iterator Pattern)에 관해 학습하게 되었다. 패턴 자체는 이해가 갔지만, 이터레이터가 무엇인지 그리고 이터러블은 무엇인지에 대해 알지 못하면 정확하게 이해하지 못한 것이라는 생각이 들어 따로 내용을 정리했다.

# 이터러블(iterable)

자료를 반복할 수 있는 객체를 말하며 흔히 쓰는 배열, 문자열이 이터러블이라고 볼 수 있다.

 

또한, 이터러블한 객체는 이터러블 규약(iterable protocol)을 따르는 객체라고 보는데, 여기서 이터러블 규약은 for~of문, 전개연산자 등 연산자들과 함께 약속된 동작을 하도록 만들어진 규약을 의미한다.

 

그래서 이터러블한 객체란 이터러블 규약을 따르는 객체라고도 볼 수 있다.

# 이터레이터(iterator)

이터레이터란 {value: 값, done: true / false} 형태의 이터레이터 객체를 return 하는 next() method를 가진 객체이다. next() method는 이터러블한 객체를 순회할 수 있다. 또한 어떤 요소가 이터레이터인지를 알기 위해서 하단과 같은 코드로 이터레이터인지 알아 볼 수 있다.

한 마디씩 잘라서 생각하면 더 편한데,

 

1. [Symbol.iterator] ()을 실행하면 next() method를 사용할 수 있게 되는데,

2. next() method를 사용하면 {value: 값, done: true / false} 형태의 이터레이터 객체를 return 받을 수 있고,

3. 이 next() method는 이터러블한 객체(자료를 반복할 수 있는 객체)를 순회할 수 있다.

 

코드를 보면 조금 더 명확해진다.

arr의 prototype은 이터레이터를 상속받고 있다. (그렇기 때문에 for문 혹은 pop, push같은 method를 사용할 수 있게 된 것)

그렇기 때문에 arr의 이터레이터를 실행시켜서 반환되는 next() method를 iterator라는 변수에 할당하고, 하단처럼 호출하게 되면 arr의 요소들을 돌며 value와 done으로 이루어진 이터레이터를 반환한다.

 

이 때, value를 모두 순회하고 value가 undefined가 되면, done은 true의 값을 가지게 되고, 이 때 순회가 종료된다.

 

3번째 줄에서 arr[Symbol.iterator] ()로 실행한 것으로 보아, 변수사용으로 arr의 요소에 접근할 수 있다는 뜻이되며, 그렇기 때문에 for문처럼 숫자형 index 뿐만 아니라 다양한 인덱스를 기반으로 요소를 순회할 수 있게 된다.

 

대표적인 이터레이터 인터페이스는 for~of문이 있다. for~of문은 기존에 for문처럼 숫자index로 이터러블을 순회하는 것이 아닌, for(const x of arr) 처럼 x라는 변수를 적용해서 이터러블을 순회할 수 있다.

 

이렇게 하나의 인터페이스로 이터러블을 순회할 수 있도록 했을 때의 장점으로는 다양한 타입을 가진 반복문을 하나의 이터러블 인터페이스로 작성할 수 있기 때문에 코드를 효율적으로 쓸 수 있다. (자료형마다 순회하는 인터페이스 코드를 작성할 필요없이 자료형에 상관없이 순회할 수 있는 인터페이스가 있기 때문)