JavaScript_ES6_Study [ Generator ]

2022-04-06 노션페이지,
2022-04-26 노션페이지,
2022-04-28 노션페이지,
2022-05-19 노션페이지
기록된 노션을 다시 정리

어려웠던 부분

• 전에 배웠던 이터레이션을 완벽히 이해하지 못해 연장선인 제너레이터 부분에 영향을 받음
• 제너레이터 객체의 next 메소드에는 인수 전달 가능
  • 인수의 값이 어디에 어떻게 할당되는지 몰랐음

1.제너레이터

• 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다.
• 제너레이터 함수를 사용하면 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다.
• 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다.
• 제너레이터 함수는 함수 코드 블록을 한 번에 실행하지 않고 실행을 일시 중지하고, 필요한 시점에 재시작할 수 있는 특별한 함수이다.
• 제너레이터 함수를 호출하면 제너레이터를 반환한다.
  • 제너레이터는 이터러블(iterable)이면서 동시에 이터레이터인 객체이다.

2. 제너레이터 함수의 정의

제너레이터 함수는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 문을 포함한다.

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

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

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

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

• 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.
  - 제너레이터 객체가 이터러블이며 동시에 이터레이터이므로 next메소드를 사용할 수 있다.

  yield

  제너레이터 버전의 return 키워드로 생각 할 수 있다.
  yield 키워드는 실질적으로  value 와 done 이라는 두 개의 속성을 가진 IteratorResult
  객체를 반환한다.
  value 프로퍼티는 yield 문이 반환한 값이고 done 프로퍼티는 제너레이터 함수 내의 모든 yield 문이 실행되었는지를 나타내는 boolean 타입의 값이다.

// 제너레이터 함수 정의
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 메소드 호출 시 여기까지 실행된다.
}

const generatorObj = counter();
console.log(generatorObj.next());
// yield 뒤에 있는 값이 이터레이터 리절트(iterator result) 객체의 value 값이 된다
// 함수 안에 모든 yield문이 실행되면 리절트(iterator result) 객체의 done 값이 true가 된다

4. 제너레이터의 활용

• 이터레이터의 next 메소드와 다르게 제너레이터 객체의 next 메소드에는 인수를 전달할 수도 있다. 이를 통해 제너레이터 객체에 데이터를 전달할 수 있다

  • next() 메소드에 전달된 인수는 제너레이터 함수에서 현재 실행 중인 yield 문의 좌변에 할당됨
  • yield 키워드의 반환 값이 현재 실행 중인 yield 문의 우변에 할당됨
  • 다음 next() 호출 시에 이 값이 반환됨

function* generatorFunction() {
  const x = yield "첫 번째";
  const y = yield "두 번째";
  yield x + y;
}

const generator = generatorFunction();
console.log(generator.next()); // { value: '첫 번째', done: false }
console.log(generator.next(1)); // { value: '두 번째', done: false }
console.log(generator.next(2)); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

참조: poiemaweb.com