Understanding Iterators & Iterables in JavaScript

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
49. Async Iterator @gurlcode
50. Symbol.asyncIterator @gurlcode
51. ... Spread Operator @gurlcode
52. { } @gurlcode
53. ...{ } @gurlcode
54. Thank you! @gurlcode