[JS] Iterable Object(반복 가능한 객체)

Iterable Object

: 반복 가능한 객체 (배열을 일반화 한 객체)

• for...of 문을 사용할 수 있는 객체
• Symbol.Iterator 메서드가 반드시 구현되어야 함
  - Symbol.Iterator 메서드: Iterator 객체를 반환하며 Iterator 객체는 next() 메서드를 가짐
  - next() 메서드: { value, done } 형태의 객체를 반환 (value는 현재 값, done은 반복이 끝났는지를 나타내는 boolean 값)
  
• 객체, 배열, Iterable 객체는 다른 존재임
• 일반 객체는 next()를 호출할 수 없다❌

 

 

Iterator

: 반복 작업을 수행하는 객체

• next() 메서드를 통해 반복의 다음 값을 반환

const arr = '1 2 3 4 5'.split(' ');

const iter = arr[Symbol.iterator](); // 위 배열을 iterator 객체로 만들기

for (const a of iter) {
  console.log(a);
}
/*
1
2
3
4
5
*/

console.log(iter.next())
// 사진 참고

 

 

console.log(iter.next())

 

 

 

 

 

✨ 유사배열  vs 이터러블

• 유사배열 : 인덱스 키와 length 속성을 가진 객체
• 이터러블 : Symbol.Iterator 메서드를 가지는 객체

 

---

 

제너레이터(Generator) 함수

: Iteratable Object을 만들 수 있는 방법 중 하나

function* 함수명() {
     yield
        ...
}

• yield: 값을 뽑아내는 형태(산출)
  - 값을 반환하고, 실행을 잠시 멈춤
• 제너레이터 함수는 호출되면 제너레이터 객체를 반환하며, 이 객체는 next() 메서드를 가지고 있다.
• 화살표 함수로 생성 불가능❌
  

1. 일관된 반복 동작 제공(for...of문)
2. 커스텀 반복 제어 ⭕(객체를 반복 가능한 상태로 만듦)
3. 지연 계산 ⭕(필요할 때마다 반복을 돌릴 수 있음) ➡ 성능 개선
4. 무한 시퀀스 생성 ⭕(무한대의 값)
5. 비동기 반복 작업 ⭕
6. 다양한 데이터 소스와의 통합이 좋음👍(Map, Set 등)

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

const gene = gen()

console.log(gene.next());

console.log(gene.next());

 

 

예시

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

for (const a of customIter) {
  console.log(a);
}
/*
1
2
3
*/

 

 

---

 

iterable 객체

 

Iterable | JavaScript로 만나는 세상