Implementing pattern-matching in JavaScript (full version)

@FGRibreau
Implementing pattern-matching in JavaScript

@FGRibreau
Implementing pattern-matching in JavaScript
…or how to play with EcmaScript shortcoming

@FGRibreau
“In computer science, pattern matching is
the act of checking a given sequence of
tokens for the presence of the constituents
of some pattern.” — wikipedia

@FGRibreau
def toYesOrNo(choice: Int): String = choice match {
case 1 => "yes"
case 0 => "no"
case _ => "error"
}
def fact(n: Int): Int = n match {
case 0 => 1
case n => n * fact(n - 1)
}
Pattern Matching in Scala

@FGRibreau
let rec factorial = function
| 0 -> 1
| n -> n * factorial(n - 1);;
Pattern Matching in OCaml

@FGRibreau
Une syntaxe de pattern-matching en JS ?
Sortez l'artillerie lourde.

@FGRibreau
_.flatten(links).map(link => {
[{protocol: 'HTTP'}]: => 1,
[{protocol: 'AMQP'}]: => 2
});
It would it be awesome to use some pattern-matching there right?

@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

@FGRibreau
syntactically short
javascript-minded syntax
functionally-way
I wanted a pattern-matching library

@FGRibreau
links.map(link => {
});
Ok, so this is not valid,
what precisely is not valid and
how can we make it valid?

