[Javascript] 이터레이터, 제너레이터

이터레이션 프로토콜

일종의 약속인데 이 약속을 잘 지키는 데이터 컬렉션(객체, 배열 ...)은 for...of문으로 순회할 수 있고 spread문법을 적용할 수도 있다.
종류로 이터러블 프로토콜과 이터레이터 프로토콜이 있다.

이터레이션 프로토콜

• 이터러블 프로토콜

이터러블 프로토콜을 준수한 객체를 이터러블이라고 한며 이러한 이터러블은 Symbol.iterator 메소드(이터레이터를 반환)를 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다. 이러한 이터러블은 for...of문과 spread 연산자의 대상으로 사용 가능하다.

 - 배열은 Symbol.iterator 메소드를 소유하고 있고 일반 객체는 소유하고 있지 않다. 하지만 객체도 이터러블 프로토콜을 준수한다면 이터러블이 되며 이러한 방법으로 커스텀 이터러블이 있다.

 

• 이터레이터 프로토콜

next 메소드를 소유하며 메소드 호출 시 이터러블을 순회하며 value, done 프로퍼티를 갖는 객체를 반환하며 이 프로토콜을 준수한 객체가 이터레이터이다.

- 앞서 설명한 이터러블 프로토콜을 준수한 이터러블에서 Symbol.iterator 메소드를 호출하면  이터레이터를 반환하고 이 이터레이터는 next 메서드를 소유한다.

 

// 배열은 이터러블 프로토콜을 준수한 이터러블이다.
const array = [1, 2, 3];

// Symbol.iterator 메소드는 이터레이터를 반환한다.
const iterator = array[Symbol.iterator]();

// 이터레이터 프로토콜을 준수한 이터레이터는 next 메소드를 갖는다.
console.log('next' in iterator); // true

// 이터레이터의 next 메소드를 호출하면 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다.
let iteratorResult = iterator.next();
console.log(iteratorResult); // {value: 1, done: false}

 

이터러블과 이터레이터는 다른 개념임

예시) 이터레이터는 이터러블한 배열에 의해서 생성될 수 있어며 배열의 Symbol.iterator 사용해서 반환되는 것이 이터레이터이기에 이터러블한 객체라고 바로 next() 메서드를 슬 수 있는 것이 아니다

 

이터레이터 리절트

이터레이터의 next 메서드가 반환하는 객체이며 제너레이터와 동일하게 value와 done 두개의 프로퍼티를 가진 객체이다.

 

제너레이터

일반 함수는 하나의 값 혹은 0개의 값을 반환한다 하지만 우리는 필요에 따라 여러개의 값을  하나씩 반환하고 싶을 때가 있고 이때 제너레이터가 사용된다.

 

제너레이터 함수)

제너레이터를 만들기위한 특별한 문법 구조 (function*)

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();
alert(generator); // [object Generator]

위와 같이 제너레이터 함수는 일반 함수와는 반환하는 값이 다르다.

 어떻게 하면 원하는대로 하나씩 반환받을 수 있을까?

 

next()는 제너레이터의 주요 메서드로 호출 시 가장 가까운 yield를 만날때까지 실행이 지속되고 yeild를 만나면 실행이 멈추고 산출하고자 하는 값인 value가 반환된다.

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

let one = generator.next();

alert(JSON.stringify(one)); // {value: 1, done: false}
// next()는 항상 value, done을 가진 객체를 반환한다

 

return문까지도 지나게되면 함수가 종료되는데 이후에는 호출을 하더라도 아무 소용 없다.

 

이러한 next() 메서드를 가지고 있는 제너레이터는 이터러블이기에 for...or와 spread를 사용할 수 있다

 

 

 

 

 

 

 

 

 

레퍼런스

https://poiemaweb.com/es6-iteration-for-of