Pattern Matching in Javascript with alexmerced-patternmatcher

Conditionals in Javscript

If Statements

if (color === "red"){
console.log("it's red")
}
if (color === "blue"){
console.log("it's blue")
}
if (color === "red"){
console.log("it's red")
}
if (color === "red") console.log("it's red")if (color === "blue") console.log("it's blue")if (color === "green") console.log("it's green")
color === "red" ? console.log("it's red") : nullcolor === "blue" ? console.log("it's blue") : nullcolor === "green" ? console.log("it's green") : null

Switch Statements

switch(color){
case "red":
console.log("it's red")
break
case "blue":
console.log("it's blue")
break
case "green":
console.log("it's green")
break
default:
console.log("none of them")
}
const objectSwitch = {
red: () => console.log("it's red"),
blue: () => console.log("it's blue"),
green: () => console.log("it's green")
}
objectSwitch[color]() // <--- invoke the function behind which ever string in stored in color

A Trick for Regex

switch(true){
case /red/.test(color):
console.log("it's red")
break
case /blue/.test(color):
console.log("it's blue")
break
case /color/.test(color):
console.log("it's green")
break
default:
console.log("none of them")
}

Pattern Matching

How it works

  • create a matcher with createMatcher (allows multiple matches) or createSingleMatcher (allow for a single match), which returns a function who test the registered patterns against the value passed to it. createMatcher and createSingleMatcher take two arguments…
  • An arrays of arrays, each subarray made of up two elements, an expression in the string where v is the value being matched against, the second element is a function to run if the expression matces receives the value as an argument.
  • The second argument is an object of external values you want to use in expressions like classes for typechecking or other variables. These can be accessing by the string express under the namespace “ex”.
const matcher = createMatcher([
["v === 'red'", (v) => console.log("it's red")],
["v === 'blue'", (v) => console.log("it's blue")],
["v === 'green'", (v) => console.log("it's green")],
])
matcher(color)
matchArray(["red", "green", "blue"], matcher)

Advanced Usage of patternmatcher

  • Without using the externals argument
/// CUSTOM TYPES CAT AND DOG
class Cat {
constructor(name, age){
this.age,
this.name
}
}
class Dog {
constructor(name, age){
this.age,
this.age
}
}
// AN ARRAY OF ANIMALS OF DIFFERENT TYPES
const animals = [
new Cat("Scratchy", 5),
new Dog("Spunky", 3),
new Cat("Paws", 3),
new Dog("Old Yeller", 10)
]
// LOOPING OVER ARRAY AND DOING DIFFERENT OPERATIONS BASED ON TYPE
const matcher = createMatcher([
["v.constructor.name === 'Dog'", (v) => console.log("It's a dog")],
["v.constructor.name === 'Cat", (v) => console.log("it's a cat")],
])
matchArray(animals, matcher)
  • version using the externals argument
const matcher = createMatcher([
["v instanceof ex.Dog", (v) => console.log("It's a dog")],
["v instanceof ex.Cat", (v) => console.log("it's a cat")],
], {Cat, Dog})
matchArray(animals, matcher)

Using PatternMatcher on an Object

const alex = {
name: "Alex Merced",
age: 36,
email: "alex@alexmercedcoder.com"
}
const matcher = createMatcher([
["v[0] === 'name'", ([key, value]) => console.log("do stuff with the name")],
["v[0] === 'age'", ([key, value]) => console.log("do stuff with the age")],
["v[0] === 'email'", ([key, value]) => console.log("do stuff with the email")],
])
matchObject(alex, matcher)
users.forEach(u => matchObject(u, matcher)) // <- run matcher on all users

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.