[LearningJS] 이터레이터와 제너레이터

1. 이터레이터 (Iterator)

• ‘지금 어디 있는지’ 파악할 수 있도록 돕는다는 면에서 일종의 책갈피와 비슷한 개념

  • ex) 배열

• 생성 : 배열에 values 메서드를 사용한다.

  • ex) const it = book.values();

• 사용(읽기) : 이터레이터에 next 메서드를 사용한다.

  • ex) it.next();
  • values, done 프로퍼티를 가진 객체를 return 한다.
  • values 프로퍼티는 지금 보이는 페이지의 내용 (더 읽을게 없을 경우 undefined)
  • done 프로퍼티는 다 읽었는지를 표시하는 인덱스 (다 읽었을 경우 true)

• 이터레이터를 읽는 중간에 다른 일을 할 수 있다.

• 배열의 요소를 나열하고 싶다면 for 루프나 for…of 루프를 쓸 수 있다. (while도 가능)

• 이터레이터는 모두 독립적이다. 새 이터레이터를 만들 때마다 처음부터 시작한다. 각각 다른 요소를 가리키는 이터레이터 여러 개를 동시에 사용할 수 있다.

  1-1. 이터레이션 프로토콜 (Iteration Protocol)

  • 모든 객체를 이터러블(iterable) 객체로 바꿀 수 있다.
  • 이터레이션 프로토콜은 클래스에 심볼 메서드(Symbol.iterator)가 있고 이 메서드가 이터레이터처럼 동작하는 객체, 즉 value와 done 프로퍼티가 있는 객체를 반환하는 next 메서드를 가진 객체를 반환한다면 그 클래스의 인스턴스는 이터러블 객체이다.

2. 제너레이터 (Generator)

• 이터레이터를 사용해 자신의 실행을 제어하는 함수

  • 함수의 실행을 개별적 단계로 나눔으로써 함수의 실행을 제어한다.
  • 실행 중인 함수와 통신한다. (양방향 통신)
  • 제너레이터는 언제든 호출자에게 제어권을 넘길 수 있다. (yield)
  • 제너레이터는 호출한 즉시 실행되지 않는다. 대신 이터레이터를 반환하고, 이터레이터의 next 메서드를 호출함에 따라 실행된다.

• 생성

  function* rainbow() {
        
  }
  

• 사용

  const it = rainbow();
  it.next();
  

• 제너레이터를 호출하면 이터레이터를 얻는다. 함수를 호출한 다음 이터레이터를 써서 단계별로 진행한다.

• 제너레이터는 이터레이터를 반환하므로 for...of 루프를 쓸 수 있다.

• 제너레이터를 통한 양방향 통신은 yield 표현식을 통해 이루어진다.

  • yield 표현식이 들어있는 제너레이터는 반드시 제어권을 호출자에게 넘겨야 한다.
  • yield 문은 제너레이터를 끝내지 않는다. (done: false 고정)
  • return 문을 활용하면 위치와 관계없이 done: true가 되면서 value property는 return 문에서 반환하는 값이 된다.
  • return 문에서 나온 value property는 for...of 루프에서 출력하지 않는다.

• 제너레이터가 반환하는 값을 사용하려 할 때는 yield를 쓰고, return은 제너레이터를 중간에 종료하는 목적으러만 사용하는 것이 좋다. (return 문에는 반환값을 쓰지 말자!)