Functional Syntax in JS, Elm, and Haskell
Elm developers often come from one of two opposite directions.
- JavaScript programmers who know front-end web dev but want to introduce typed FP
- Haskell programmers who know typed FP but want to use it for front-end web dev
This leads to lots of comparisons of Elm functions to similar ones in both JavaScript and Haskell. Now you can have all of them in one place.
Collections
Collection data structures are core to most of programming. Here's how the various collections in Elm compare to equivalents in JavaScript and Haskell.
| Purpose | JavaScript | Elm | Haskell |
|---|---|---|---|
| Random access via key - dynamic keys | Map | Dict | Map |
| Random access via key - static keys | N/A | records | records |
| Unique values | Set | Set | Set |
| Preserve order, random access via index | Array | Array | Array |
| Preserve order, no random access | N/A | List | List |
List transformations
The default collection in Elm is the list. This is a breakdown of some of the more common functional list operations.
| Purpose | JavaScript | Elm | Haskell |
|---|---|---|---|
| Combine all elements into a new value | Array.prototype.reduce |
List.foldl |
foldl |
| Apply a function to each element | Array.prototype.map |
List.map |
fmap |
| Only keep elements that match | Array.prototype.filter |
List.filter |
filter |
| Get the first item | array[0] |
List.head |
head |
| Get the first element that matches | Array.prototype.find |
N/A | find |
Other Common Data Structures
| Purpose | JavaScript | Elm | Haskell |
|---|---|---|---|
| Optional values | null |
Maybe |
Maybe |
| Error handling | try / catch |
Result |
Either |
| Async work | Promise |
Task |
IO |
| Side effects | N/A | Task / Cmd |
IO |
Operators
Haskell is notorious for its use of operators. Here's how Elm concepts line up with some of the most common Haskell operators. Most of these FP operations don't exist in JavaScript (yet).
For more details on the Haskell operators, check out this guide.
| Description | JavaScript | Elm | Haskell |
|---|---|---|---|
| Forwards pipe | |> (experimental) | |> | & |
| Backwards pipe | <| | $ |
|
| Mapping | various map functions |
<$> |
|
| Applying | various (third party) andMap functions |
<*> |
|
| Chaining | various andThen and concatMap functions |
>>= |
|
| Appending | + |
++ |
<> |
| Backwards composition | << |
. |
|
| Forwards composition | >> |
||
| Alternative | various (third party) or functions |
<|> |
Convenience functions
| Purpose | JavaScript | Elm | Haskell |
|---|---|---|---|
| return the argument | N/A | identity |
id |
| ignore the second argument | N/A | always |
const |
| flip the arguments of a function | N/A | flip |
flip |
| treat two-tuple as two args | N/A | curry |
curry |