▶ JavaScript Tutorial

JavaScript Iterables

JavaScript Iterables: 이터러블의 이해와 활용

*JavaScript 이터러블(iterables)**은 반복할 수 있는 객체로, 이터레이터(iterator)를 통해 순차적으로 데이터를 순회할 수 있는 구조입니다. 배열, 문자열, Map, Set 같은 이터러블 객체는 이터레이터 프로토콜을 구현하여, for...of 같은 반복문에서 순회할 수 있게 합니다. 이터러블 객체는 ES6에서 도입된 중요한 개념 중 하나입니다.

이 가이드는 JavaScript의 이터러블 객체와 이터레이터 프로토콜에 대해 설명하고, 이를 활용하는 방법을 다룹니다.

1. 이터러블이란?

이터러블(Iterable) 객체는 Symbol.iterator 메서드를 가지고 있으며, 이터레이터 프로토콜을 구현하여 순차적으로 데이터에 접근할 수 있는 객체입니다. 즉, 이터러블 객체는 반복할 수 있는 객체입니다.

1.1. 주요 이터러블 객체

다음과 같은 객체들은 JavaScript에서 기본적인 이터러블입니다:

배열(Array)
문자열(String)
Map
Set
arguments 객체 (함수 매개변수로 넘긴 인자들)
DOM 컬렉션 (NodeList,
```
Collection 등)
```

1.2. 이터러블과 이터레이터 프로토콜

이터러블 객체는 내부적으로 **Symbol.iterator**라는 메서드를 가지고 있습니다. 이 메서드는 이터레이터 객체를 반환하며, 이 이터레이터 객체는 next() 메서드를 통해 각 요소에 순차적으로 접근할 수 있습니다.

2. `for...of`로 이터러블 순회하기

for...of 문은 이터러블 객체의 값을 순회하는 가장 대표적인 방법입니다. 이터러블 객체는 for...of 반복문을 통해 손쉽게 순회할 수 있습니다.

2.1. 배열 순회

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
}
// 출력:
// apple
// banana
// cherry

2.2. 문자열 순회

문자열도 이터러블 객체이므로, for...of를 통해 각 문자에 접근할 수 있습니다.

const word = "hello";

for (const char of word) {
    console.log(char);
}
// 출력:
// h
// e
// l
// l
// o

3. 이터레이터 직접 사용하기

*이터레이터(iterator)**는 이터러블 객체의 요소를 하나씩 순차적으로 반환하는 객체입니다. Symbol.iterator 메서드를 호출하면 이터레이터를 얻을 수 있습니다.

3.1. `Symbol.iterator` 메서드 사용

배열에서 이터레이터 객체를 얻고, next() 메서드를 사용하여 순차적으로 값을 반환하는 예시입니다.

const fruits = ["apple", "banana", "cherry"];

// 배열에서 이터레이터 객체 생성
const iterator = fruits[Symbol.iterator]();

console.log(iterator.next());  // 출력: { value: 'apple', done: false }
console.log(iterator.next());  // 출력: { value: 'banana', done: false }
console.log(iterator.next());  // 출력: { value: 'cherry', done: false }
console.log(iterator.next());  // 출력: { value: undefined, done: true }

value: 현재 반환된 값
done: 이터레이터가 끝났는지 여부를 나타내는 불리언 값

3.2. 이터레이터 프로토콜

이터레이터는 next() 메서드를 호출할 때마다 다음 값을 반환하며, 모든 값을 순회하면 **done: true**를 반환합니다. 이터러블 객체는 이터레이터 프로토콜을 따르는 객체입니다.

4. 이터러블 객체 예시

4.1. `Set` 순회

Set 객체는 중복되지 않는 값들의 집합이며, 이터러블 객체이기 때문에 for...of와 같은 반복문으로 순회할 수 있습니다.

const set = new Set(["apple", "banana", "cherry"]);

for (const fruit of set) {
    console.log(fruit);
}
// 출력:
// apple
// banana
// cherry

4.2. `Map` 순회

Map 객체는 키-값 쌍을 저장하는 이터러블 객체입니다. for...of 문으로 [키, 값] 쌍을 순회할 수 있습니다.

const map = new Map([
    ["name", "Alice"],
    ["age", 25],
    ["city", "Seoul"]
]);

for (const [key, value] of map) {
    console.log(`${key}: ${value}`);
}
// 출력:
// name: Alice
// age: 25
// city: Seoul

5. 사용자 정의 이터러블

JavaScript에서는 사용자 정의 이터러블을 만들 수 있습니다. Symbol.iterator 메서드를 구현하여 객체를 이터러블로 만들 수 있습니다.

5.1. 사용자 정의 이터러블 예시

const customIterable = {
    data: [10, 20, 30],
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                if (index < this.data.length) {
                    return { value: this.data[index++], done: false };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
};

for (const value of customIterable) {
    console.log(value);
}
// 출력:
// 10
// 20
// 30

Symbol.iterator: 이 메서드는 이터레이터 객체를 반환합니다.
next(): 이터레이터 객체에서 호출하는 메서드로, 다음 값을 반환하며 반복이 끝나면 **done: true*를 반환합니다.

6. `arguments` 객체와 이터러블

JavaScript의 arguments 객체는 함수 호출 시 전달된 인수들을 나타내며, 이터러블 객체입니다. 따라서 for...of를 사용해 순회할 수 있습니다.

6.1. `arguments` 객체 순회

function sum() {
    let total = 0;
    for (const value of arguments) {
        total += value;
    }
    return total;
}

console.log(sum(1, 2, 3, 4));  // 출력: 10

7. 이터러블과 `for...in`의 차이점

for...of: 이터러블 객체의 값을 순회합니다.
for...in: 객체의 열거 가능한 속성(키)을 순회합니다. 이터러블 객체가 아닌 일반 객체에서 속성(키)를 순회할 때 사용합니다.

7.1. 배열에서 `for...of`와 `for...in` 비교

const array = ["a", "b", "c"];

// for...of: 값을 순회
for (const value of array) {
    console.log(value);
}
// 출력: a, b, c

// for...in: 인덱스를 순회
for (const index in array) {
    console.log(index);
}
// 출력: 0, 1, 2

8. 제너레이터와 이터러블

제너레이터(generator) 함수는 이터러블 객체를 쉽게 생성할 수 있는 방법 중 하나입니다. 제너레이터 함수는 **yield**를 통해 값을 반환하고, 이터레이터를 생성합니다.

8.1. 제너레이터를 통한 이터러블 생성

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const iter = generator();

for (const value of iter) {
    console.log(value);
}
// 출력:
// 1
// 2
// 3

요약

이터러블: 순차적으로 데이터를 반복할 수 있는 객체로, Symbol.iterator 메서드를 구현하여 이터레이터 프로토콜을 따릅니다.
이터레이터: next() 메서드를 통해 값을 하나씩 반환하고, 반복이 끝나면 **done: true*를 반환하는 객체입니다.
for...of: 배열, 문자열, Set, Map과 같은 이터러블 객체의 값을 순회하는 반복문입니다.
사용자 정의 이터러블: Symbol.iterator 메서드를 구현하여 직접 이터러블 객체를 만들 수 있습니다.
*제너

레이터**: 이터러블 객체를 쉽게 생성할 수 있는 함수로, 이터레이터를 반환합니다.

이터러블과 이터레이터는 JavaScript에서 반복 가능한 객체를 다루는 핵심 개념입니다. 이를 활용하면 데이터를 순차적으로 처리하고, 다양한 반복 작업을 유연하게 수행할 수 있습니다.

코딩 스쿨 JavaScript