DEV Community

Pattern matching in JavaScript

Massimo Artizzu on January 14, 2020

Pattern matching is a pretty common action performed on entities in order to check if they follow some pattern or not. For example, an object repr...

Read full post

SavagePixie • Jan 14 '20

Then real problem here is that it's good just for static values, as the following approach would execute all the expressions:

You could do something like this:

const ACTIONS = {
  save: action => saveThing(action.payload),
  load: action => loadThing(action.payload.id),
  delete: action => deleteThing(action.payload.id)
}
ACTIONS[action.type](action)

Massimo Artizzu • Jan 14 '20

Yes indeed! The point is that we have to be careful about this technique because those aren't branches and are eagerly executed.

Wrapping it in a function solves the problem but it's not something we do with if statements, for example 😄

Patrick Charles-Lundaahl • Jan 15 '20

Not sure about performance, but you can swap the immediate invocation for a bind. Eg:

const ACTIONS = {
  save: action => saveThing.bind(this, action.payload),
  load: action => loadThing.bind(this, action.payload.id),
  delete: action => deleteThing.bind(this, action.payload.id)
}
ACTIONS[action.type]()

This way none of your functions get invoked except the one that you explicitly match.

You would probably want to throw a guard condition in there so you don't try to invoke undefined, but this would be my standard approach for anything that needs a dynamic list of functions that have external dependencies.

Patrick Charles-Lundaahl • Jan 15 '20

I'd wager it would be pretty straightforward to build a library to do this. I built something similar to verify json against user-defined schemas. You could extend that idea to check conditions or pass arguments into a callback on success.