SDWoo
SDWoo의 개발일기
SDWoo
전체 방문자
오늘
어제
  • 분류 전체보기 (21)
    • 데브코스 (4)
    • TIL (13)
    • javascript (4)
    • react (0)
    • 알고리즘 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 글쓰기

공지사항

인기 글

태그

  • Typing-Game
  • 제네레이터
  • es6
  • 프로그래머스
  • vanillajs
  • 무한스크롤
  • javascrip
  • vanilaJS
  • 비동기
  • async/await
  • This
  • Spread문법
  • 디스트럭처링할당
  • Til
  • 데브코스
  • Promise
  • linkedlist
  • 행맨
  • cypress
  • addEventListener
  • 이벤트루프
  • JavaScript #TIL #VanillaJS
  • RESTAPI 설계 원칙 #까먹지말것
  • 선형
  • intersectionobserver
  • 호이스팅
  • deepdiv
  • JavaScript
  • 신규 아이디 추천
  • 알고리즘

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
SDWoo

SDWoo의 개발일기

TIL

2022/7/28 TIL

2022. 7. 29. 13:47

1. 자바스크립트 딥다이브 : 제네레이터와 async/awiait

제네레이터

제네레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다.

  • 제네레이터 함수는 함수 호출자에게 제어권을 양도할 수 있다.
  • 제네레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있게 한다.
  • 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도할 수 있다.
  • 제네레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.
  • 제네레이터 함수는 함수 호출자에게 상태를 전달할 수 있고, 함수 호출자로부터 상태를 전송 받을 수 있다.
  • 제네레이터 함수를 호출하면 제네레이터 객체를 반환한다.
  • 제네레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제네레이터 객체 반환
  • 제네레이터 함수는 function* 키워드로 선언하고 하나 이상의 yield 표현식 포함
    • 화살표 함수나 new연산자로 생성자 함수 호출 불가

제네레이터 객체

  • 제네레이터 객체는 next 메서드를 갖는 이터레이터지만 return, throw도 가짐
  • next: 제네레이터 함수의 yield 표현식까지 코드 블록을 실행하고 yield된 값을 value, false를 done 프로퍼티로 값으로 갖는 이터레이터 result 객체 반환
  • return: 인수로 전달받은 값을 value, true를 done 프로퍼티로 갖는 이터레이터 result 객체 반환
  • throw: 인수로 전달받은 에러를 발생시키고 undefined를 value로, true 를 done 프로퍼티로 갖는 이터레이터 result객체 반환

제네레이터의 일시 중지와 재개

  • next하면 처음 yield(양도) 표현식까지 실행 되고 일시 중지했다가 그 다음번 next로 이어간다.
  • 제네레이터의 next 메서드에 전달된 인수는 제네레이터 함수의 yield 표현식을 할당받는 변수에 할당된다.

제네레이터 활용

  1. 이터러블의 구현: 이터레이션 프로토콜을 준수하는 방식보다 간단하게 이터러블 구현 가능
  2. 비동기 처리: async 제네레이터 실행기를 통해 yield 인자를 주고받는 형식 (co 라이브러리 사용하는게 더 좋음)

async/await

  • 프로미스를 기반으로 동작하는데 후속 처리 메서드에 콜백 함수 전달할 필요가 없다.
  • 마치 동기 처럼 프로미스를 사용할 수 있음
  1. async
  • async 함수는 언제나 프로미스를 반환한다. (명시적 아니라도 암묵적으로 반환값 resolve)
  • constructor에는 쓸 수 없음 (인스턴스를 반환하므로)
  1. await
  • async 함수 내부에서 쓰고 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과 반환

  • 무조건 프로미스 앞에서 사용해야 한다.

  • 서로 연관이 없는 프로미스는 Promise.all 메서드로 처리하는게 더 좋다.

  • 에러처리

  • try…catch문 사용하거나, async 함수로 발생한 에러가 reject하는 프로미스 반환하므로 Promise.prototype.catch로도 가능

'TIL' 카테고리의 다른 글

2022/7/31 TIL  (0) 2022.08.01
2022/07/29 TIL  (0) 2022.07.30
2022/7/27 TIL  (0) 2022.07.28
2022/07/26 TIL  (0) 2022.07.26
2022/07/25 TIL  (0) 2022.07.25
    'TIL' 카테고리의 다른 글
    • 2022/7/31 TIL
    • 2022/07/29 TIL
    • 2022/7/27 TIL
    • 2022/07/26 TIL
    SDWoo
    SDWoo

    티스토리툴바