[JS] 제네레이터
2023. 9. 20. 11:42ㆍJS
JavaScript에서의 제네레이터는 ECMAScript 6 (ES6)에서 도입된 기능으로, 이터러블(iterable) 프로토콜을 구현하는 함수입니다. JavaScript의 제네레이터 함수는 function* 키워드로 정의되며, yield 키워드를 사용하여 값을 반환하고 함수 실행을 일시 중지할 수 있습니다.
주요 특징
- 일시 중지와 재시작: 제네레이터는 실행 중인 상태를 저장하고 나중에 그 상태를 복원하여 계속 실행할 수 있습니다.
- yield 키워드: 제네레이터 함수 내에서 yield를 사용하여 값을 반환하고 실행을 일시 중지합니다.
- iterator 객체: 제네레이터 함수를 호출하면 이터레이터 객체가 반환되며, 이 객체의 next() 메서드를 사용하여 함수를 계속 실행하고 다음 yield 값까지 가져올 수 있습니다.
function* numberGenerator() {
yield 1;
yield 2;
yield 3;
}
const gen = numberGenerator();
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 }
gen.next()를 호출할 때마다 제네레이터 함수가 yield로 정의된 위치까지 실행되고, 그 위치의 값을 반환합니다. 모든 yield를 지나면 done 프로퍼티는 true 값을 가집니다.
yield와 값 전달하기
제네레이터의 next() 메서드는 값을 받아 제네레이터 함수로 전달할 수 있습니다. 이를 통해 외부와 제네레이터 간의 양방향 통신이 가능합니다.
function* generatorFunction() {
const first = yield 'First yield';
const second = yield first + ' Second yield';
yield second + ' Third yield';
}
const gen = generatorFunction();
console.log(gen.next()); // { value: 'First yield', done: false }
console.log(gen.next('Hello')); // { value: 'Hello Second yield', done: false }
console.log(gen.next('World')); // { value: 'World Third yield', done: false }
이 예제에서 첫 번째 next() 호출 후, 두 번째 next('Hello') 호출에서 'Hello'는 first 변수에 할당됩니다.
이처럼 JavaScript의 제네레이터는 함수의 실행 흐름을 중간에 일시 중지하고 다시 시작할 수 있어, 비동기 프로그래밍, 코루틴 등 다양한 고급 프로그래밍 패턴에 활용될 수 있습니다.
활용 사례
- 대용량 파일 처리: 대용량 로그 파일과 같은 큰 파일을 한 번에 읽기 대신, 한 번에 한 줄씩 읽을 때 제네레이터를 사용할 수 있습니다.
- 무한 시퀀스: 특정 패턴으로 무한히 반복되는 시퀀스를 생성할 때 제네레이터를 사용할 수 있습니다. (예: 숫자의 무한 시퀀스)
- 파이프라인: 데이터 처리 단계를 연결할 때, 각 단계를 제네레이터로 구현하여 연결할 수 있습니다.
'JS' 카테고리의 다른 글
[JS] 다양한 연산자 (0) | 2023.08.04 |
---|---|
[JS] 스프레드 연산자 (0) | 2023.08.03 |
[JS] `??` 와 `||` 연산자 (0) | 2023.07.24 |
[JS] 웹 모바일에서 App 실행 (0) | 2021.11.01 |
[JS] IE8 및 Safari 에서 new Date() 시 NaN 오류 이슈 (0) | 2021.11.01 |