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

Understanding Iterators & Iterables in JavaScript

Understanding Iterators & Iterables in JavaScript

Aaaf75447dba53a3de9a5c41d6c2e060?s=128

Jenn Creighton

May 17, 2019
Tweet

Transcript

  1. Understanding Iterators & Iterables in JavaScript

  2. Hi! I’m Jenn! Senior Frontend Engineer @gurlcode @ Rent the

    Runway
  3. ! @gurlcode

  4. ... Spread Operator @gurlcode

  5. [ ] @gurlcode

  6. [ 1, 2, 3 ] @gurlcode

  7. ...[ 1, 2, 3 ] @gurlcode

  8. ...[ 1, 2, 3 ] // 1, 2, 3 @gurlcode

  9. ..."abc" // "a", "b", "c" @gurlcode

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

    } …generator( ) // 1, 2, 3 @gurlcode
  11. @gurlcode

  12. Generators 101 @gurlcode

  13. function* count() { yield 1; yield; yield 3; } @gurlcode

  14. function* count() { yield 1; yield; yield 3; } var

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

    generator = count(); generator.next(); { value: 1, done: false } Generator {};
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. yield* @gurlcode

  24. function* outer() { yield 1; yield* inner(); yield 2; }

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

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

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

    function* inner() { yield “a”; yield “b”; } var generator = outer(); Generator {}; @gurlcode
  28. 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 }
  29. 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 }
  30. 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 }
  31. 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 }
  32. function* generator( ) { yield 1; yield 2; yield 3;

    } ...generator() // 1, 2, 3 @gurlcode
  33. Arrays Strings Maps Sets Generators @gurlcode

  34. Iterable a data structure that provides an interface for iteration

    @gurlcode
  35. Iterable Protocol

  36. Symbol.iterator @gurlcode

  37. Symbol( "key" ) @gurlcode

  38. Array.prototype[ Symbol.iterator ] @gurlcode

  39. String.prototype[ Symbol.iterator ] @gurlcode

  40. function* generator( ) { } generator[ Symbol.iterator ] @gurlcode

  41. Iterator any object which implements the Iterator protocol @gurlcode

  42. Iterator Protocol @gurlcode

  43. function fakeIterator( ) { return { next: function( ) {

    } }; } @gurlcode
  44. function fakeIterator( ) { return { next: function( ) {

    // return object // with a value // & a done key } }; } @gurlcode
  45. const iterator = fakeIterator( ); const { value, done }

    = iterator.next( ); @gurlcode
  46. const iterator = fakeIterator( ); const { value, done }

    = iterator.next( ); @gurlcode
  47. Let’s create our own! @gurlcode

  48. None
  49. Async Iterator @gurlcode

  50. Symbol.asyncIterator @gurlcode

  51. ... Spread Operator @gurlcode

  52. { } @gurlcode

  53. ...{ } @gurlcode

  54. Thank you! @gurlcode