[dream coding] 제너레이터 12강 TIL

제너레이터 Generator

• 제너레이터 함수는 이터러블을 생성하는 함수
• * 키워드를 붙여 선언
• yield 문 : 하나 이상의 키워드를 사용한 기준으로 반환한다
• 이터레이션 프로토콜을 준수한 방식보다 간편하게 이터러블 구현 가능
• 비동기 처리에서 유용

// 제너레이터 함수 정의
function* counter() {
  for (const v of [1, 2, 3]) yield v;
  // => yield* [1, 2, 3];
}

// 제너레이터 함수를 호출하면 제너레이터를 반환한다.
let generatorObj = counter();

// 제너레이터는 이터러블이다.
console.log(Symbol.iterator in generatorObj); // true

for (const i of generatorObj) {
  console.log(i); // 1 2 3
}

generatorObj = counter();

// 제너레이터는 이터레이터이다.
console.log('next' in generatorObj); // true

console.log(generatorObj.next()); // {value: 1, done: false}
console.log(generatorObj.next()); // {value: 2, done: false}
console.log(generatorObj.next()); // {value: 3, done: false}
console.log(generatorObj.next()); // {value: undefined, done: true}

• 제너레이터는 이터러블이면서 동시에 이터레이터인 객체
  • 1 ) 제너레이터 함수가 생성한 제너레이터 Symbol.iterator()를 소유한 이터러블이며
  • 2 ) 제너레이터는 next() 를 소유하며 메소드를 호출 시 value,done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 이터레이터다.

제너레이터 함수 정의

// 제너레이터 함수 선언문
function* genDecFunc() {
  yield 1;
}

let generatorObj = genDecFunc();

// 제너레이터 함수 표현식
const genExpFunc = function* () {
  yield 1;
};

generatorObj = genExpFunc();

// 제너레이터 메소드
const obj = {
  * generatorObjMethod() {
    yield 1;
  }
};

generatorObj = obj.generatorObjMethod();

// 제너레이터 클래스 메소드
class MyClass {
  * generatorClsMethod() {
    yield 1;
  }
}

const myClass = new MyClass();
generatorObj = myClass.generatorClsMethod();

제너레이터 함수 호출과 제너레이터 객체

• 제너레이터 함수 호출 시 코드블록이 실행되는 것이 아닌 제너레이터 객체를 반환
• next() 메서드를 호출하기 위해 Symbol.iterator () 메서드로 이터레이터를 별도 생성할 필요 없음!

/ 제너레이터 함수 정의
function* counter() {
  console.log('Point 1');
  yield 1;                // 첫번째 next 메소드 호출 시 여기까지 실행된다.
  console.log('Point 2');
  yield 2;                // 두번째 next 메소드 호출 시 여기까지 실행된다.
  console.log('Point 3');
  yield 3;                // 세번째 next 메소드 호출 시 여기까지 실행된다.
  console.log('Point 4'); // 네번째 next 메소드 호출 시 여기까지 실행된다.
}

// 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.
// 제너레이터 객체는 이터러블이며 동시에 이터레이터이다.
// 따라서 Symbol.iterator 메소드로 이터레이터를 별도 생성할 필요가 없다✨✨✨✨
const generatorObj = counter();

// 첫번째 next 메소드 호출: 첫번째 yield 문까지 실행되고 일시 중단된다.
console.log(generatorObj.next());
// Point 1
// {value: 1, done: false}

// 두번째 next 메소드 호출: 두번째 yield 문까지 실행되고 일시 중단된다.
console.log(generatorObj.next());
// Point 2
// {value: 2, done: false}

// 세번째 next 메소드 호출: 세번째 yield 문까지 실행되고 일시 중단된다.
console.log(generatorObj.next());
// Point 3
// {value: 3, done: false}

// 네번째 next 메소드 호출: 제너레이터 함수 내의 모든 yield 문이 실행되면 done 프로퍼티 값은 true가 된다.
console.log(generatorObj.next());
// Point 4
// {value: undefined, done: true}
//실행 종료

제너레이터 활용

💡 비동기처리

• 비동기 처리를 동기 처리처럼 구현할 수 있다
• 비동기 처리 함수가 처리 결과를 반환하도록 구현 가능

function* multipleGenerator(){
//비동기식: 시용자가 제어할 수 있도록 하는 것
  try{
  for (let i=0; i<10; i++){
    console.log(i);
    //return과 비슷하지만 yield는 사용자가 원할때마다 반환가능
    yeild i ** 2;
  }catch(error){
    console.log(error);
  }
}
  const multiple = multipleGenerator();
  let next = multiple.next();
  console.log(next.value,next.done);
  
 //multiple.return() : 이제 순회 끝내줘
  multiple.throw('Error'); //에러를 던졌기때문에 다음 넥스트는 안나옴
  
  next = multiple.next();
  console.log(next.value,next.done);