Implementing pattern-matching in JavaScript (short version)
1 like2,296 views
The document discusses the implementation of pattern-matching in JavaScript, highlighting its syntactical challenges and proposing solutions for achieving valid syntax. It explores the use of computed property names and addresses semantic issues with mapping objects and properties in JavaScript. The author illustrates various examples and aims to demonstrate how pattern-matching can be effectively utilized despite the limitations of the language.
![@FGRibreau
_.flatten(links).map(link => {
[{protocol: 'HTTP'}]: => 1,
[{protocol: 'AMQP'}]: => 2
});
It would it be awesome to use some pattern-matching there right?](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-5-320.jpg)
![@FGRibreau
SyntaxError: /Users/FG/www/iadvize-services-
orchestration-tools/src/api/src/repositoryManagers/
github.js: Unexpected token (185:32)
183 |
184 | _.flatten(links).forEach(link => {
> 185 | [{protocol: 'HTTP'}]: => 1,
| ^
186 | [{protocol: 'AMQP'}]: => 2
187 | });
188 |
... and of course it’s not JS valid syntax](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-6-320.jpg)
![@FGRibreau
links.map(link => {
[{protocol: 'HTTP'}]: => 1,
[{protocol: 'AMQP'}]: => 2
});
Ok, so this is not valid,
what precisely is not valid and
how can we make it valid?](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-10-320.jpg)
![@FGRibreau
links.map(link => {
[{protocol: 'HTTP'}]: () => 1,
[{protocol: ‘AMQP'}]: () => 2
});
links.map(link => {
[{protocol: 'HTTP'}]: 1,
[{protocol: ‘AMQP'}]: 2
});
links.map(link => {
[{protocol: 'HTTP'}]: => 1,
[{protocol: 'AMQP'}]: => 2
});](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-11-320.jpg)
![@FGRibreau
{
[{protocol: ‘HTTP'}]: 1,
[{protocol: ‘AMQP’}]: 2
}
The rest is syntactically valid
ES6 "computed property names"
{
[{protocol: ‘HTTP’}]: () => 1,
[{protocol: ‘AMQP’}]: () => 2
}](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-12-320.jpg)
![@FGRibreau
links.map(link => {})
[undefined, undefined]
links.map(link => {1})
[undefined, undefined]
links.map(link => {return 1})
[1,1]
links.map(link => 1)
[1,1]
Syntactically valid, semantically invalid
… but then I won't have my pattern matching.](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-13-320.jpg)
![@FGRibreau
If I go from there…
_.flatten(links).map(link => {
[{protocol: 'HTTP'}]: => 1,
[{protocol: 'AMQP'}]: => 2
});](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-15-320.jpg)
![@FGRibreau
If I go from there…
_.flatten(links).map(link => {
[{protocol: 'HTTP'}]: => 1,
[{protocol: 'AMQP'}]: => 2
});
_.flatten(links).map(match({
[{protocol: 'HTTP'}]: 1,
[{protocol: 'AMQP'}]: 2
}));
…to there…](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-16-320.jpg)
![@FGRibreau
… then it’s syntactically correct!
_.flatten(links).map(match({
[{protocol: 'HTTP'}]: 1,
[{protocol: 'AMQP'}]: 2
}));](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-17-320.jpg)
![@FGRibreau
… then it’s syntactically correct!
_.flatten(links).map(match({
[{protocol: 'HTTP'}]: 1,
[{protocol: 'AMQP'}]: 2
}));](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-18-320.jpg)
![@FGRibreau
… would be great too !
const linkNumber = match(link,{
[{protocol: 'HTTP'}]: 1,
[{protocol: 'AMQP'}]: 2
});](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-19-320.jpg)
![@FGRibreau
{
'[object Object]': 2
}
evaluates to
ES6 "computed property names"
{
[{protocol: 'HTTP'}]: 1,
[{protocol: 'AMQP'}]: 2
}](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-21-320.jpg)
![@FGRibreau
evaluates to
ES6 "computed property names"
{
[when({protocol: ‘HTTP’})]: 1,
[when({protocol: ‘AMQP'})]: 2
}
{
'{"protocol":"HTTP"}': 1,
'{"protocol":"AMQP"}': 2
}](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-24-320.jpg)
![@FGRibreau
evaluates to
ES6 "computed property names"
{
[when({protocol: ‘HTTP’})]: 1,
[when({protocol: ‘AMQP'})]: 2
}
{
'{"protocol":"HTTP"}': 1,
'{"protocol":"AMQP"}': 2
}](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-25-320.jpg)
![@FGRibreau
Order is lost by match’s object
.map(match({
[when.range(0, 43)]: 42,
[when(42)]: 72
}))
when.range(0,43) => '["Symbol(match.pattern.RANGE)",0,43]'
when(42) => '[42]'
JS objects are an unordered collection of properties](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-26-320.jpg)
![@FGRibreau
Fixing properties declaration
?
.map(match({
[when.range(0, 43)]: 42,
[when(42)]: 72
}))
.map(match(new Map([
[ when.range(0, 43), 42 ],
[ when(42), 72 ],
[ when(), 'never should be hit' ]
])))
NO!](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-27-320.jpg)
![@FGRibreau
Fixing properties declaration
?
.map(match({
[when.range(0, 43)]: 42,
[when(42)]: 72
}))
.map(match([
[ when.range(0, 43), 42 ],
[ when(42), 72 ],
[ when(), 'never should be hit' ]
]))
NO!](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-28-320.jpg)
![@FGRibreau
Fixing properties declaration
.map(match({
[when.range(0, 43)]: 42,
[when(42)]: 72
}))
- same callsite
- single thread
- sequential evaluation](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-31-320.jpg)
![@FGRibreau
Fixing properties declaration
.map(match({
[when.range(0, 43)]: 42,
[when(42)]: 72
}))
- same callsite
- single thread
- sequential evaluation](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-32-320.jpg)
![@FGRibreau
Fixing properties declaration
when.range(0,43) => '[0, "Symbol(match.pattern.RANGE)",0,43]'
when(42) => '[1, 42]'
… #problemSolved …
.map(match({
[when.range(0, 43)]: 42,
[when(42)]: 72
}))
- same callsite
- single thread
- sequential evaluation](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-33-320.jpg)
![@FGRibreau
How to get matched value?
const fact = match({
[when(0)]: 1,
[when()]: n * fact(n-1)
});
fact(10);
n is not defined](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-34-320.jpg)
![@FGRibreau
How to get matched value?
const fact = match({
[when(0)]: 1,
[when()]: n * fact(n-1)
});
fact(10);
simple, use a function:
const fact = match({
[when(0)]: 1,
[when()]: (n) => n * fact(n-1)
});
fact(10); // 3628800](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-35-320.jpg)
![@FGRibreau
How to get matched value?
const fact = match({
[when(0)]: 1,
[when()]: n * fact(n-1)
});
fact(10);
simple, use a function:
const fact = match({
[when(0)]: 1,
[when()]: (n) => n * fact(n-1)
});
fact(10); // 3628800](https://image.slidesharecdn.com/match-when-short-160313111930/85/Implementing-pattern-matching-in-JavaScript-short-version-36-320.jpg)
Implementing pattern-matching in JavaScript (short version)
- 1. @FGRibreau Implementing pattern-matching in JavaScript
- 2. @FGRibreau Implementing pattern-matching in JavaScript …or how to play with EcmaScript shortcoming
- 3. 0 context
- 4. @FGRibreau Une syntaxe de pattern-matching en JS ? Sortez l'artillerie lourde.
- 5. @FGRibreau _.flatten(links).map(link => { [{protocol: 'HTTP'}]: => 1, [{protocol: 'AMQP'}]: => 2 }); It would it be awesome to use some pattern-matching there right?
- 6. @FGRibreau SyntaxError: /Users/FG/www/iadvize-services- orchestration-tools/src/api/src/repositoryManagers/ github.js: Unexpected token (185:32) 183 | 184 | _.flatten(links).forEach(link => { > 185 | [{protocol: 'HTTP'}]: => 1, | ^ 186 | [{protocol: 'AMQP'}]: => 2 187 | }); 188 | ... and of course it’s not JS valid syntax
- 7. 1 goal
- 8. @FGRibreau syntactically short javascript-minded syntax functionally-way I wanted a pattern-matching library
- 9. 2 syntax
- 10. @FGRibreau links.map(link => { [{protocol: 'HTTP'}]: => 1, [{protocol: 'AMQP'}]: => 2 }); Ok, so this is not valid, what precisely is not valid and how can we make it valid?
- 11. @FGRibreau links.map(link => { [{protocol: 'HTTP'}]: () => 1, [{protocol: ‘AMQP'}]: () => 2 }); links.map(link => { [{protocol: 'HTTP'}]: 1, [{protocol: ‘AMQP'}]: 2 }); links.map(link => { [{protocol: 'HTTP'}]: => 1, [{protocol: 'AMQP'}]: => 2 });
- 12. @FGRibreau { [{protocol: ‘HTTP'}]: 1, [{protocol: ‘AMQP’}]: 2 } The rest is syntactically valid ES6 "computed property names" { [{protocol: ‘HTTP’}]: () => 1, [{protocol: ‘AMQP’}]: () => 2 }
- 13. @FGRibreau links.map(link => {}) [undefined, undefined] links.map(link => {1}) [undefined, undefined] links.map(link => {return 1}) [1,1] links.map(link => 1) [1,1] Syntactically valid, semantically invalid … but then I won't have my pattern matching.
- 14. @FGRibreau BUT…
- 15. @FGRibreau If I go from there… _.flatten(links).map(link => { [{protocol: 'HTTP'}]: => 1, [{protocol: 'AMQP'}]: => 2 });
- 16. @FGRibreau If I go from there… _.flatten(links).map(link => { [{protocol: 'HTTP'}]: => 1, [{protocol: 'AMQP'}]: => 2 }); _.flatten(links).map(match({ [{protocol: 'HTTP'}]: 1, [{protocol: 'AMQP'}]: 2 })); …to there…
- 17. @FGRibreau … then it’s syntactically correct! _.flatten(links).map(match({ [{protocol: 'HTTP'}]: 1, [{protocol: 'AMQP'}]: 2 }));
- 18. @FGRibreau … then it’s syntactically correct! _.flatten(links).map(match({ [{protocol: 'HTTP'}]: 1, [{protocol: 'AMQP'}]: 2 }));
- 19. @FGRibreau … would be great too ! const linkNumber = match(link,{ [{protocol: 'HTTP'}]: 1, [{protocol: 'AMQP'}]: 2 });
- 20. 3 Semantic
- 21. @FGRibreau { '[object Object]': 2 } evaluates to ES6 "computed property names" { [{protocol: 'HTTP'}]: 1, [{protocol: 'AMQP'}]: 2 }
- 22. plz fix this
- 23. plz fix this
- 24. @FGRibreau evaluates to ES6 "computed property names" { [when({protocol: ‘HTTP’})]: 1, [when({protocol: ‘AMQP'})]: 2 } { '{"protocol":"HTTP"}': 1, '{"protocol":"AMQP"}': 2 }
- 25. @FGRibreau evaluates to ES6 "computed property names" { [when({protocol: ‘HTTP’})]: 1, [when({protocol: ‘AMQP'})]: 2 } { '{"protocol":"HTTP"}': 1, '{"protocol":"AMQP"}': 2 }
- 26. @FGRibreau Order is lost by match’s object .map(match({ [when.range(0, 43)]: 42, [when(42)]: 72 })) when.range(0,43) => '["Symbol(match.pattern.RANGE)",0,43]' when(42) => '[42]' JS objects are an unordered collection of properties
- 27. @FGRibreau Fixing properties declaration ? .map(match({ [when.range(0, 43)]: 42, [when(42)]: 72 })) .map(match(new Map([ [ when.range(0, 43), 42 ], [ when(42), 72 ], [ when(), 'never should be hit' ] ]))) NO!
- 28. @FGRibreau Fixing properties declaration ? .map(match({ [when.range(0, 43)]: 42, [when(42)]: 72 })) .map(match([ [ when.range(0, 43), 42 ], [ when(42), 72 ], [ when(), 'never should be hit' ] ])) NO!
- 29. plz fix this
- 30. plz fix this
- 31. @FGRibreau Fixing properties declaration .map(match({ [when.range(0, 43)]: 42, [when(42)]: 72 })) - same callsite - single thread - sequential evaluation
- 32. @FGRibreau Fixing properties declaration .map(match({ [when.range(0, 43)]: 42, [when(42)]: 72 })) - same callsite - single thread - sequential evaluation
- 33. @FGRibreau Fixing properties declaration when.range(0,43) => '[0, "Symbol(match.pattern.RANGE)",0,43]' when(42) => '[1, 42]' … #problemSolved … .map(match({ [when.range(0, 43)]: 42, [when(42)]: 72 })) - same callsite - single thread - sequential evaluation
- 34. @FGRibreau How to get matched value? const fact = match({ [when(0)]: 1, [when()]: n * fact(n-1) }); fact(10); n is not defined
- 35. @FGRibreau How to get matched value? const fact = match({ [when(0)]: 1, [when()]: n * fact(n-1) }); fact(10); simple, use a function: const fact = match({ [when(0)]: 1, [when()]: (n) => n * fact(n-1) }); fact(10); // 3628800
- 36. @FGRibreau How to get matched value? const fact = match({ [when(0)]: 1, [when()]: n * fact(n-1) }); fact(10); simple, use a function: const fact = match({ [when(0)]: 1, [when()]: (n) => n * fact(n-1) }); fact(10); // 3628800
- 37. 4 wrap up
- 38. @FGRibreau
- 39. @FGRibreau
- 40. @FGRibreau
- 41. @FGRibreau François-Guillaume RIBREAU @FGRibreau Tightly crafted developer oriented online real-time monitoring and administration service for Redis. Join us Frontend Dev - Backend Dev Fullstack Dev - DevOps #scala #nodejs #react #docker #xmpp