[Javascript/ES6+] 이터레이션 / 이터러블 / 이터레이터

출처

자바스크립트 ES6+ 기본 - 인프런 | 강의

 

---

 

🚀 이터레이션 / 이터러블 / 이터레이터

1. 이터레이션

◽ 이터레이션

- 사전적 의미는 '반복'이지만, for문의 반복과는 차이가 있다.

[코드 1. for문과 이터레이션]

// for문
const list = [10, 20];
for(let value of list) {
    console.log(value);
}

// 이터레이션
const obj = list[Symbol.iterator]();
console.log(obj.next());
console.log(obj.next());
console.log(obj.next());

[실행결과]

10

20

{value: 10, done: false}

{value: 20, done: false}

{value: undefined, done: true}

 

- 이터레이션을 위한 프로토콜이 필요하며 프로토콜을 갖고있다.

- 빌트인이 아니다. 프로토콜에 맞으면 이터레이션이 가능하다.

 

◽ 이터레이션 프로토콜의 사용

- 오브젝트가 배열 형태여야 하는 등 이터레이션 할 수 있는 구조여야 한다.

- 이터레이션 함수가 있어야 한다. ex) list[Symbol.iterator]();

- 이터러블(Iterable)/이터레이터(Iterator) 프로토콜 2가지로 나뉜다.

- 개발자 코드로 프로토콜을 맞추면 이터레이션 할 수 없는 오브젝트를 이터레이션 할 수 있도록 만들 수 있다.

ex) 프로퍼티 오브젝트 등

---

2. 이터러블

◽ 이터러블 프로토콜

- 오브젝트가 반복할 수 있는 구조여야 하며, Symbol.iterator를 갖고 있어야 한다.

- Array, arguments, String, TypedArray, Map, Set, DOM NodeList는 디폴트로 이터러블 프로토콜을 갖고 있다.

 

◽ 이터러블 오브젝트란?

- 이터러블 프로토콜을 갖고 있는 오브젝트이다.

const list = [10, 20];
console.log(list[Symbol.iterator]);

// 이터러블 오브젝트가 아니기때문에 undefined가 나온다.
const obj = {one: 10, two: 20};
console.log(obj[Symbol.iterator]);

[실행결과]

function values() { [native code] }

undefined

 

- 자체 오브젝트에는 없지만 이터러블 오브젝트를 상속받아도 된다.

ex) Array 오브젝트를 상속받으면 이터러블 오브젝트가 된다.

---

3. 이터레이터

◽ 이터레이터 프로토콜

- 값을 순서대로 생성하는 방법, 규약이다.

const list = [10, 20];
// Symbol.iterator 함수를 호출하면 이터레이터 오브젝트를 생성한다.
const obj = list[Symbol.iterator]();
// 이터레이터 오브젝트에 next() 함수가 있다.
// next()를 호출한다 = 이터레이터를 호출한다.
console.log(obj.next());

[실행결과]

// done: 이터레이터로 가져올 값이 남아있는지의 여부

{value: 10, done: false}

{value: 20, done: false}

{value: undefined, done: true} // 더 이상 처리할 값이 없다.