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 같은 비동기 로직 제어용 라이브러리에서 사용됩니다
반응형