#22 JavaScript Code Snippets: Iterators & Advanced Iteration

const it =
 [1,2,3]
 .values();

console.log(
 it.next().value
);

The first next() returns the first element.

const it =
 [10]
 .values();

console.log(
 it.next().done
);

The iterator still has a value to provide.

const it =
 [10]
 .values();

it.next();

console.log(
 it.next().done
);

The iterator is exhausted after consuming its only value.

const it =
 [1,2]
 .values();

console.log(
 it.next().value +
 it.next().value
);

The first two values are 1 and 2.

const it =
 "JS"
 [Symbol.iterator]();

console.log(
 it.next().value
);

Strings are iterable character by character.

const it =
 new Set(
  [5,6]
 ).values();

console.log(
 it.next().value
);

Set iterators return values in insertion order.

const it =
 new Map([
  ["a",1]
 ]).entries();

console.log(
 it.next().value[0]
);

Map entries return [key,value] arrays.

const it =
 new Map([
  ["a",1]
 ]).entries();

console.log(
 it.next().value[1]
);

Index 1 contains the value.

const it =
 new Map([
  ["x",10]
 ]).keys();

console.log(
 it.next().value
);

keys() iterates over map keys.

const it =
 new Map([
  ["x",10]
 ]).values();

console.log(
 it.next().value
);

values() iterates over map values.

const it =
 [1]
 [Symbol.iterator]();

console.log(
 typeof it.next
);

Iterators implement a next() method.

const it =
 [7]
 [Symbol.iterator]();

const result =
 it.next();

console.log(
 result.value
);

next() returns an object containing value and done.

const it =
 [1]
 [Symbol.iterator]();

it.next();

console.log(
 it.next().value
);

No value remains after exhaustion.

let sum = 0;

for (
 const n
 of [1,2,3]
) {
 sum += n;
}

console.log(sum);

for...of uses the iterator protocol internally.

const it =
 [1]
 [Symbol.iterator]();

console.log(
 it.next()
   .done
);

The first iteration is not yet complete.

const obj = {
 [Symbol.iterator]() {
  return {
   next() {
    return {
     value: 1,
     done: false
    };
   }
  };
 }
};

console.log(
 typeof obj[
  Symbol.iterator
 ]
);

An iterable must expose Symbol.iterator as a function.

const obj = {
 [Symbol.iterator]() {
  return {
   next() {
    return {
     value: 10,
     done: false
    };
   }
  };
 }
};

const it =
 obj[
  Symbol.iterator
 ]();

console.log(
 it.next().value
);

Custom iterators control returned values.

const obj = {
 [Symbol.iterator]() {
  let n = 1;

  return {
   next() {
    return {
     value: n++,
     done: false
    };
   }
  };
 }
};

const it =
 obj[
  Symbol.iterator
 ]();

console.log(
 it.next().value +
 it.next().value
);

Values generated are 1 and 2.

const obj = {
 [Symbol.iterator]() {
  let done = false;

  return {
   next() {
    if (!done) {
     done = true;

     return {
      value: 1,
      done: false
     };
    }

    return {
     done: true
    };
   }
  };
 }
};

const it =
 obj[
  Symbol.iterator
 ]();

it.next();

console.log(
 it.next().done
);

The iterator becomes exhausted.

const obj = {
 [Symbol.iterator]() {
  let n = 1;

  return {
   next() {
    return {
     value: n++,
     done: false
    };
   }
  };
 }
};

const it =
 obj[
  Symbol.iterator
 ]();

console.log(
 it.next().value
);

The first generated value is 1.

const range = {
 start: 1,
 end: 3,

 [Symbol.iterator]() {
  let current =
   this.start;

  return {
   next: () => ({
    value:
      current,
    done:
      current++ >
      this.end
   })
  };
 }
};

console.log(
 [...range]
  .length
);

Spread collects values until done becomes true. (This implementation includes one extra terminal value.)

const obj = {
 *[Symbol.iterator]() {
  yield 1;
  yield 2;
 }
};

