[JS] Iteration(이터레이션)을 알아보자

이터레이션

순회(반복)을 의미한다.

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

// 10
// 20

const obj = list[Symbol.iterator]();
console.log(obj.next()) // {value: 10, done: false}
console.log(obj.next()) // {value: 20, done: false}
console.log(obj.next()) // {value: undefined, done: true}

이터레이션은 돌 때마다 밸류값을 알려주고, 전부 순회하면 마쳤다는 뜻에서 done: true가 된다.

---

이터레이션의 프로토콜

프로토콜은 간단하게 어떤 '규약'이라고 할 수 있다.

데이터를 송수신하려면 약속된 규약이 필요하듯이 이터레이션을 할 때에도 규약이 필요하다.

이 규약에 따라 이터레이션을 수행하며, 또 규약만 따르면 사용자가 정의한 객체가 이터레이션을 사용할 수 있어 확장성을 갖고 있다고 볼 수 있다.

 

이터레이션 프로토콜은 이터러블 프로토콜과 이터레이터 프로토콜이 있다.

 

1) 이터러블 프로토콜

[Symbol.iterator] 메서드를 가지고 있는 객체여야 한다.

이 메서드는 이터레이터 객체를 반환하는 함수인데, 이 메서드가 있으면 순회 가능한 객체로 인지된다.

배열이나 문자열, Set, Map, argument, typed Array, DOM NodeList가 이에 해당한다.

 

진짜 있을까? 배열로 확인해보았다.

콘솔에 let arr = [1, 2]를 적고 console.dir(arr)를 해보면 arr의 구조를 알 수 있다.

 

 

[[Prototype]] 을 눌러 밑으로 쭉 내려가다 보면 Symbol.iterator가 있다는 걸 발견할 수 있다.

 

 

Set도 있는지 확인해보았는데 위와 같이 있다는 걸 알 수 있었다.

 

2) 이터레이터 프로토콜

next() 메서드를 가진 객체여야 한다.

next() 메서드는 위에서 봤던 것처럼 메서드를 호출하면 순차적으로 값을 생성하고 반환한다.

이 메서드는 {value, done} 형태로 결과를 반환하며 이 객체는 이터러블 객체에 의해 생성된다.

즉 객체가 반복할 수 있는 구조여야 하면서, Symbol.iterator를 가지고 있어야 한다.

---

이터러블 객체

[Symbol.iterator]를 가진 객체다.

말이 좀 비슷비슷해서 헷갈린다.

 

이터레이션: 반복 또는 순회. 집합이나 컬렉션의 각 요소를 순차적으로 접근

이터러블: 이터레이션 프로토콜을 따르는 객체로 [Symbol.iterator]를 가지고 있다. (반복할 수 있음)

이터레이터: 이터러블 객체에서 값을 차례대로 반환하는 객체로 next()를 가지고 있다. (다음으로 넘어갈 수 있음)

이터레이터 오브젝트: 이터러블 객체의 [Symbol.iterator] 메서드를 호출해 반환된 객체

이터러블 객체: 이터레이션 프로토콜을 따르는 객체. 이터레이션을 할 수 있는 객체.

 

그나저나 그럼 그냥 객체는 어떨까?

 

 

그냥 객체는 보다시피 Symbol.iterator가 없다.

이 말은 이터레이션 프로토콜에 부합하지 않으며, 이터레이션을 할 수 없다는 뜻이다.

그래서 객체는 for... of 루프를 사용해서 접근하곤 한다.

 

하지만 객체의 키값이나 밸류값을 모아 이터레이션을 할 수는 있다.

(예컨대 obj.keys()나 obj.values(), obj.entries() 메서드를 써서 배열 형태로 반환하는 것이다.)

---

확인하기

위에서 배열은 이터러블 프로토콜(Symbol.iterator)을 갖고 있다고 확인했다.

이 함수를 실행하면 next() 메서드가 생긴다.

 

 

배열 arr의 Symbol.iterator를 실행하고 dir로 확인해보니 next() 메서드가 생겼다.

이 메서드를 실행해보니 이터레이터 오브젝트에서 하나씩 값을 받아올 수 있다.

전부 순회하고 나면 값은 undefined, 순회 여부는 true로 끝이 난다.

---

대략적으로 이해해보았는데 결국 Symbol.iterator 있어? 가 제일 중요한 것 같다. 🥹

제대로 이해한 것인지 모르겠지만... 틀린 부분에 대한 지적은 언제나 환영입니다!