Pattern Matching in JavaScript

02.11.2019 — javascript, pattern-matching — 1 min read

What is pattern matching?

Pattern matching is a common technique in functional programming languages. It allows us to decompose data structures in a concise syntax.

Generating Fibonacci numbers in Haskell

1fib 0 = 1
2fib 1 = 1
3fib n | n >= 2 
4    = fib (n-1) + fib (n-2)

Pattern matching in JavaScript

Pattern matching is not supported officially yet in JavaScript. There is a proposal for this feature.

Example: A contrived parser for a text-based adventure game

1match (command) {
2  when ([ 'go', ('north' | 'east' | 'south' | 'west') as dir ]) { … }
3  when ([ 'take', item ]) { … }
4  else { … }
5}

At the time of writing, it's at stage 1. While waiting for the official support, I'd like to introduce a simple tool for writing pattern matching style in JavaScript.

Meet match-values

match-values allow us to do a simple pattern matching based on JavaScript literals. It helps to write conditional logic in a convenient way. The library is small and there is no dependencies.

Let's check out a few examples below

Match a pattern to get a font size

1import match from 'match-values'
2
3const pattern = {
4  h1: 20,
5  h2: 18,
6  title: 16,
7  description: 14,
8  _: 13
9}
10match('h1', pattern) // 20
11match('h2', pattern) // 18
12match('title', pattern) // 16
13match('description', pattern) // 14
14match('anything', pattern) // 13

Match a pattern to get a function

1import match from 'match-values'
2
3const handleError = match(error, {
4  NOT_FOUND: () => showErrorMessage('Page not found'),
5  TIMEOUT: () => showErrorMessage('Page has timed out'),
6  _: NOOP
7})
8handleError()

Match conditions to get a value

1import { match, _ } from 'match-values'
2
3const pattern = {
4  [x => x > 5, 'smaller'],
5  [x => x === 5, 'correct'],
6  [_, 'greater']
7}
8match(8, pattern) // smaller
9match(5, pattern) // correct
10match(1, pattern) // greater