let sum = 0;

for (
 const n
 of obj
) {
 sum += n;
}

console.log(sum);

The object becomes iterable through a generator.

const obj = {
 [Symbol.iterator]() {
  let n = 0;

  return {
   next() {
    return {
     value: ++n,
     done: n > 2
    };
   }
  };
 }
};

const it =
 obj[
  Symbol.iterator
 ]();

console.log(
 it.next().value
);

Iterator state starts from 0.

const arr =
 [1,2];

const a =
 arr[
  Symbol.iterator
 ]();

const b =
 arr[
  Symbol.iterator
 ]();

console.log(
 a === b
);

Each iterator is a separate object.

const arr =
 [1];

const a =
 arr[
  Symbol.iterator
 ]();

const b =
 arr[
  Symbol.iterator
 ]();

console.log(
 a.next().value +
 b.next().value
);

Each iterator maintains independent state.

const obj = {
 *[Symbol.iterator]() {
  yield 10;
  yield 20;
 }
};

const [
 a,
 b
] = obj;

console.log(
 a + b
);

Destructuring consumes iterable values.

const obj = {
 *[Symbol.iterator]() {
  yield 1;
  yield 2;
 }
};

console.log(
 [...obj]
  .length
);

Spread converts iterable values into an array.

const obj = {
 *[Symbol.iterator]() {
  yield "A";
  yield "B";
 }
};

console.log(
 Array.from(obj)
  .length
);

Array.from consumes iterable values.

const it =
 [1,2]
 [Symbol.iterator]();

it.next();

console.log(
 [...it]
  .length
);

The first value was already consumed.

const it =
 [1,2]
 [Symbol.iterator]();

console.log(
 [...it]
  .length
);

console.log(
 [...it]
  .length
);

An iterator can be consumed only once.

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

const it = gen();

console.log(
 it.next().value
);

Generators automatically create iterators.

function* gen() {
 yield 10;
 yield 20;
}

const it = gen();

console.log(
 it.next().value +
 it.next().value
);

Generator values are yielded sequentially.

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

let sum = 0;

for (const n of gen()) {
 sum += n;
}

console.log(sum);

Generators are iterable.

function* gen() {
 yield 1;
}

const it = gen();

it.next();

console.log(
 it.next().done
);

The generator is exhausted.

function* gen() {
 yield 1;
 return 100;
}

const it = gen();

it.next();

console.log(
 it.next().value
);

Return provides the final iterator value.

function* outer() {
 yield* [1,2];
}

console.log(
 [...outer()]
  .length
);

yield* delegates iteration.

const iterable = {
 *[Symbol.iterator]() {
  yield "A";
 }
};

console.log(
 typeof iterable[
  Symbol.iterator
 ]
);

Iterables expose Symbol.iterator.

const arr = [1];

console.log(
 typeof arr[
  Symbol.iterator
 ]
);

Arrays are iterable because they implement Symbol.iterator.

const arr = [1];

const it =
 arr[
  Symbol.iterator
 ]();

console.log(
 typeof it.next
);

Iterators implement next().

const it =
 [1,2]
 [Symbol.iterator]();

for (const x of it) {
 console.log(x);
}

for (const x of it) {
 console.log(x);
}

The iterator is exhausted after the first loop.

const iterable = {
 *[Symbol.iterator]() {
  yield 5;
  yield 10;
 }
};

console.log(
 Math.max(
  ...iterable
 )
);

Spread consumes iterable values.

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

console.log(
 Array.from(
  gen()
 ).length
);

Array.from consumes iterables.

function* gen() {
 yield* [1,2];
 yield* [3,4];
}

console.log(
 [...gen()]
  .length
);

yield* delegates to multiple iterables.

function* gen() {
 yield "JS";
}

console.log(
 [...gen()][0]
);

Spread collects yielded values.

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

const it = gen();

console.log(
 [...it].length
);

console.log(
 [...it].length
);

Generator iterators are consumable only once.