Iterator 패턴

 

 

Iterator 패턴

 

컬렉션 내의 요소를 순차적으로 접근할 수 있는 인터페이스를 제공하는 패턴

 

function createIterator(collection) {
  let index = 0;

  return {
    next: () => {
      return index < collection.length ? { value: collection[index++], done: false } : { done: true };
    }
  };
}

const numbers = [1, 2, 3, 4, 5];

// 배열에 대한 Iterator 생성
const iterator = createIterator(numbers);

// 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: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { done: true }

 

 

 

내부 구조를 노출하지 않을 수 있음

반복문이기 때문에 일관된 방식으로 접근 할 수 있음

비동기적으로 처리 할 수 있음

 

 

 

제너레이터 함수

function* myGenerator() {
  yield 'Hello';
  yield 'World';
  return 'Done';
}

const iterator = myGenerator();

console.log(iterator.next()); // { value: 'Hello', done: false }
console.log(iterator.next()); // { value: 'World', done: false }
console.log(iterator.next()); // { value: 'Done', done: true }
console.log(iterator.next()); // { value: undefined, done: true }

 

iterator.next()를 호출할 때마다 Generator 함수가 실행

다음 yield 키워드까지 진행 => 그에 따른 값과 완료 여부가 반환

 

{done : boolean} 은 next() 메서드에서 반환되는 객체

제너레이터 함수가 완료되었는지 여부

 

마지막 호출 이후에는 done true 반환

추가적인 호출은 undefined

 

 

 

비동기

 

// fetchData 제너레이터 함수 정의
function* fetchData() {
  const response1 = yield fetch('https://api.example.com/data1'); // 첫 번째 비동기 작업
  const data1 = yield response1.json(); // 첫 번째 비동기 작업의 결과를 처리

  const response2 = yield fetch('https://api.example.com/data2'); // 두 번째 비동기 작업
  const data2 = yield response2.json(); // 두 번째 비동기 작업의 결과를 처리

  // 여기서 더 많은 작업을 수행할 수 있음
}

// fetchData 함수를 호출하여 이터레이터를 생성
const iterator = fetchData();

// 이터레이터를 진행시키면서 비동기 작업을 제어
(async () => {
  const response1 = await iterator.next(); // 첫 번째 비동기 작업 시작
  const data1 = await response1.value.json(); // 첫 번째 비동기 작업의 결과를 처리

  const response2 = await iterator.next(data1); // 두 번째 비동기 작업 시작, 첫 번째 작업의 결과를 전달
  const data2 = await response2.value.json(); // 두 번째 비동기 작업의 결과를 처리

  // 여기서 더 많은 작업을 수행할 수 있음
})();

 

 

 

 

대용량 데이터 처리할 때

 

// 대용량 데이터를 생성하는 함수
function* generateLargeData() {
  // 대용량 데이터 생성
  const largeData = Array.from({ length: 1000 }, (_, index) => index + 1);

  // 데이터를 작은 청크 단위로 나누어 반환
  const chunkSize = 10;
  for (let i = 0; i < largeData.length; i += chunkSize) {
    yield largeData.slice(i, i + chunkSize);
  }
}

// 제너레이터 함수를 호출하여 이터레이터 생성
const dataStream = generateLargeData();

// 이터레이터에서 데이터를 가져와서 처리
function processData() {
  const nextChunk = dataStream.next(); // 다음 청크 데이터 가져오기
  if (!nextChunk.done) {
    const chunkData = nextChunk.value; // 현재 청크 데이터
    console.log("Processing chunk:", chunkData);
    // 여기서 청크 데이터 처리 로직을 수행
    // 예를 들어, 청크 데이터를 서버로 보내거나 로컬로 저장하는 등의 작업 수행
    setTimeout(processData, 1000); // 재귀적으로 다음 청크 데이터 처리
  } else {
    console.log("All data processed.");
  }
}

// 데이터 처리 시작
processData();