Javascript Iterable

Iterable

const str = 'hello';
str[Symbol.iterator]; // [Function]

• String

• Array

• TypedArray

• Map

• Set

Iterable의 사용

• for...of 루프

• spread 연산자 (...)

• 분해대입(destructuring assignment)

• 기타 iterable을 인수로 받는 함수

// `for...of`
for (let c of 'hello') {
  console.log(c);
}

// spread 연산자
const characters = [...'hello'];

// 분해대입
const [c1, c2] = 'hello';

// `Array.from`은 iterable 혹은 array-like 객체를 인수로 받습니다.
Array.from('hello');

Generator 함수

// 함수 선언
function* gen1() {}
// 함수 표현식
const gen2 = function* () {}
// 메서드 문법
const obj = {
	* gen3() {}
}

function* gen1() {}
const iterable = gen1()
iterable[Symbol.iterator] // [Function]

function* numberGen() {
  yield 1;
  yield 2;
  yield 3;
}

// 1, 2, 3이 순서대로 출력됩니다.
for (let n of numberGen()) {
  console.log(n);
}

function* numberGen() {
  yield 1;
  yield 2;
  yield 3;
}

function* numberGen2() {
  yield* numberGen();
  yield* numberGen();
}

// 1, 2, 3, 1, 2, 3이 순서대로 출력됩니다.
for (let n of numberGen2()) {
  console.log(n);
}

• Generator 함수로부터 생성된 iterable은 한 번만 사용될 수 있습니다.

• Generator 함수 내부에서 정의된 일반 함수에서는 yield 키워드를 사용할 수 없습니다.

// Generator 함수로부터 생성된 iterable은 한 번만 사용될 수 있습니다.
function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

const iter = gen();

for (let n of iter) {
  // 잘 출력됩니다.
  console.log(n);
}
for (let n of iter) {
  // `iter`는 한 번 사용되었으므로, 이 코드는 실행되지 않습니다.
  console.log(n);
}

// Generator 함수 내부에서 정의된 일반 함수에서는 `yield` 키워드를 사용할 수 없습니다.
function* gen2() {
  // 아예 문법 오류가 납니다. (Unexpected token)
  function fakeGen() {
    yield 1;
    yield 2;
    yield 3;
  }
  fakeGen();
}

Iterator Protocol

• iterator는 next라는 메서드를 갖습니다.

• next 메서드는 다음 두 속성을 갖는 객체를 반환해야 합니다.

const strIterator = 'go'[Symbol.iterator]();
strIterator.next(); // { value: 'g', done: false }
strIterator.next(); // { value: 'o', done: false }
strIterator.next(); // { value: undefined, done: true }
strIterator.next(); // { value: undefined, done: true }

function* gen() {
	yield 1;
	yield 2;
}

const genIterator = gen()[Symbol.iterator]();
genIterator.next(); // { value: 1, done: false }
genIterator.next(); // { value: 2, done: false }
genIterator.next(); // { value: undefined, done: true }
genIterator.next(); // { value: undefined, done: true }

function range(start = 0, end = Infinity, step = 1) {
	return {
		currentValue: start,
		[Symbol.iterator]() {
			return {
				next: () => {
					if (this.currentValue < end) {
						const value = this.currentValue;
						this.currentValue += step;
						return {
							done: false,
							value
						}
					} else {
						return { done: true }
					}
				}
			}
		}
	}
}

Generator와 Iterator

function* gen() {
	// ...
}

const genObj = gen();
genObj[Symbol.iterator]().next === genObj.next; // true

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

const iter = gen();

iter.next(); // { value: 1, done: false }
iter.next(); // { value: 2, done: false }
iter.next(); // { value: 3, done: false }
iter.next(); // { value: undefined, done: true }

function* gen() {
  yield 1;
  return 2; // generator 함수는 여기서 종료됩니다.
  yield 3;
}

const iter = gen();

iter.next(); // { value: 1, done: false }
iter.next(); // { value: 2, done: true }
iter.next(); // { value: undefined, done: true }

// `1`만 출력됩니다.
for (let v of gen()) {
  console.log(v);
}

function* gen() {
  const received = yield 1;
  console.log(received);
}

const iter = gen();
iter.next(); // { value: 1, done: false }

// 'hello'가 출력됩니다.
iter.next('hello'); // { value: undefined, done: true }

Generator Examples

// 각 항목을 변환한 후 넘겨주기
function* map(iterable, mapper) {
  for (let item of iterable) {
    yield mapper(item);
  }
}

// 각 순서까지의 누적값을 넘겨주기
function* reduce(iterable, reducer, initial) {
  let acc = initial;
  for (let item of iterable) {
    acc = reducer(acc, item);
    yield acc;
  }
}

// 조건에 만족하는 항목만 넘겨주기
function* filter(iterable, predicate) {
  for (let item of iterable) {
    if (predicate(item)) {
      yield item;
    }
  }
}

// 여러 iterable을 연결하기
function* concat(iterables) {
  for (let iterable of iterables) {
    yield* iterable;
  }
}

// 앞쪽 몇 개의 항목만 넘겨주기
function* take(iterable, count = Infinity) {
  const iterator = iterable[Symbol.iterator]();
  for (let i = 0; i < count; i++) {
    // `yield*`와는 다르게, iterator의 `next` 메소드를 이용하면 iterable의 일부만 가져올 수 있습니다.
    const {value, done} = iterator.next();
    if (done) break;
    yield value;
  }
}