[JS] 제네레이터

2023. 9. 20. 11:42JS

JavaScript에서의 제네레이터는 ECMAScript 6 (ES6)에서 도입된 기능으로, 이터러블(iterable) 프로토콜을 구현하는 함수입니다. JavaScript의 제네레이터 함수는 function* 키워드로 정의되며, yield 키워드를 사용하여 값을 반환하고 함수 실행을 일시 중지할 수 있습니다.

주요 특징

  1. 일시 중지와 재시작: 제네레이터는 실행 중인 상태를 저장하고 나중에 그 상태를 복원하여 계속 실행할 수 있습니다.
  2. yield 키워드: 제네레이터 함수 내에서 yield를 사용하여 값을 반환하고 실행을 일시 중지합니다.
  3. 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의 제네레이터는 함수의 실행 흐름을 중간에 일시 중지하고 다시 시작할 수 있어, 비동기 프로그래밍, 코루틴 등 다양한 고급 프로그래밍 패턴에 활용될 수 있습니다.

활용 사례

  1. 대용량 파일 처리: 대용량 로그 파일과 같은 큰 파일을 한 번에 읽기 대신, 한 번에 한 줄씩 읽을 때 제네레이터를 사용할 수 있습니다.
  2. 무한 시퀀스: 특정 패턴으로 무한히 반복되는 시퀀스를 생성할 때 제네레이터를 사용할 수 있습니다. (예: 숫자의 무한 시퀀스)
  3. 파이프라인: 데이터 처리 단계를 연결할 때, 각 단계를 제네레이터로 구현하여 연결할 수 있습니다.

'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