중급 기본 정리 (with 앙마코딩) Generator

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)
문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

Generator

Generator는 함수를 중간에 멈췄다가 다시 실행 할 수 있는 기능이다.

 function* fn(){
  console.log(1);
  yield 1;
  console.log(2);
  yield 2;
  console.log(3);
  console.log(4);
  yield 3;
  return 'end'
}

const a = fn();

사용 방법은 functiong의 별포(*)를 사용하여 작성하고 내용에 yield를 사용하여 중간에 멈출 지점을 정할 수 있다.

generator 함수를 실행하면 generator 객체를 반환한다. 그리고 next()메서드가 있다.
위 코드에 함수를 실행하면 객체만 반환한다. (console.log(1) 실행안됨)

generator함수를 실행할 때에는 앞서 언급한 next()메서드를 사용한다.

a.next(); >> 1 {value:1,done : false}
a.next(); >> 2 {value:2,done : false}
a.next(); >> 3
             4{value:3,done : false}
a.next(); >>  {value: 'end',done : true}
a.next(); >>  {value: undefined,done : true}

실행시키면 가장 가까운 yield문까지 실행하고 value와 done라는 데이터 객체를 반환한다.
value는 yield 옆에 적힌 값이 반환되고, done은 함수가 끝까지 실행되면 true, 완료되지 않았으면 false를 반환한다.

따라서 위코드에서 처음 next()를 실행하면 yield 1까지 실행되기 때문에 >> 다음 값이 나타난다.
다시 한번 next()를 실행하면 그 다음 코드부터 다음으로 가까운 yield문까지 실행한다.
끝까지 실행하게되면 value에 들어갈 yield 값이 없기 때문에 return문에 의해서 반환된 'end'가 들어가게 되고, done : true로 함수가 끝까지 실행됐다고 알려준다.
끝까지 실행된 함수를 한번 더 실행하게 되면 받을 값이 없는 value는 undefined를 반환하고 done은 여전히 true를 반환하게 된다.

return(), throw() 메서드

return은 generator 함수를 즉시 완료 시킨다.
위 코드에서 a.next()를 4번 실행해야 done:true가 됐다. return()은 한 번에 사용으로 함수를 실행 완료 할 수 있다.
다만, 함수를 연속으로 실행하는 개념과는 다르다.
일반 함수였다면 1,2,3,4 console.log가 실행되고 return문이 반환되는 값이 존재하지만, return()을 사용할 경우 {value : undefined, done:true}가 반환되는 것이다. 만일 value에 값을 넣고 싶다면(아마 넣어야 사용 가치가 있다) 괄호 안에 값을 입력하면 된다.

a.return('hi');는 {value : 'hi', done:true}가 반환된다.

당연하게도 함수가 다 실행했기 때문에 이후 a.next()를 실행해도 {value : undefined, done:true}가 반환된다.

throw는 generator 함수를 즉시 완료 시키는 것은 동일하지만 error 값을 반환한다.

function* fn(){
  try{
    console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      console.log(4);
      yield 3;
      return 'end'
  } catch (e) {
    console.log(e);
  }
}

const a = fn();

위 사용했던 코드에 try ~ catch 문을 통해 에러시 발생하는 console.log(e)가 실행되도록 했다.

a.throw(new Error('err'));를 실행하면 catch문에 console.log(e)가 실행되고 {value : undefined, done:true}가 반환된다.
당연히 이후 a.next()를 실행해도 함수가 완료되었기 때문에 {value : undefined, done:true}를 반환하게 된다.

catch 문이 없다면 또는 별다른 값을 입력하지 않았다면 콘솔창에 경고가 뜬다. (uncautght : undefined) 만일 괄호 안에 값을 입력하면 undefined가 값을 받는다.