javaScript

자바스크립트 제너레이터 함수 알아보기

와이다이어리 2025. 5. 17. 02:33
반응형

제너레이터란?

일반 함수와는 달리, 중간에 멈췄다가 다시 실행할 수 있는 함수입니다.

일반적인 함수는 호출되면 끝까지 실행되고 종료되지만,
제너레이터는 yield라는 키워드를 만나면 중간에 실행을 멈췄다가,
next() 메서드를 통해 다시 실행을 이어나갈 수 있는 함수입니다.

 

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

const gen = myGenerator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

 

 

  • function*은 제너레이터 함수 선언 방식입니다.
  • yield는 실행을 잠시 멈추는 지점을 의미합니다.
  • next()는 멈춘 지점부터 다음 yield까지 실행합니다.

제너레이터는 언제 쓰나?

 

1. 데이터를 나눠서 처리할 때

function* paginate(items, size) {
  for (let i = 0; i < items.length; i += size) {
    yield items.slice(i, i + size);
  }
}

const gen = paginate([1, 2, 3, 4, 5], 2);
console.log(gen.next().value); // [1, 2]
console.log(gen.next().value); // [3, 4]
console.log(gen.next().value); // [5]

 

 

2. 무한 반복이 필요할 때

function* infiniteCounter() {
  let i = 1;
  while (true) {
    yield i++;
  }
}

const counter = infiniteCounter();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2 ...

 

3. 커스텀 이터러블(반복이 가능한)객체 만들기

const myIterable = {
  *[Symbol.iterator]() {
    yield '🍎';
    yield '🍌';
    yield '🍓';
  },
};

for (const fruit of myIterable) {
  console.log(fruit); // 🍎, 🍌, 🍓
}

 

4. 비동기 흐름 제어 (예: Redux-Saga)

function* loginSaga() {
  const user = yield call(apiLogin);  
  yield put({ type: "LOGIN_SUCCESS", user });
}

 

 

*실무 리액트/넥스트에서는 제너레이터 거의 안 쓰지만 대신 redux-saga 같은 비동기 로직 제어용 라이브러리에서 사용됩니다

 

 

 

반응형