[JS] iterable? 그게 뭐죠?

들어가며

자바스크립트에서 데이터 구조를 다루다보면 '이터러블(iterable)'이라는 개념을 마주할 수 있는데요. 이번 시간에는 이터러블이 무엇인지, 어떻게 작동하는지, 그리고 이를 활용하는 방법에 대해 알아보겠습니다.

 

이터러블? 그게 뭐죠?

자바스크립트에서 '이터러블'하다는 건 객체(object)가 반복 가능한 구조임을 의미합니다. 즉, 이터러블 객체는 내부에 있는 요소들을 효율적으로 순회할 수 있는 메서드를 제공합니다.

 

모든 객체가 이터러블한 건 아니다

일부 내장 타입(e.g. Array, Map)은 기본 반복 동작을 가지고 있는 이터러블 객체입니다. 반면, 일반 객체는 기본적으로 이터러블하지 않지만, 필요에 따라 이터러블로 만들 수 있습니다.

 

그럼 이터러블 객체가 되기 위해서는 어떤 조건을 갖춰야 할까요?

 

이터러블 객체가 되기 위해서는 [Symbol.iterator]() 메서드를 반드시 구현해야 합니다. 이 메서드는 인자를 받지 않는 함수로, 이터레이터(iterator)를 반환해야 합니다. 이터레이터는 반복할 값을 제공하는 객체입니다. 

 

어떻게 작동할까

만약 for...of 루프 등의 반복이 필요할 때, 자바스크립트는 자동으로 해당 객체의 Symbol.iterator() 메서드를 호출합니다. 이 메서드는 이터레이터를 반환합니다.

 

Symbol.iterator() 메서드가 호출될 때, 이 메서드는 이터러블 객체의 메서드로서 실행됩니다. 따라서 이 메서드 내부에서 this 키워드를 사용하면 이터러블 객체의 속성에 접근할 수 있습니다. 이를 통해 어떤 값을 반복할지 결정할 수 있습니다

 

이터레이터 함수는 일반 함수 또는 제너레이터(generator) 함수로 구현할 수 있습니다. 제너레이터 함수는 yield 키워드를 사용하여 반복할 값을 제공할 수 있습니다.

 

예시

const myIterable = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};

for (const value of myIterable) {
    console.log(value); // 1, 2, 3
}

 

이 코드는 제너레이터 함수를 통해 이터러블 객체를 정의하고, for...of 문으로 반복하는 방법을 보여줍니다.

 

마치며

이처럼 이터러블 객체는 자바스크립트에서 반복 가능한 데이터를 다루는 데 있어 중요한 역할을 합니다. 이를 통해 코드의 가독성과 유연성을 높일 수 있습니다.

 

지적이나 다른 의견은 언제나 환영합니다 :D

감사합니다.

 

See also

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/is_not_iterable

 

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols