[JavaScript] New Javascript 17장 - 이터널레이터와 제너레이터

✅ 1. 이터널레이터 (Iterator)

 

이터러블(Iterable)의 객체(array, Map, Set 등)의 요소를 한 번에 하나씩 순차적으로 접근하는 인터페이스를 이터러블(Iterable)이라고 합니다, next() 메서드를 가지며, 이 메서드는 { value: 값, done: boolean } 형태의 객체를 반환합니다. done이 true가되면 반복이 종료되었음을 의미합니다.

const arr = [1, 2, 3, 4];
// 배열의 iterator 객체를 생성
const iter = arr[Symbol.iterator]();

// iterator 객체를 사용해서 배열의 각 원소를 반복하여 출력
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: 4, done: false }
console.log(iter.next()); // { value: undefined, done: true }

---

✅ 2. 제너레이터 (Generator, function*) 개념 및 예시

function* 키워드로 정의하는 제너레이터는 일반 함수와는 달리 호출 시 코드를 실행하지 않으며 제너레이터 객체(iterator 이자 iterable)를 반환합니다, 함수 실행을 중간에 일시 중지(yield) 했다가 필요할 때 다시 재생할 수 있으며 상태를 주고받을 수 있어 비동기 처리나 무한 시퀀스 생성에 효율적입니다.

function* randomGenerator() {
  yield Math.random();
  yield Math.random();
  return Math.random();
}

const gen = randomGenerator(); // 생성된 generator 객체

// generator 객체를 사용해서 반복하여 출력 = 출력할 때 마다 yield 키워드로 멈춰있던 부분에서 다시 시작
// done 부분은 generator 함수의 실행이 끝났는지를 나타냄
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

---

✅ 3. yield 키워드 개념 및 예시

yield 키워드는 제너레이터 함수 내부에서만 사용이 가능하고 함수의 실행을 일시 정지시키는 역할을 담당합니다, yield 키워드 뒤에 오는 표현식의 값을 제너레이터 호출자(next() 호출한 곳)에 반환하며 return과는 달리 함수를 완전히 종료하지 않고 잠시 멈추는 역할을 합니다.

function* viewGenerator() {
  console.log("이전화");
  yield 1;
  console.log("재생/일시정지");
  yield 2;
  console.log("다음화");
}

const view = viewGenerator();

view.next(); // "이전화" 출력, yield 1에서 멈춤
view.next(); // "재생/일시정지" 출력, yield 2에서 멈춤
view.next(); // "다음화" 출력, 제너레이터 종료

---

✅ 4. 제너레이터와 yield 활용하기 (for..of)

제너레이터 객체는 이터러블(iterable)이므로 for...of문을 사용해 next()를 일일히 호출하지 않고도 간편하게 값을 출력할 수 있습니다.

function* viewGenerator() {
  yield "이전화";
  yield "재생/일시정지";
  yield "다음화";
}

for (let view of viewGenerator()) {
  console.log(view); // "이전화", "재생/일시정지", "다음화" 순서대로 출력
}

---

✅ 5. 정리 

개념	정의	특징
iterator	next()로 요소를 순화하는 객체	next()로 {value, done} 반환
Generator	iterator 생성 및 함수 제어	function*으로 선언과 일시 정지 가능
yield	제너레이터 내 실행 중단/값 반환	잠시 멈추고 재개 가능, 지연 평가

---

 

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript