티스토리 뷰

지나가는 개념 정리

Generator 함수

U_pic 2022. 4. 29. 03:57

Redux saga를 공부하기 전에 Generator라는 함수에 대해서 한번 정리하고 넘어가면

Redux saga를 이해하는데 도움이 될 거라고 생각해서 정리를 해보려고 한다.

 

Generator

일반 함수에서는 return이 한번 발생하면 return 이후에 존재하는 코드라인은 더 이상 실행되지 않는다.

function OriginFunc() {
	return 1;
    // 여기 이후 코드는 절대 실행될 수 없다.
    	console.log(12);
    	return 2;
}

 

Generator 함수는 ES6에서 도입된 함수로, 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 더 간단하게 이터러블을 생성할 수 있다고 한다.

※ 이터러블(Iterable)이란?
이터러블(Iterable)은 자료를 반복할 수 있는 객체를 말한다. JS에서 Iterable은 이터레이터를 return하는 [Symbol.iterator]() 메서드를 가지고 있는 객체이다.
이터레이터는 { value: 값, done: true/false } 형태의 이터레이터 객체를 return하는 next()메서드를 가지고 있는 객체이다.
next() 메서드를 통해 내부 값을 순환할 수 있다.

참고: 이터러블 관련 블로그 글

Generator 함수는 일반 함수와 다르게 함수의 코드 블록을 한번에 실행하지 않고, 코드 블록을 일부 동작 한 후, 중지하고, 필요한 시점에 다시 중지한 부분부터 시작할 수 있다.

return 문에 담겨있는 값을 return하는 일반 함수와는 달리, Generator 함수는 Generator를 리턴한다. Generator는 이터러블 하면서 이터레이터 객체이다.

그래서 Generator는 .next()를 내장함수로 가지기 때문에, .next()를 통해 다음 동작을 수행할 수 있고, 결과 값으로 { value: 값, done: true/false }를 리턴한다.

 

예시)

const generator = function* counter() {
  console.log('Point 1');
  yield 1;
  console.log('Point 2');
  yield 2;
  console.log('Point 3');
  yield 3;
  console.log('Point 4');
}

console.log(generatorObj.next());
// Point 1
// {value: 1, done: false}

console.log(generatorObj.next());
// Point 2
// {value: 2, done: false}

console.log(generatorObj.next());
// Point 3
// {value: 3, done: false}

console.log(generatorObj.next());
// Point 4
// {value: undefined, done: true} -> 마지막 코드라인이 끝났을 때 done 값이 true로 바뀐다.

순차적으로 .next()로 메소드를 실행시킬때 마다 다음 yield문 까지 실행한 후에 함수 실행이 일시 중단된다.

 

generator 생성시 인자를 설정하면 .next()함수 내에도 인자를 넣어서 사용할 수 있다.

function* gen(n) {
  let res;
  res = yield n;    // n: 0 ⟸ gen 함수에 전달한 인수

  console.log(res);
  res = yield res;

  console.log(res);
  res = yield res;

  console.log(res);
  return res;
}
const generatorObj = gen(0);

console.log(generatorObj.next());  // 제너레이터 함수 시작 -> { value: 0, done: false }
console.log(generatorObj.next(1)); // 제너레이터 객체에 1 전달 -> { value: 1, done: false }
console.log(generatorObj.next(2)); // 제너레이터 객체에 2 전달 -> { value: 2, done: false }
console.log(generatorObj.next(3)); // 제너레이터 객체에 3 전달 -> { value: 3, done: true }

 

 

## Reference

 

Generator | PoiemaWeb

ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구

poiemaweb.com

 

[Js] 자바스크립트, Generator 함수에 대하여

공부해야지 해야지 하고 맨날 뒤로 미루다가 오늘 드디어 Generator에 대해서 정리를 해보려고 한다. Generator는 실행을 잠시 멈췄다가 나중에 다시 접근할 수 있는 아주 특이한 형태의 함수이다. Gen

im-developer.tistory.com

 

'지나가는 개념 정리' 카테고리의 다른 글

SaaS란?  (0) 2022.05.18
Content-Type  (0) 2022.05.09
Cookie/Session & Token(JWT)  (0) 2022.04.01
HTTP의 Stateless / Connectionless  (2) 2022.03.23
OAuth  (0) 2022.03.18
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함