Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding Iterators & Iterables in JavaScript

Understanding Iterators & Iterables in JavaScript

Jenn Creighton

May 17, 2019
Tweet

More Decks by Jenn Creighton

Other Decks in Programming

Transcript

  1. function* generator( ) { yield 1; yield 2; yield 3;

    } …generator( ) // 1, 2, 3 @gurlcode
  2. function* count() { yield 1; yield; yield 3; } var

    generator = count(); Generator {}; @gurlcode
  3. function* count() { yield 1; yield; yield 3; } var

    generator = count(); generator.next(); { value: 1, done: false } Generator {};
  4. function* count() { yield 1; yield; yield 3; } var

    generator = count(); generator.next(); generator.next(); generator.next(); generator.next(); { value: 1, done: false } { value: undefined, done: false } { value: 3, done: false } { value: undefined, done: true } Generator {}; @gurlcode
  5. function* count() { yield 1; yield; yield 3; } var

    generator = count(); generator.next(); generator.next(); generator.next(); generator.next(); { value: 1, done: false } { value: undefined, done: false } { value: 3, done: false } { value: undefined, done: true } Generator {}; @gurlcode
  6. function* count() { yield 1; yield; yield 3; } var

    generator = count(); generator.next(); generator.next(); generator.next(); generator.next(); { value: 1, done: false } { value: undefined, done: false } { value: 3, done: false } { value: undefined, done: true } Generator {}; @gurlcode
  7. function* add() { const num = yield; yield 2 +

    num; yield 4 + num; } var generator = add(); generator.next(); generator.next(2); generator.next(); generator.next(); { value: undefined, done: false } { value: 4, done: false } { value: 6, done: false } { value: undefined, done: true } Generator {}; @gurlcode
  8. function* add() { const num = yield; yield 2 +

    num; yield 4 + num; } var generator = add(); generator.next(); generator.next(2); generator.next(); generator.next(); { value: undefined, done: false } { value: 4, done: false } { value: 6, done: false } { value: undefined, done: true } Generator {}; @gurlcode
  9. function* add() { const num = yield; yield 2 +

    num; yield 4 + num; } var generator = add(); generator.next(); generator.next(2); generator.next(); generator.next(); { value: undefined, done: false } { value: 4, done: false } { value: 6, done: false } { value: undefined, done: true } Generator {}; @gurlcode
  10. function* add() { const num = yield; yield 2 +

    num; yield 4 + num; } var generator = add(); generator.next(); generator.next(2); generator.next(); generator.next(); { value: undefined, done: false } { value: 4, done: false } { value: 6, done: false } { value: undefined, done: true } Generator {}; @gurlcode
  11. function* outer() { yield 1; yield* inner(); yield 2; }

    function* inner() { yield “a”; yield “b”; } var generator = outer(); Generator {}; @gurlcode
  12. function* outer() { yield 1; yield* inner(); yield 2; }

    function* inner() { yield “a”; yield “b”; } var generator = outer(); Generator {}; @gurlcode
  13. function* outer() { yield 1; yield* inner(); yield 2; }

    function* inner() { yield “a”; yield “b”; } var generator = outer(); Generator {}; @gurlcode
  14. function* outer() { yield 1; yield* inner(); yield 2; }

    function* inner() { yield “a”; yield “b”; } var generator = outer(); Generator {}; @gurlcode
  15. function* outer() { yield 1; yield* inner(); yield 2; }

    function* inner() { yield “a”; yield “b”; } generator.next(); generator.next(); generator.next(); generator.next(); generator.next(); { value: 1, done: false } { value: “a”, done: false } { value: “b”, done: false } { value: 2, done: false } { value: undefined, done: true }
  16. function* outer() { yield 1; yield* inner(); yield 2; }

    function* inner() { yield “a”; yield “b”; } generator.next(); generator.next(); generator.next(); generator.next(); generator.next(); { value: 1, done: false } { value: “a”, done: false } { value: “b”, done: false } { value: 2, done: false } { value: undefined, done: true }
  17. function* outer() { yield 1; yield* inner(); yield 2; }

    function* inner() { yield “a”; yield “b”; } generator.next(); generator.next(); generator.next(); generator.next(); generator.next(); { value: 1, done: false } { value: “a”, done: false } { value: “b”, done: false } { value: 2, done: false } { value: undefined, done: true }
  18. function* outer() { yield 1; yield* inner(); yield 2; }

    function* inner() { yield “a”; yield “b”; } generator.next(); generator.next(); generator.next(); generator.next(); generator.next(); { value: 1, done: false } { value: “a”, done: false } { value: “b”, done: false } { value: 2, done: false } { value: undefined, done: true }
  19. function* generator( ) { yield 1; yield 2; yield 3;

    } ...generator() // 1, 2, 3 @gurlcode
  20. function fakeIterator( ) { return { next: function( ) {

    // return object // with a value // & a done key } }; } @gurlcode