단순화된 자바스크립트 생성기 기능

놀랍게도 많은 개발자가 알지 못하거나 사용하지 않는 자바스크립트의 가장 멋진 기능 중 하나는 생성기 기능입니다. 이 튜토리얼에서는 간단한 용어와 예제의 도움으로 생성기 함수를 설명하려고 합니다.

제너레이터 함수는 간단히 말해서 실행을 일시 중지하고 다시 시작할 수 있는 함수입니다!

다른 함수에서는 함수 실행을 제어할 수 없습니다. 이것은 실행 자체가 아닌 실행의 흐름을 제어하는 ​​조건문 및 루프와 다릅니다.

더 깊이 들어가기 전에 예를 살펴보겠습니다. 호출할 때마다 일련 번호를 반환하는 함수가 필요하다고 가정합니다. 이것은 우리가 일반적으로 하는 것입니다:

let id = 0;
function getId() {
  return id++;
}

console.log(getId()) // 0
console.log(getId()) // 1
console.log(getId()) // 2

보시다시피 실제로 이러한 함수를 작성하려면 외부 저장소를 사용하여 함수의 상태를 유지해야 합니다. 이 경우 전역 변수 id입니다. 분명히, 이제 우리는 전역 변수를 스스로 처리해야 하며 함수는 전역 변수를 완전히 제어할 수 없습니다.

이제 생성기 함수를 사용하여 이 작업을 수행하는 방법을 살펴보겠습니다.

function* generateId(id = 0) {
  while (true) {
    yield id++;
  }
}
const ids = generateId();
console.log(ids.next().value) // 0
console.log(ids.next().value) // 1
console.log(ids.next().value) // 2

좋아, 이건 미친 것 같아! 동의합니다. 이 구문을 처음 봤을 때 저도 처음에 그렇게 생각했습니다. 그러나 우리가 부수지 못할 것은 없습니다!
function*은 함수가 제너레이터 함수라는 뜻이지 나쁘지 않죠?
그런 다음 yield , return 키워드의 생성기 기반 버전으로 생각할 수 있습니다. 주요 차이점은 yield은 실행을 종료하는 return과 달리 기능 실행을 일시 중지한다는 것입니다.

나는 일시 중지라고 말했고 그것이 내가 정확히 의미한 바입니다. 우리의 이상한 함수에는 무한 루프가 있으며 여기에서 생성기 함수의 마법이 발생합니다. 생성기 함수가 yield 문을 사용하여 값을 반환할 때마다 반환된 iterator을 통한 다음 호출까지 실행이 일시 중지됩니다.

나는 iterator을 언급했지만, 구체적으로 생성기 함수는 자체적으로 generator인 iterator을 반환합니다. 이것이 생성기 객체의 next 메서드(이 예에서는 ids)를 사용하여 값에 액세스하는 이유입니다.

짧고 간단하게 유지합시다. 이 게시물이 마음에 들었고 generator functions , yield , generators에 대해 더 알고 싶다면 아래에 댓글을 남겨주세요. 기꺼이 그것에 대해 글을 쓰겠습니다.

또한 무료로 응용 프로그램을 호스팅하려면 https://www.utopiops.com을 확인하는 것을 잊지 마십시오. 우리는 공개 베타 단계에 있으며 가능한 모든 방법으로 사용자와 협력하고 싶습니다. 즐거운 코딩!