[JavaScript] Iterator(반복자)란 무엇인가?

오늘은 지난번에 JavaScript Map 다루기 공부할 때 봤었던 Iterator(반복자)에 대해 알아보도록 하겠습니다.

먼저 위키백과를 참고하여 Iterator의 정의를 알아보겠습니다.

 

 

Iterator(반복자)의 정의

Iterator(반복자)
객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 구조의 내부의 요소를 순회(traversing)하는 객체

 

여기서 객체지향적 프로그래밍은 c 이외의 대부분의 언어들이 객체지향적 언어의 특징을 갖고 있습니다. 위의 정의에서 알 수 있는 내용으로는 자료 구조의 내부 요소를 순회하는 객체라는 것입니다. 

 

여기서 배열이나 그와 유사한 자료 구조라는 내용의 의미를 좀 더 자세하게 알아보겠습니다.

 

 

 

 

Iterable(반복 가능한) 자료구조는?

Iterator는 배열이나 그와 유사한 자료 구조의 내부의 요소들을 순회하는 객체입니다.

 

이 때 배열 or 그와 유사한 자료구조는 무엇일까요? 

바로 Iterable(반복 가능한) 자료구조입니다. Iterable하다는 것은 단순하게 반복이 가능하다는 의미이며, 반복을 통해 순회할 수 있는 요소들을 담고 있는 자료구조라는 의미입니다.

즉, JavaScript의 자료구조로는 Array(배열), Map, Set 등이 있습니다. 

 

 

 

 

Iterable한 자료구조의 순회방법

JavaScript에서는 Iterable 자료구조의 요소들을 순회할 수 있는 문법이 있습니다.

바로 for of 반복문입니다. 이 반복문은 Iterable 자료구조 내 요소들을 반복하여 순회할 수 있는 문법입니다.

이 때, Iterable의 특징을 가지고 있지 않은 자료구조에 대해 for of 반복문을 사용하여 순회하려 한다면

TypeError: 요소 is not iterable 이라는 에러를 확인하실 수 있습니다.

 

 

const array = [1, 2, 3, 4];

for(let value of array) {
    console.log(value);
}

// 1
// 2
// 3
// 4

 

 

위의 예제와 같이 간단하게 Iterable 객체(배열)에 대해서 for of 반복문을 통해 순회하는 사용법을 확인해보았습니다. 더 자세한 내용은 다음 for문 사용법에 대해 알아보는 시간을 갖도록 하겠습니다.

 

 

 

 

Iterator 객체는 무엇인가?

Iterator 객체는 Array, Map, Set의 API를 통해서도 생성할 수 있습니다.

그럼 예제를 통해 Iterator 객체를 만들어보고 확인해보도록 하겠습니다.

 

 

const array = [1, 2, 3, 4];
const map = new Map([[1, 100], [2, 200], [3, 300]]);
const set = new Set([1, 2, 3, 4]);

console.log(array.entries());    // Object [Array Iterator] {}
console.log(map.entries());      // [Map Entries] { [ 1, 100 ], [ 2, 200 ], [ 3, 300 ] }
console.log(set.entries());      // [Set Entries] { [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ] }

 

 

위의 예제와 같은 형식으로 각 자료구조의 entries() 함수를 활용하여 Iterator 객체를 만들어보았습니다. 그럼 이제 마지막으로 Iterator 객체를 어떻게 활용하는지 알아보겠습니다.

 

 

 

 

Iterator 객체의 활용법

Iterator를 사용하는 법은 크게 2가지 방법이 있습니다. 오늘은 이 2가지 방법 모두 알아보도록 하겠습니다.

 

 

1.  for of 반복문 활용

 

위의 예제에서도 간단히 소개했던 내용으로 Iterator 객체는 for of 반복문을 통해 전체를 순서대로 순회하며 요소들을 직접 접근할 수 있습니다. for of 반복문을 통해 Iteraotor를 간단하게 순회할 수 있기에 이 방법만 사용하지 않을까 합니다. 그럼 예제를 통해 for of 반복문으로 Iteraotor 객체 활용하는 방법 알아보겠습니다.

 

 

const array = [1, 2, 3, 4];

for(let item of array.entries()) {
    console.log(item);
}

// [ 0, 1 ]
// [ 1, 2 ]
// [ 2, 3 ]
// [ 3, 4 ]

for(let [key, value] of array.entries()) {
    console.log(key, value);
}

// key: 0 value: 1
// key: 1 value: 2
// key: 2 value: 3
// key: 3 value: 4

 

 

위의 예제는 for of 반복문으로 Iterator 객체를 순회하는 두가지 방법을 구현해보았습니다.

 

 

첫번째 방법은 item이라는 배열의 각 요소를 [index, value]의 형태로 순회하는 방법입니다.

두번째 방법은 item의 요소를 key와 value로 각각 할당받아 순회하는 방법입니다.

 

 

즉, 배열의 entries() 함수로 만들어진 Iterator 객체는 하나의 요소 형태가 [index, value] 형태를 띄고 있다는 것을 알 수 있습니다. Iterator 객체에서 for of 반복문을 통해 각 요소를 얻을 수 있는 것입니다.

 

 

 

 

2.  Iterator 객체 내부 함수 활용

 

Iterator 객체의 next() 함수를 활용하여 다음 순회 요소를 찾아오는 방법을 통해 Iterator 객체를 활용할 수 있습니다.

바로 예제를 통해 Iterator 객체 내부 함수 활용 방법을 알아보겠습니다.

 

 

const array = [1, 2, 3, 4];
const arrayIterator = array.entries();

let item = arrayIterator.next();
while (!item.done) {
    console.log(item);
    item = arrayIterator.next();
}

// { value: [ 0, 1 ], done: false }
// { value: [ 1, 2 ], done: false }
// { value: [ 2, 3 ], done: false }
// { value: [ 3, 4 ], done: false }

 

 

위 예제는 Iterator 객체의 내장 함수인 next() 함수를 통해 IteratorResult 객체를 가져올 수 있습니다.

이 IteratorResult 객체는 바로 value와 done 두 속성을 갖고 있습니다. 두 속성은 바로 아래 의미를 갖고 있습니다.

 

• value: 현재 Iterator 객체에서 선택된 요소 값
• done: 순회가 완료되었는지를 나타내는 boolean 타입 값
  1. Iterator 객체에서 아직 다음 순회할 요소가 남아있다면 false
  2. Iterator 객체에서 더 이상 순회할 요소가 남아있지 않다면 true

 

이러한 내용을 토대로 Iterator 내장 함수를 활용하여 순회하고자 한다면 위 예제와 같이 활용하곤 합니다.

 

 

 

 

오늘도 JavaScript에서 자주 사용하는 Iterator 객체에 대해서 알아보았습니다. 이번에 공부하게 되면서 개발하면서 자주 보게는 되지만 무엇인지 명확하게 몰랐던 Iterator 객체에 대해서 더 자세한 내용을 정리할 수 있었던 기회가 된 것 같아 아주 만족스럽게 마무리 하겠습니다.