From JavaScript to ELM – Step 1: Basics

Learning elm improved my coding skills and deepened my understanding of functional programming. In the last post I reviewed some of elm’s advantages regarding promising no run time errors and vast speed, if you haven’t read it, it is recommended.

This is the first post of a step-by-step series that will explain how to develop a simple game using elm from the point of view of a JavaScript programmer. Check out this game I implemented recently (play with a,w,s & d)

Lets dive in.


A trick: Next code is not commented, but if you remove the first } it will all be commented


Elm is a static typed language, meaning, every variable has a type. This type cannot be altered later on.


Lists, Tuples & Records

Note, Record meant to store data, like structs in c language. Even though you can push a function into a record, in many cases this would not make sense because this function cannot alter the state of the record, it is immutable.


Note that every expression in elm returns a value, thus, every if statement must contain else statement as well, otherwise it may not have a value. In addition the evaluated value of an if statement can be assigned to a variable, for instance:

Case conditions

You could also write condition with a cases

Note the special symbol ‘_’ that represents every other possible case. Case expressions are far more powerful and interesting but we will dive into it in the future.

Functions (fun)

Declaration looks like this:

First of all, it might look weird, I agree. But! once you get used to it you start to see that it is much more clear, less verbose, and more English-like then having ( , ) all over your code.
a & b are parameters of a function named add, the returned value is a + b. Why there is no return keyword in elm? Yet again, because every expression in elm returns a value so there is no need to state it.

Invoking the function would be done like this:

Every function in elm are curried (if you are not familiar with the concept you can read my weird post about it). This means that if I choose to send just one parameter to add I will get a function that expects the second parameter.


In JavaScript terms add could be defined

But if you send only a, then add behaves as if it was defined like this:

Of Course it is possible to write add in JavaScript in such a way that it responds both as a function that accepts 2 parameters, or a function that accepts only one parameter at a time, curried. Libraries like Lodash and Ramda expose a function named “curry” which will gladly transform any function you give it to a curried function like that.

Function operators

There are some cool function operators that might be foreign to a JavaScript developer. For example instead of toString 13 one can write 13 |> toString this can be useful to simplify syntax in some cases. For example

There is also an operator for composing functions. But I’ll talk about it in the future.

Nameless functions are written like that:

With two parameters lambdas are written:

Elm has no loops. The reason is that loops are by nature imperative and elm wants to keep the language purely declarative. Think of it, for loops depend on the change of value of an iterating index, and while loops depend on the change of value of a condition. So how could one loop in an environment where all is immutable?

List functions.

If this idea is odd to you, feel invited to read my post on the topic of how to never use loops again.

So if one wants to produce the numbers from 1 to 10, it would be done like that:

List.range stands for the function range in external List package. List package is obviously a core package, meaning no one have to actually import it. range produces the numbers you wish, later on you can “iterate” them, or more accurately, apply any other list function such as map or filter

Here is a mapping example:

Feel free to write in the comments.

Continue next to From JavaScript to ELM – Step 2: Types, Cases & HelloWorld


Special thanks to this dude who opened a pull request to the plugin I use to highlight code. It helped me to highlight elm snippets gracefully.

A journey of a thousand miles begins with a single step.



Liked the article?


16 thoughts on “From JavaScript to ELM – Step 1: Basics”

  1. Hello everybody! I yearn for to get something off one’s chest you a teeny roughly myself, I am thoroughly a on easy street woman, I like to shock a resemble a smiling make a fool of and I weakness my vocation, I’m ripping but there is no extension of a companion with whom I could well-founded take sex. You glimpse with it is the stretch and cold hard cash that would have to accomplishment I obtain no occasion suited for dates and meetings that would moral talk. I honest want passionate copulation without commitment. Breast value 3 athletic, pulling, despondent growth. My photos are here There is a motor car, and she can appear c rise, righteous sire an apartment where you can come. If you are married, you can be your mistress. If you are interested then opt create or call.

  2. Хватит медлить диктатуру Путина и его преспешников, завущих себя правительством и угнетающий выше народ. Соберемся нераздельно и свергнем узурпатора Путина и его марионетку Медведева! Наши планы и места сбора вы можете узнать на нашем портале Присоединяйтесь к нам!

Leave a Reply

Your email address will not be published. Required fields are marked *