이터러블(iterable)
자바스크립트에서는 이터레이션을 이터레이션 프로토콜이라고 합니다 :)
이터레이션이란? 반복 / 순회
프로토콜이란? 규격 / 약속 / 인터페이스 따라서..! 이터레이션 프로토콜을 따른다는 것은 반복 / 순회가 가능하다는 뜻입니다 :)
이터레이션 프로토콜을 따르는 객체는 for of 나 spread 연산자를 사용할 수 있습니다 😄
이 이터레이션 프로토콜을 따르는 자바스크립트 기본적인 자료구조는
array / string / map / set 입니다 :)
얘네는 다 이터레이션 규격을 따르기 때문에..!
for of 와 spread 연산자 사용 가능합니당 (for of 나 spread 연산자를 사용해서 무언가를 순회한다는 것임)
순회가 가능한 오브젝트가 되려면?
오브젝트 안에 Symbol.iterator 함수를 만들면 !
그리고 그 함수에서 이터레이터 프로토콜을 따르는..즉, 순회하는 반복자를 리턴하는 객체를 만들면 됩니다 ㅎㅎ
반환되는 이터레이터 프로토콜을 따른다는 것은 무슨 말인가요?
바로! 객체를 리턴하면 됩니다 :) 객체 안에서 next라는 함수를 정의하면 됨!
next를 호출할 때마다 다음 값을 리턴하면 됩니다 👍
👏 정리
👏 Iterable 하다는 건..! 순회가 가능하다는 것!
👏 심볼 정의를 가진 객체 / 특정한 함수가 Iterator를 리턴한다는 것은 순회 가능한 객체라는 것!
👏 순회가 가능하면 무엇을 할 수 있음? for..of / spread 연산자 사용 가능!
이터러블 살펴보기
const array = [1, 2, 3]
for(const item of array){
console.log(item);
} // 1 2 3 출력됨...
array는 이터레이션 규격을 따르기 땜시..for of 연산자 사용 가능합니다 :)
하지만..! 오브젝트는 이터레이션 규격을 따르지 않기 땜시..for of 연산자 사용이 불가능합니다!
const obj = { 0: 2, 1: 4 }
for(const item of obj){
console.log(item);
} // for of를 사용해서 출력하면 에러 발생 
제너레이터(Generators)
제너레이터는 이터레이터를 조금 더 심플하게 만들 수 있습니다!
제너레이터도 이터레이션 프로토콜을 준수합니당
하지만..! 조금 더 간편한 방식으로 이터레이터를 만들 수 있습니다 🤭
제너레이터를 사용하기 위해서는 함수를 사용해야 합니다!
function 키워드 다음에 * 를 붙여줍니다! 저걸 붙여야 제너레이터라고 알 수 있습니다!
function* multipleGenerator() {
for (let i = 0; i < 10; i++) {
yield i ** 3;
}
}
const multiple = multipleGenerator()
let next = multiple.next()
console.log(next.value, next.done); // 0 false
next = multiple.next()
console.log(next.value, next.done); // 1 false
next = multiple.next()
console.log(next.value, next.done); // 8 false
next = multiple.next()
console.log(next.value, next.done); // 27 false
next = multiple.next()
console.log(next.value, next.done); // 64 false
next = multiple.next()
console.log(next.value, next.done); // 125 false
next = multiple.next()
console.log(next.value, next.done); // 216 false
next = multiple.next()
console.log(next.value, next.done); // 343 false
next = multiple.next()
console.log(next.value, next.done); // 512 false
next = multiple.next()
console.log(next.value, next.done); // 729 false
next = multiple.next()
console.log(next.value, next.done); // undefined true (9까지 다 돌았습니당)
제너레이터에서 yield는 사용자가 next를 호출할 때까지 기다렸다가..사용자가 next를 호출하면! 그다음 코드로 실행되어서 순회함! 이걸 계속 반복..! 즉, 사용하는 사람에게 제어권을 양보합니다 👏
