@wmsbill
this in the global scope
Browser - window
Web worker - self
NodeJS - module.exports
Slide 6
Slide 6 text
@wmsbill
this inside a function?
Slide 7
Slide 7 text
@wmsbill
this inside a function?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
@wmsbill
How to make this predictable?
Reasoning the value of this is tricky
Function.prototype.bind
Arrow function () => {}
Slide 10
Slide 10 text
With .bind()
Slide 11
Slide 11 text
With Arrow
Slide 12
Slide 12 text
@wmsbill
Calling a knowing function
Slide 13
Slide 13 text
@wmsbill
Extracting a method from an object
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
@wmsbill
Two syntaxes
Unary : :context.method()
Binary context: :method()
Slide 16
Slide 16 text
@wmsbill
Binary syntax
Slide 17
Slide 17 text
@wmsbill
Unary syntax
Slide 18
Slide 18 text
@wmsbill
Slide 19
Slide 19 text
@wmsbill
Slide 20
Slide 20 text
@wmsbill
Slide 21
Slide 21 text
@wmsbill
Bind operator is good for virtual
methods
But relies on this to be bound
Slide 22
Slide 22 text
@wmsbill
Composing without this
Slide 23
Slide 23 text
@wmsbill
Slide 24
Slide 24 text
@wmsbill
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
@wmsbill
Pipeline operator |>
It is a syntax sugar for
function composition
It creates a way to streamline
a chain of functions
Slide 27
Slide 27 text
@wmsbill
Pipeline operator |>
Slide 28
Slide 28 text
@wmsbill
Slide 29
Slide 29 text
@wmsbill
Slide 30
Slide 30 text
@wmsbill
Slide 31
Slide 31 text
@wmsbill
Function with more params
Slide 32
Slide 32 text
@wmsbill
Function with more params
Slide 33
Slide 33 text
@wmsbill
Awaiting a function
Slide 34
Slide 34 text
@wmsbill
Awaiting a function
Slide 35
Slide 35 text
@wmsbill
Awaiting a function
Slide 36
Slide 36 text
@wmsbill
Awaiting a function
Slide 37
Slide 37 text
@wmsbill
Awaiting a function
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
@wmsbill
Smart pipeline
Slide 40
Slide 40 text
@wmsbill
Smart pipeline
Two types bare style and topic style
() or [] are disallowed in bare style
When () or [] is needed, topic style
is used
# token is subject to change
Slide 41
Slide 41 text
@wmsbill
What about curry?
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
@wmsbill
F# pipeline proposal
Extends the minimal proposal with
an await step
Await step waits for the resolution of
the previous step
Slide 44
Slide 44 text
@wmsbill
F# pipeline proposal
Slide 45
Slide 45 text
@wmsbill
Slide 46
Slide 46 text
@wmsbill
Partial application
f(…) arity = n;
partialapp(f(…)) arity = m;
m < n
Slide 47
Slide 47 text
@wmsbill
Slide 48
Slide 48 text
@wmsbill
Slide 49
Slide 49 text
@wmsbill
Partial application in ES
Achievable by
Function.prototype.bind
.bind() binds context and
parameters
Slide 50
Slide 50 text
@wmsbill
Slide 51
Slide 51 text
@wmsbill
What about currying?
We can achieve partial application
with curry
Curry ≠ Partial application
Curry returns arity n-1
Slide 52
Slide 52 text
@wmsbill
Slide 53
Slide 53 text
@wmsbill
Partial application with arrow
function
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
@wmsbill
Partial application proposal
Creates two new parameters tokens
? For single argument
. . . for multiple parameters
Slide 56
Slide 56 text
@wmsbill
Partial application syntax
Slide 57
Slide 57 text
@wmsbill
With arbitrary parameter
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
@wmsbill
The . . . token
Spread the unbound parameters
Useful when you want to bound first
or last parameter
Slide 60
Slide 60 text
@wmsbill
The . . . token
Slide 61
Slide 61 text
@wmsbill
The . . . token
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
@wmsbill
Partial application + pipeline
Slide 64
Slide 64 text
@wmsbill
Partial application + pipeline
Slide 65
Slide 65 text
@wmsbill
Should I use all of it in production?
These proposal are in very early
stage
The adoption of one, may change
the syntax/semantics of other
Not production ready (yet)
Slide 66
Slide 66 text
@wmsbill
Let’s talk about something
more solid?
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
@wmsbill
[].flatMap syntax
Slide 69
Slide 69 text
@wmsbill
[].flatMap syntax
Slide 70
Slide 70 text
[].flatMap x [].map
Slide 71
Slide 71 text
@wmsbill
[].flatMap x [].map
[].map guarantees the same array
size based on input
[].flatMap doesn’t guarantees same
array length as input array
It could be used as filtering
Slide 72
Slide 72 text
@wmsbill
[].flatMap as filter
Slide 73
Slide 73 text
@wmsbill
#smooshgate
Slide 74
Slide 74 text
@wmsbill
[].flatten
Slide 75
Slide 75 text
@wmsbill
[].flatten syntax
Slide 76
Slide 76 text
@wmsbill
[].flatten syntax
Slide 77
Slide 77 text
@wmsbill
[].flatten syntax
Slide 78
Slide 78 text
@wmsbill
So what is the deal?
Slide 79
Slide 79 text
MooTools
Slide 80
Slide 80 text
@wmsbill
#smooshgate
MooTools is an 11 years old ancient lib
They implemented [].flatten with
different behavior
The implementation + Elements
Enhanced HTML component breaks
the compatibility w/ [].flatten
Slide 81
Slide 81 text
https://youtu.be/loqVnZywmvw
Slide 82
Slide 82 text
@wmsbill
TC39 had two options
Change flatten to another name (like
smoosh)
Break the internet