Javascript-Pattern-Matching/Javascript-Pattern-Matching.js at main · 0X-JonMichaelGalindo/Javascript-Pattern-Matching · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/*
# Javascript-Pattern-Matching

Pattern matching is a concise, easy-to-read syntax for writing programs whose computation depends on the type of parameter past.

# Example #1

Computing a fibonacci number via recursive pattern matching.

```javascript
const fib = n => ( {

    [ n === 0 ] : n => 0 ,
    [ n === 1 ] : n => 1 ,
    [  n > 1  ] : n => fib( n - 1 ) + fib( n - 2 ) ,

}[ true ]( n ) );

console.log( fib( 10 ) ); //logs: 55
```

# Example #2

Handling a mouse event.

## expression based

```javascript

let x , y , isClicking;

const handle = ev => ( {

  [ ev.type === 'mousedown' ] : () => isClicking = true ,
  [ ev.type === 'mousemove' ] : ev => ( x = ev.offsetX , y = ev.offsetY ) ,
  [  ev.type === 'mouseup'  ] : () => isClicking = false ,

}[ true ]( ev ) );

```

## match based

```javascript

let x , y , isClicking;

const handle = ev => ( {

  [ 'mousedown' ] : () => isClicking = true ,
  [ 'mousemove' ] : ev => ( x = ev.offsetX , y = ev.offsetY ) ,
  [  'mouseup'  ] : () => isClicking = false ,

}[ ev.type ]( ev ) );

```

# Explanation

In a javascript object initialization, identical subsequent [computed property names](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names), repeatedly overwrite the same property.

```javascript
const a = { [true]:1, [true]:2, [true]:3 };

//a is { 'true':3 }
```

By storing booleans as property names, then accessing a boolean, we succinctly select 1 value corresponding to the last matching expression.

```javascript
const a = { [true]:1, [true]:2, [true]:3 };

//a is { 'true':3 }

console.log( a[ true ] ); //logs: 3
```

We wrap this succinct selection in a function for reusability, and compute the boolean property names from the functions parameters.

This provides syntactically clear pattern matching.

```javascript

const sign = n => ( {

  [  n < 0  ] : - 1 ,
  [ n === 0 ] :   0 ,
  [  n > 0  ] : + 1 ,

}[ true ] );

console.log( sign( -0.5 ) ); //logs: -1

```

By storing [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) as values, we select 1 function corresponding to the last true expression.

By calling that function immediately, our matching function returns a selected computation result.

Arriving at our original example.

```javascript
const fib = n => ( {

    [ n === 0 ] : n => 0 ,
    [ n === 1 ] : n => 1 ,
    [  n > 1  ] : n => fib( n - 1 ) + fib( n - 2 ) ,

}[ true ]( n ) );

console.log( fib( 10 ) ); //logs: 55
```

# Installation

Install an up-to-date browser on your platform of choice. Modern browsers support arrow functions and computed property names.

# Usage

The syntax provided here works well, but may be varied to your personal taste.

For example, the fibonacci example might use matching rather than expression evaluation:

```javascript
const fib = n => ( {

    [ n ] : n => fib( n - 1 ) + fib( n - 2 ) ,
    [ 1 ] : n => 1 ,
    [ 0 ] : n => 0 ,

}[ n ]( n ) );

console.log( fib( 10 ) ); //logs: 55
```

# This Library

Is not needed.
*/