iterable (이터러블), iterator

JavaScript에서 Iterable(이터러블)이란  반복(iteration)할 수 있는 객체를 의미합니다. 즉, 이터러블 객체는 내부의 요소를 하나씩 순회할 수 있는 구조를 가지고 있으며, for...of 루프 등 반복문을 통해 값을 차례차례 접근할 수 있습니다.

이터러블의 핵심 개념은 Symbol.iterator 메서드를 가진 객체라는 점입니다.  

 

이터레이터(iterator)는 이터러블 객체로부터 반환되는 객체로, 값을 하나씩 반환하는 역할을 합니다. 이터레이터는 next() 메서드를 통해 다음 값을 반환하며, 순회가 끝나면 done이 true로 설정됩니다. 

// 배열은 이터러블입니다.
const arr = [10, 20, 30];

// 배열의 이터레이터 얻기
const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

여기서 arr[Symbol.iterator]()는 반복자(iterator)를 반환하고, next()를 통해 차례차례 배열의 값을 순회하게 됩니다.

 

JavaScript의 다양한 내장 객체들은 이터러블 프로토콜을 따르며, for...of 루프를 사용할 수 있습니다. 이터러블을 지원하는 주요 객체는 다음과 같습니다:

• Array: 배열의 각 요소를 순회할 수 있습니다.
• String: 문자열의 각 문자를 순회할 수 있습니다.

const str = "hello";
for (let char of str) {
  console.log(char); // 'h', 'e', 'l', 'l', 'o'
}

const arr = [10, 20, 30];
for (let num of arr) {
  console.log(num); // 10, 20, 30
}

const typedArray = new Uint8Array([10, 20, 30]);
for (let value of typedArray) {
  console.log(value);  // 10, 20, 30
}

• Map: Map 객체는 각 key-value 쌍을 순회할 수 있습니다.

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

for (let [key, value] of map) {
  console.log(key, value); // 'key1' 'value1', 'key2' 'value2'
}

- Map 객체는 이터러블을 받기 때문에, 이중 배열과 같은 이터러블을 넘겨줘야 합니다.

- 여기서 [['key1', 'value1'], ['key2', 'value2']]는 배열의 배열(이중 배열)로, 이터러블 객체이기 때문에 Map 생성자에 전달될 수 있습니다.

• Set: Set 객체는 각 값을 순회할 수 있습니다.

const set = new Set([1, 2, 3]);
for (let value of set) {
  console.log(value);  // 1, 2, 3
}

• arguments 객체: 함수 내부에서 사용할 수 있는 특별한 객체로, 이터러블입니다.

function showArguments() {
    // arguments 객체를 for...of로 순회
    for (let arg of arguments) {
        console.log(arg);
    }
}

showArguments(1, 'hello', true, { name: 'Alice' });

//  터미널 출력
// 1
// hello
// true
// {name: 'Alice'}

• NodeList: DOM에서 반환되는 노드 목록도 이터러블입니다.

// html
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


// javascript
const listItems = document.querySelectorAll('li');

for (let item of listItems) {
    console.log(item.textContent);  // Item 1, Item 2, Item 3 출력
}

 

참고 : 일반객체에서 반복