Tomasz Ducin
independent consultant, architect, developer, trainer, speaker #architecture #performance #javascript #typescript #react #angular
JavaScript Iterators
The New Opening
Tomasz Ducin ย โข ย ducin.dev
say "YIELD"!
Hi, I'm Tomasz
Independent Consultant & Softwareย Architect
Trainer, Speaker, JS/TS Expert
ArchitekturaNaFroncie.pl (ANF)
Warsaw, PL
array.map(fn)
array.values().map(fn)
.values()
const items = ['a', 'b', 'c']
function *map(iterable, mapperFn){
for (item of iterable){
const newItem = mapperFn(item)
yield newItem
}
}
const uppercasedIterator =
map(items, str => str.toUpperCase())Iterators 101
// LAZY
const uppercased = map(items, str => str.toUpperCase())
uppercased.next() // {value: 'A', done: false}
uppercased.next() // {value: 'B', done: false}
uppercased.next() // {value: 'C', done: false}
uppercased.next() // {value: undefined, done: true}
// EAGER
const uppercased = map(items, str => str.toUpperCase())
[...uppercased] // ['A', 'B', 'C']Evaluation: LAZY vs EAGER
what's the issue with arrays? ๐คจ
arrays - snapshots
iterators - pull-based streams
iterators - pull-based streams
iter.next()
iter.next()
iter.next()
iterators - pull-based streams
DAD JOKE TIME
array.map(fn)
array.values().map(fn)
.values()
lazinessย is economical
browser vsย server
benchmarks ๐ฅธ
array opsย vs iterator ops
๐ test #1
๐ฆ small data set: array(50)
๐จ no operations
๐ ~400 ops (iter) vs ~400 ops (arr)
VERDICT: no clear winner, results are NON reproducible
๐ test #2
๐ฆ small data set: array(50)
๐จ 4 x map (trivial op)
๐ 330k ops (iter) vs ~4k ops (arr)
VERDICT: iteratorsย 99%ย timesย faster
๐ test #3
๐ฆ bigger data set: array(500)
๐จ 4 x map (trivial op)
๐ ~300k ops (iter) vs ~400 ops (arr)
VERDICT: iteratorsย 100%ย timesย faster
๐ test #4
๐ฆ super small data set: array(5)
๐จ 4 x map (trivial op)
๐ ~275k ops (iter) vs ~4k ops (arr)
VERDICT: iteratorsย 98%ย timesย faster
๐ SANITY CHECK: iterators only
๐ฆ bigger data set: array(500)
๐จ 1*map vs 2*map vs 4*map vs 8*map
๐ ~475k ops (1) vs ~350k ops (2) vs ~225k ops (4) vs ~150k ops (8)
๐ SANITY CHECK: iterators only
๐ฆ bigger data set: array(500)
๐จ 1*map vs 2*map vs 4*map vs 8*map
๐ ~475k ops (1) vs ~350k ops (2) vs ~225k ops (4) vs ~150k ops (8)
๐ SANITY CHECK: iterators only
๐ฆ bigger data set: array(500)
๐จ 1*map vs 2*map vs 4*map vs 8*map
๐ ~475k ops (1) vs ~350k ops (2) vs ~225k ops (4) vs ~150k ops (8)
๐ SANITY CHECK: iterators only
๐ฆ bigger data set: array(500)
๐จ 1*map vs 2*map vs 4*map vs 8*map
๐ ~475k ops (1) vs ~350k ops (2) vs ~225k ops (4) vs ~150k ops (8)
VERDICT: 1*map < 2*map < 4*map < 8*map
(less ops => faster, no sh__ Sherlock)
benchmarks ๐
my benchmark is more benchmarkish than your benchmark
what's the issue with iterators? ๐คจ
const items = ['a', 'b', 'c']
function *map(iterable, mapperFn){
for (item of iterable){
const newItem = mapperFn(item)
yield newItem
}
}
const uppercasedIterator =
map(items, str => str.toUpperCase())verbosity...
iterator helpers,ย stage 4
https://github.com/tc39/proposal-iterator-helpers
reflectย the well-known API
to a new powerful primitive
array.values() -> ArrayIterator
set.values() -> SetIterator
map.keys() -> MapIterator
map.values() -> MapIterator
etc...
even
Object.keys(OBJ).values() -> ArrayIteratorCommon API
for various data structures
Object.groupBy(array)
array.map(fn)
array.values().map(fn)
.values()
Thank you
Tomasz Ducin ย โข ย ducin.dev
JavaScript Iterators
By Tomasz Ducin
