이런저런 IT 이야기
article thumbnail
반응형

JavaScript에서 제너레이터 함수(Generator Function)는 이터레이터(Iterator)를 생성하는 특별한 종류의 함수입니다. 제너레이터 함수는 함수 실행을 일시 중지하고 나중에 다시 재개할 수 있는 여러 개의 값을 반환할 수 있습니다. 이를 통해 제너레이터 함수는 지연 평가(lazy evaluation)와 비동기 코드 작성을 쉽게 만들어줍니다.

제너레이터 함수는 function* 키워드를 사용하여 정의됩니다. 내부적으로 yield 키워드를 사용하여 값을 반환하고 함수 실행을 일시 중지합니다. 제너레이터 함수에서는 yield 문이 실행될 때마다 제너레이터 객체의 상태가 기록되고, next() 메서드를 호출함으로써 함수의 실행을 재개합니다.

아래는 제너레이터 함수를 사용하여 숫자를 반환하는 예제입니다:

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = numberGenerator();

console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

제너레이터 함수는 순회 가능한(iterable) 객체를 생성하는데 사용될 수 있습니다. 이터레이터 프로토콜(Iterator Protocol)을 따르는 제너레이터 객체는 Symbol.iterator 메서드를 가지고 있으며, next() 메서드를 사용하여 값을 반환하고 함수 실행을 재개합니다.

제너레이터 함수는 특히 비동기 코드 작성을 간편하게 만드는 데 사용됩니다. yield 키워드를 사용하여 비동기 작업의 중간 결과를 반환하고, next() 메서드를 호출함으로써 작업을 재개할 수 있습니다. 이를 통해 비동기 코드를 동기적인 스타일로 작성할 수 있으며, 콜백 지옥(callback hell)과 프로미스 체인(promise chaining)을 피할 수 있습니다.

function* asyncTask() {
  const result1 = yield asyncOperation1(); // Promise를 이용한 함수
  const result2 = yield asyncOperation2(result1); // Promise를 이용한 함수
  return result2;
}

const generator = asyncTask();
generator.next().value.then(result1 => {
  generator.next(result1).value.then(result2 => {
    const finalResult = generator.next(result2).value;
    console.log(finalResult);
  });
});

위의 코드는 비동기 작업을 연속적으로 실행하면서 작업의 결과를 전달하는 방식으로 동작합니다. yield 키워드를 통해 비동기 작업의 진행을 일시 중지하고, next() 메서드를 통해 다음 단계로 진행합니다. 이를 통해 비동기 코드를 동기적인 스타일로 작성할 수 있고, 콜백 지옥(callback hell)을 피할 수 있습니다.

function* fibonacci() {
  let current = 0;
  let next = 1;

  while (true) {
    yield current;
    [current, next] = [next, current + next];
  }
}

const generator = fibonacci();

console.log(generator.next().value); // 0
console.log(generator.next().value); // 1
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
console.log(generator.next().value); // 5
// 계속해서 다음 값을 생성합니다...

위의 제너레이터 함수는 무한한 피보나치 수열을 생성합니다. yield 문을 통해 현재 값을 반환하고, while 루프를 통해 다음 값을 계산하며 반복적으로 호출됩니다. 제너레이터 객체를 생성한 후에는 next() 메서드를 호출하여 다음 값을 가져올 수 있습니다.

제너레이터 함수를 사용하면 복잡한 비동기 코드를 간결하고 가독성 있는 방식으로 작성할 수 있습니다.

반응형

'Javascript' 카테고리의 다른 글

JavaScript의 Math의 모든 함수들  (0) 2023.05.26
JavaScript의 배열(Array)의 모든 함수들  (0) 2023.05.25
JavaScript 메모리 관리 Heap(힙)과 Stack(스택)  (0) 2023.05.25
Module 패턴  (0) 2023.05.25
Observer 패턴  (0) 2023.05.25
profile

이런저런 IT 이야기

@이런저런 IT 이야기

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

profile on loading

Loading...

검색 태그