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?


37 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. Хватит медлить диктатуру Путина и его преспешников, завущих себя правительством и угнетающий выше народ. Соберемся нераздельно и свергнем узурпатора Путина и его марионетку Медведева! Наши планы и места сбора вы можете узнать на нашем портале Присоединяйтесь к нам!

  3. je suis maman d’une petite fille de 18 mois ( qui est arrivé comme ça ? avec aisance puisque tomber enceinte calcul mon chéri était censé se extraire ) et on essai d’avoir un 2éme petit depuis mai 2008 ! D’abord cycle décalés puis rien trop de réglé ! ! ! nOn m’a dit qu’il fallait faire câlin tous les un jours ! On a fait durant le mois de novembre et là… j’ai 1 sensations bizarre… je dois avoir en sa possession mes règles demain !

  4. Если вас интересует обмен Биткоин на нескольких тысяч рублей Сбербанка, можно обратиться практически в любой обменник. Такими суммами они в основном располагают. Но вот когда сумма идет на десятки, сотни тысяч и даже миллионы рублей в эквиваленте электронных денег или криптовалют, обменники не помогут. Да, можно попытаться выполнять обмен Биткоин на Сбербанк частями на разных обменных пунктах, но времени на это потребуется много, не все предложат действительно выгодный курс. И даже если так, то все равно не вся необходимая вам сумма может быть собрана. Мы говорим о действительно масштабных обменных операциях.
    Если вы работаете с большими суммами средств, тогда предложение BETATRANSFER то, что нужно. У нас вы сможете осуществить следующее:
    Обменять Биткоин в рубли Qiwi;
    Вывод Биткоин на карты Сбербанка;
    Обмен биткоин на рубли популярных банков России
    Для кого актуально наше предложение?
    1. Для владельцев собственных обменников с большим оборотом средств;
    2. Для крупных клиентов, которые имеют собственные торговые площадки и есть необходимость в приеме больших объемов средств Киви;
    3. Для директоров интернет-магазинов с активным товарооборотом и денежными потоками.
    Нужно понимать, что принять BTC на собственный кошелек легко (хотя даже здесь есть некоторые ограничения). Другое вопрос вывод и обналичка. Приходится или долго ждать, или платить большую комиссию, или менять валюту по крайне невыгодному курсу с высокими процентами. Конечно же, это не совсем разумно.

  5. Absolutely NEW update of SEO/SMM software “XRumer 16.0 + XEvil”:
    captchas regignizing of Google, Facebook, Bing, Hotmail, SolveMedia, Yandex,
    and more than 8400 another categories of captcha,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can connect XEvil 3.0 to all most popular SEO/SMM software: XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other programms.

    Interested? There are a lot of introducing videos about XEvil in YouTube.
    Good luck!


  6. Сам только, что нарвался, никогда незарабатывал так. (не беспокойтесь – всё законно)
    Сделал, как рекомендовали, спешу поделиться.
    Не буду рассказывать сказки о том, что нужно зарегестрировать кошелёк, потом нажать на кнопку, потом снимать деньги… 😉
    Сам, по – первости, просидел 2 вечера. Не думал даже, что получится что то.
    Однако – вот Вам результат.

  7. Absolutely NEW update of SEO/SMM package “XRumer 16.0 + XEvil”:
    captchas solution of Google, Facebook, Bing, Hotmail, SolveMedia, Yandex,
    and more than 8400 another subtypes of captcha,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can connect XEvil 3.0 to all most popular SEO/SMM programms: XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other software.

    Interested? You can find a lot of impessive videos about XEvil in YouTube.
    Good luck!


  8. Привет, друзья.
    предлагаю вступить в проект с вложение всего 7 рублей.
    Также есть проект с вложением всего 100 рублей.
    Проекты новые. Можно вступать в оба. Перспективные.
    Выплаты – прямые, без накоплений, задержек и прочего.
    Подробности – на сайте. Так же на сайте есть обратная связь с куратором.
    Перейти на сайте – щёлкнув по картинке.
    Если что то будет непонятно, пишите на сайте в разделе “общение и вопросы”

  9. нид фор спид ворлд играть онлайн бесплатно
    машина из игры nfs most wanted
    играть онлайн в гонки need for speed most wanted
    можно ли в нфс карбон играть по сети
    прохождение игры нид фор спид андеграунд 3
    прохождение игры нид фор спид мост вантед
    как играть в nfs underground 2 по локальной сети через plan
    онлайн играть бесплатно недфорспид
    игра недфорспид мост вантед 2 скачать через торрент
    регистрационный номер для nfs carbon для игры по интернету

  10. msvcp140.dll для grim dawn
    как исправить ошибку msvcp140.dll
    msvcr140.dll redistributable
    msvcp140 dll как исправить
    msvcp140.dll pawno msvcp140.dll майкрософт
    msvcp140.dll 0xc000007b
    мафия 3 не запускается на windows 7 msvcr140.dll
    msvcp140.dll куда кидать
    msvcp140.dll adobe premiere
    отсутствует файл msvcp140.dll

  11. Day ago i got some shocking info about Omega 3 foods and seems like it really matters now. I’ve got this omega 3 site buy i have no idea is it really good stuff or not? And i don’t see any buy option here, actually.

Leave a Reply

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