[Javascript] ES6의 이터러블 객체와 이터레이터 객체 간단 정리

이터러블 속성을 알아야 하는 이유

자바스크립트 ES6가 나오면서 이터러블이라는 개념이 등장하였다. for~of문, Set, Map, 스프레드 연산자, 구조 분해 할당 등 ES6의 등장과 함께 나온 개념들 대다수가 이터러블 속성과 연관된 개념들이기 때문에 해당 기능들의 동작 원리를 이해하기 위해서는 이터러블 속성을 한번 짚고 넘어갈 필요는 있다.

 

(예를 들어, Set과 Map 같은 경우는 배열도 아닌데 *어떻게 배열과 비슷하게 동작할 수 있는거지? 라고 질문하면, Set과 Map은 이터러블 객체이기 때문이라고 답변할 수 있다.)

 

* Set과 Map이 배열과 비슷하게 동작하는 지에 대한 상세 설명

1) Set과 Map은 배열과 달리 인덱스를 사용하지 않는데 for~of문으로 순회할 수 있음 ☞ 이터러블 객체이기 때문

2) Set과 Map은 배열처럼 스프레드 연산자를 사용할 수 있음 ☞ 배열이라서 스프레드 연산자를 사용할 수 있는 게 아니라, 이터러블 객체이기 때문에 스프레드 연산자를 사용할 수 있는 것 (배열도 이터러블 객체)

3) Set과 Map은 배열도 아닌데 어떻게 Array.from()을 사용할 수 있지? ☞ Array.from()의 대상도 역시 이터러블 객체이기 때문에 사용 가능한 것

 

이터러블(Iterable) 객체

const arr = [1, 2, 3]; // 배열은 이터러블 객체
arr[Symbol.iterator]; // ƒ values() { [native code] }

const string = 'abcd'; // 문자열은 이터러블 객체
string[Symbol.iterator]; // ƒ values() { [native code] }

const num = 1; // 이터러블 객체가 아닌 경우
num[Symbol.iterator]; // undefined

이터러블 객체란 반복 가능한 데이터 구조를 제공하는 객체로, '객체'라고 해서 우리가 일반적으로 생각하는 { key: value }의 이런 리터럴 객체를 생각하면 안 된다. 이터러블 객체의 주된 특징은 Symbol.iterator 메서드를 가지고 있으며 for~of문을 통해 반복이 가능하다. (for~of문은 무조건 이러터블 객체인 경우에만 동작한다.) 이터러블 객체의 예시로는 배열, 문자열, Set, Map, (일부) 유사 배열 객체 등이 있다. (우리가 생각하는 반복 가능한 것들은 웬만하면 이터러블 객체라고 생각하면 된다.)

 

이터레이터(Iterator) 객체

const array = [1, 2, 3]; // 이터러블 객체
const iterator = array[Symbol.iterator](); // 이터레이터 객체를 가져온다.

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

이터레이터 객체는 이터러블 객체의 요소를 순차적으로 접근할 수 있는 객체로, 단순히 이터러블 객체에서 next() 메서드만 추가한 객체라고 생각하면 된다. next() 메서드는 { value: 값, done: Boolean } 형식의 객체를 반환하며 이터러블 객체의 요소를 하나씩 반환하는 역할을 한다. 반복 문법과는 별도로 직접 next() 메서드를 호출하여 값을 가져온다.

 

이터러블 객체와 이터레이터 객체를 따로 나눈다고 해서 서로 다른 개념이라고 생각하면 안 된다. 그냥 같은 형태의 객체에 메서드가 1개냐 2개냐의 차이라고 생각하면 되고, 하는 역할이 조금 다르다고 생각하면 된다.

 

이터러블 객체와 이터레이터 객체, 사실 코딩을 하면서 실제로 이 둘의 개념을 직접적으로 사용하는 경우는 드물다. 하지만, 자바스크립트의 ES6 문법 자체가 이터러블 개념 하에 동작하는 것들이 많기도 하고, 배열의 반복 처리를 이해하기 위해서 이터러블 속성에 대한 기본적인 이해는 가볍게라도 필수적으로 알고 있어야 한다고 생각한다.

 

1. 이터러블 개념이란, 굳이 반복문을 쓰지 않더라도 객체 내의 요소를 하나씩 순회할 수 있는 구조를 제공하는 것.
1. 이터러블 객체 : Symbol.iterator라는 메서드를 가진 객체.
2. 이터레이터 객체 : 이터러블 객체에 next() 메서드를 구현한 객체.
3. 이터러블 객체에는 배열, 문자열, Map, Set, 유사 배열 객체 등이 있다.
4. for~of문은 이터러블 객체에서만 사용할 수 있다.
5. 이터러블 객체 전용 기능 : for~of문, 스프레드 연산자, Array.from() 등