@FGRibreau
links.map(link => {
[{protocol: 'HTTP'}]: () => 1,
[{protocol: ‘AMQP'}]: () => 2
});
links.map(link => {
[{protocol: 'HTTP'}]: 1,
[{protocol: ‘AMQP'}]: 2
});
links.map(link => {
});

@FGRibreau
{
[{protocol: ‘HTTP'}]: 1,
[{protocol: ‘AMQP’}]: 2
}
The rest is syntactically valid
ES6 "computed property names"
{
[{protocol: ‘HTTP’}]: () => 1,
[{protocol: ‘AMQP’}]: () => 2
}

@FGRibreau
links.map(link => {})
[undefined, undefined]
links.map(link => {1})
[undeﬁned, undeﬁned]
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.

@FGRibreau
If I go from there…
});

@FGRibreau
If I go from there…
});
_.flatten(links).map(match({
[{protocol: 'AMQP'}]: 2
}));
…to there…

@FGRibreau
… then it’s syntactically correct!
_.flatten(links).map(match({
}));

@FGRibreau
… would be great too !
const linkNumber = match(link,{
});

@FGRibreau
{
[{protocol: ‘HTTP'}]: 1,
[{protocol: ‘AMQP’}]: 2
}
“The object initializer syntax also supports computed property names.
That allows you to put an expression in brackets [], that will be computed as
the property name.”

@FGRibreau
{
'[object Object]': 2
}
evaluates to
{
}

@FGRibreau
evaluates to
{
[when({protocol: ‘HTTP’})]: 1,
[when({protocol: ‘AMQP'})]: 2,
[when()]: 0,
}
{
'{"protocol":"HTTP"}': 1,
'{"protocol":"AMQP"}': 2,
Symbol('match.pattern.catchAll'): 0
}

@FGRibreau
{
[when({protocol: ‘HTTP’})]: 1,
[when({protocol: ‘AMQP'})]: 2,
[when()]: 0,
}
{
'{"protocol":"HTTP"}': 1,
'{"protocol":"AMQP"}': 2,
Symbol('match.pattern.catchAll'): 0
}
function when(props){
if(props === undeﬁned){
return _catchAllSymbol;
}
return _JSON.stringify(props);
}

@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

@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!

@FGRibreau
?
.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!

@FGRibreau
.map(match({
[when.range(0, 43)]: 42,
[when(42)]: 72
}))
- same callsite
- single thread
- sequential evaluation

@FGRibreau
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

@FGRibreau
How to get matched value?
const fact = match({
[when(0)]: 1,
[when()]: n * fact(n-1)
});
fact(10);
n is not deﬁned

@FGRibreau
How to get matched value?
[when(0)]: 1,
[when()]: n * fact(n-1)
});
fact(10);
simple, use a function:
[when(0)]: 1,
[when()]: (n) => n * fact(n-1)
});
fact(10); // 3628800

@FGRibreau
const input = [{protocol: 'HTTP', i:10}, {protocol: 'AMQP', i:11},
{protocol: 'WAT', i:3}];
const output = input.map(match({
[when({protocol:'HTTP'})]: (i) => () => 1,
[when({protocol:'AMQP'})]: (i) => () => 2,
[when()]: (i) => () => 0,
}));
output.map((f) => f()) // => [1, 2, 20]
But how do I yield functions?

@FGRibreau
function match(/* args... */){
const args = Array.from(arguments),
obj = args[args.length-1];
// pre-compute matchers
let matchers = [];
for(let key in obj){
matchers.push(when.unserialize(key, obj[key])); // e.g. {match:(mixed)=>boolean,result:mixed,position:number}
}
matchers.sort(function(a, b){
return a.position < b.position ? -1 : 1;
});
if(Object.getOwnPropertySymbols(obj).indexOf(_catchAllSymbol) !== -1){
matchers.push(when.unserialize(_catchAllSymbol, obj[_catchAllSymbol]));
}
const calculateResult = function(input){
const matched = matchers.ﬁnd((matcher) => matcher.match(input));
if (!matched) {
throw new MissingCatchAllPattern();
}
return typeof matched.result === 'function' ? matched.result(input) : matched.result;
};
return args.length === 2 ? calculateResult(args[0]) : calculateResult;
}

@FGRibreau
when.unserialize = function(serializedKey, value){
if(serializedKey === _catchAllSymbol){
return {
match: _true, // same as: () => true
result: value,
position: Infinity
};
}
const {position, matcherConfiguration} = _unserialize(serializedKey);
return {
match: _match(matcherConfiguration),
result: value,
position: position
};
};

@FGRibreau
function _match(props){ // [{type}, …]
if(Array.isArray(props)){
if(props[0] === _patternORStr){ // _patternORStr = Symbol(‘OR’)
props.shift();
return function(input){
return props[0].some((prop) => _matching(prop, input));
};
}
if(props[0] === _patternANDStr){ // _patternANDStr = Symbol(‘AND’)
props.shift();
return props[0].every((prop) => _matching(prop, input));
};
}
if(props[0] === _patternRANGEStr){ // _patternRANGEStr = Symbol(‘RANGE’)
props.shift();
return props[0] <= input && input <= props[1];
};
}
}
function _matching(props, input){
// [...]
if(props instanceof RegExp){
return props.test(input);
}
if(typeof input === 'object'){
for(let prop in props){
if(input.hasOwnProperty(prop) && input[prop] !== props[prop]){
return false;
}
}
return true;
}
return props === input;
}
return (input) => _matching(props, input);
}

@FGRibreau
function replaceInstanceId(elem) {
if (_.isPlainObject(elem)) {
return _.mapValues(elem, replaceInstanceId);
} else if (_.isArray(elem)) {
return _.map(elem, replaceInstanceId);
} else if (_.isString(elem) && _.includes(elem, 'instance_id')) {
return _.template(elem)({instance_id: conf.instance_id});
}
return elem;
}
Type Matching
const replaceInstanceId = match({
[when(Object)]:(elem) => _.mapValues(elem, replaceInstanceId),
[when(Array)]:(elem) => _.map(elem, replaceInstanceId),
[when.and(String, /instance_id/)]: (elem) => _.template(elem)({instance_id:
conf.instance_id}),
[when()]: _.identity
});
With type matching

@FGRibreau
const replaceInstanceId = match({
// extraction
[when({a:when._, b:when._, c:{e:when._})]:(a, b, e) => {a, b, e},
[when(Array)]:(elem) => _.map(elem, replaceInstanceId),
[when()]: _.identity
});
Pattern Extraction

@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

Implementing pattern-matching in JavaScript (full version)

More Related Content

What's hot (20)

Similar to Implementing pattern-matching in JavaScript (full version) (20)

More from François-Guillaume Ribreau (16)

Recently uploaded (20)

Implementing pattern-matching in JavaScript (full version)