반응형
snowman95
코딩수련장
snowman95
전체 방문자
오늘
어제
  • 분류 전체보기 (229)
    • 앱테크 (3)
    • 옵시디언 (5)
    • 드라마, 영화 (1)
    • 개발자 이야기 (23)
    • 프로젝트 (10)
      • 프로젝트 방법론 (7)
      • 프로젝트 기록 (2)
      • Github (1)
    • 개발 지식 (0)
      • 디자인 패턴 (0)
    • 프론트엔드 개발 (5)
      • 테크트리 (2)
      • React.js (19)
      • ReactNative (2)
      • Next.js (6)
      • GraphQL (6)
      • 패키지 매니저 (2)
      • 라이브러리 (3)
      • 상태관리 라이브러리 (4)
      • Web 지식 (3)
      • HTML CSS (26)
      • Javascript (16)
      • 도구 (Tool) (3)
      • 성능 최적화 (1)
      • 디자인시스템 (0)
    • Python (53)
      • 모음집 (1)
      • 문법 (12)
      • 라이브러리 (15)
      • 알고리즘 (10)
      • 백준 문제풀이 (9)
      • 코딩테스트 (2)
      • 도구 (Tool) (3)
    • C++ (20)
      • 알고리즘 (6)
      • 삼성SW기출 (6)
      • 삼성 A형 (6)
    • 데이터사이언스 (1)
    • 인프라 (9)
      • 하드웨어 지식 (4)
      • Ansible (2)
      • Database (2)
      • 쉘스크립트 (1)
    • 주식 (0)
    • 취업 준비 (4)
      • 취업 이야기 (0)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 전공 요약 #운영체제
  • 나의 해방일지
  • 삼성SDS
  • 전공 요약 #네트워크
  • 알고리즘
  • 기계식키보드 #nuphy
  • A형
  • 공간복잡도
  • nextjs
  • 면접
  • 삼성SW역량테스트
  • 티스토리챌린지
  • Next.js #graphql #tailwind.css
  • 백준
  • GraphQL
  • 전공 요약 #데이터베이스
  • 전공요약
  • 언어
  • C++
  • 오블완

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
snowman95

코딩수련장

자바스크립트 - Generator
프론트엔드 개발/Javascript

자바스크립트 - Generator

2021. 8. 22. 13:57
728x90
반응형

Generator는 작업 도중에 다른 작업을 하다가 다시 돌아왔을때 이전 작업부터 이어서 진행할 수 있게 해준다.

개념 자체는 다른 대부분의 언어에도 있으니 여러 언어를 공부하신 분들은 이미 아실거다.

  1. Generator 는 iterable이다. 순회(차례로 진행) 가능한 객체다. for of 문으로 전체 순회가능하다.
    iterable은 Symbol.iterator() 메소드가 있고, 이 메소드는 iterator를 반환해야 한다.
    iterator는 next() 메소드를 가진다. 이 메소드는 value, done 속성을 가진 객체 반환한다. 작업 끝나면 done=true가 된다. for of 문은 iterable 객체여야 사용가능하며,
    Array, Map, Set, String, TypedArray, arguments 모두가 iterable이기 때문에 for of 문을 쓸 수 있는 것이다.

  2. Generator는 미리 값을 생성하지 않고, next()를 호출한 순간에 값을 생성한다. (메모리 관리 효율적임)

  3. Generator는 function 옆에 *을 붙여서 생성할 수 있고 내부의 yield 문으로 제어 가능하다.
  • next()   : 가장 가까운 yield를 만날때 까지 수행. (value:yield값, done:false/true) 객체 반환
  • return('text") : {value:"text" , done:true} 반환하고 Generator 종료.
  • throw(new Error('text') : {value:undefined , done:true} 반환하고 catch문으로 빠짐.

 

function* counter(){
  try{
    console.log(1);
    yield 1;
    console.log(2);
    yield 2;
    console.log(3);
    yield 3;
    return "end";
  } catch(e){
    console.log(e);
  }
}

const it = counter(); # generator 객체 반환됨
it.next();            # 가장 가까운 yield 만나면 중단             {value:1, done:false}
it.next();            # 저번 yield 이후부터 다음 yield 까지 수행  {value:2, done:false}
it.next();            # 저번 yield 이후부터 다음 yield 까지 수행  {value:3, done:false}
it.next();            # 저번 yield 이후부터 return을 만나고 종료  {value:undefined, done:true}


it[Symbol.iterator]() === it; # true
for(let i of it){
  console.log(i);
}
1
2
3

 

값 입력받기

function* add(){
  try{
    const num1 = yield "num1 입력";
    const num2 = yield "num2 입력";
    return num1+num2;
  } catch(e){
    console.log(e);
  }
}

const it = add();     # generator 객체 반환됨
it.next(5);           # {value:5, done:false}
it.next(5);           # {value:5, done:false}
return;               # {value:10, done:true}

 

Generator 안에서 다른 Generator 호출

yield* 로 중간에 다른Generator 를 호출가능하다.

yield* 옆에는 Iterable 객체가 올 수 있다.

function* gen1(){
  yield "Iron";
  yield "Man";
}

function* gen2(){
  yield "I";
  yield "am";
  yield* gen1();
}

console.log(...gen2());
"I am Iron Man"

 

반응형
저작자표시 동일조건

'프론트엔드 개발 > Javascript' 카테고리의 다른 글

자바스크립트 - 이벤트 함수, 이벤트 처리기  (0) 2021.08.28
자바스크립트 - 코딩 컨벤션  (0) 2021.08.28
자바스크립트 - 프로미스 (promise)  (0) 2021.08.21
자바스크립트 - 클래스 (class)  (0) 2021.08.21
자바스크립트 - call, apply, bind  (0) 2021.08.21
    '프론트엔드 개발/Javascript' 카테고리의 다른 글
    • 자바스크립트 - 이벤트 함수, 이벤트 처리기
    • 자바스크립트 - 코딩 컨벤션
    • 자바스크립트 - 프로미스 (promise)
    • 자바스크립트 - 클래스 (class)
    snowman95
    snowman95
    (17~19) Unity/Unreal Engine 게임 프로그래머 (20~21) System Administrator ___________ (22~) React 웹 프론트앤드 개발자 __________ 깃헙 : https://github.com/snowman95

    티스토리툴바