Elm: the jerk that took away my for-loops.
Tags: elm, web, javascript, learning
Published: 2019-04-01 23:16:12

---
title: Elm: the jerk that took away my for-loops.
published: true
description: A story about how i got rekt, and then unrekt, and then rerekt.
tags: elm, web, js, learning
---

## The good ole' days

The first time I ever coded was my junior year of high school.

The year was 2010, her name was Java.

```java
System.out.println("Hello, Ryan!");
```

But let's pretend her name was Javascript:

```js
console.log('Hello, Ryan!')
```

(_Ah, less typing..._)

Pretty soon, I found myself saying "hello" to all kinds of people.

```js
console.log('Hello, Ryan!')
console.log('Hello, Scott!')
console.log('Hello, mom!')
```

Life was easy... until it wasn't.


## Feeling stupid

__My pal:__ "Ryan- what are you doing?"

__Me:__ "I have no idea."

__My pal:__ "You're supposed to use a for-loop for that."

__Me:__ "wat."

__My pal:__

```js
var names = [ 'Ryan', 'Scott', 'mom' ]

for (var i = 0; i < names.length; i++) {
  var name = names[i]
  console.log('Hello, ' + name + '!')
}
```

__Me:__ "..."

__Also me:__ "WAT."

__My pal:__ "It's not too hard. Just make an array of strings, called "names". From there, we make a for-loop:

1. Say `var i = 0;` to start the index at zero.
2. We say `i < names.length` to tell the for loop when to stop looping.
3. Then type `i++` so it increments after every time it's called.

The variable `i` will be 0, 1, and 2. You can use it to index into your array to get the name, and then use that name variable so you don't have to duplicate the repetitive 'Hello' part."

__Me:__ "wat."


## Feeling un-stupid

The first time I met the for-loop, I had a lot of questions:

1. "Indexing into an array?"
2. "They start counting at 0?"
3. "Why doesn't i++ get a semicolon?"

Copy-pasting `console.log` statements was easy! For loops introduced me to a lot of new concepts. After some practice, I became familiar with those concepts.

It wasn't so bad. In no time, I was using them everywhere!

Even better, I got to bring the for-loop with me everywhere I went: Java, C#, Javascript, C, C++.

For-loops were my life. And life was good!

...until I met Elm.


## Feeling anti-stupid

Fast forward:
- My name was still Ryan
- I had a job in the city making websites.
- I was a JS pro (or at least I could add two numbers)

```js
function add (a, b) {
  return a + b
}
```

But on a train ride home, I saw an inspirational tech talk by a guy named Evan.

He designed something to make web programming nicer for folks!

The year was 2016, and her name was Elm.

```elm
add a b = a + b
```

(_Ah, less typing_)

The syntax was definitely spooky. It didn't look anything like JS!

But neither did HTML or CSS- and I learned those!

Just like for-loops, it took at bit of practice.

So I followed the official guide, asked questions in the #beginners Slack channel, and even started putting my commas on the _left side_.

```elm
[ "who"
, "have"
, "I"
, "become??"
]
```

Crazy, right?

Next thing you know, this HTML template:

```html
<!-- view.html -->
<div class="app">
  <p>Hello, Ryan!</p>
  <p>Hello, Scott!</p>
  <p>Hello, mom!</p>
</div>
```

Became this Elm function:

```elm
view =
    div [ class "app" ]
        [ p [] [ text "Hello, Ryan!" ]
        , p [] [ text "Hello, Scott!" ]
        , p [] [ text "Hello, mom!" ]
        ]
```

Haha, what a breeze!


## Feeling re-stupid

Wait a minute... look at all that duplication!

I know- I'll grab my trusty for-loop!

Let's hit up the Elm docs to find the function I'm looking for:

![Module docs for the term "for", no results...](https://thepracticaldev.s3.amazonaws.com/i/boniv00l4xkldyfrzokx.png)

My god... Evan _forgot_ to implement for-loops.

What a rookie mistake.

So I hopped on the Slack, to find out what to do.

A friendly Elm stranger let me know that `List.map` was the function I was looking for.

__Me:__ "wat."

__A friendly Elm stranger:__

```elm
names =
    [ "Ryan", "Scott", "mom" ]

viewParagraph name =
    p [] [ text ("Hello, " ++ name ++ "!") ]

view =
    div [] (List.map viewParagraph names)
```

__Me:__ "wat."

__A friendly Elm stranger:__ "lol, noob"


(_Just kidding, I've never been called a noob on the Elm slack_)

__A friendly Elm stranger:__ "Let's break it down a bit.

`List.map` is just a function, like `view` or `viewParagraph`.

It takes in two inputs:

1. A function that turns "things" into "other things"

2. A list of "things".

If you give it those inputs, it'll return back a list of "other things".

```elm
List.map : (things -> otherThings) -> List things -> List otherThings
```

In _your_ example, you had a list of "strings" you wanted to turn into a list of "HTML".

So your "things" are "Strings", and your "other things" are "HTML"!

```elm
List.map : (String -> Html msg) -> List String -> List (Html msg)
```

Just tell `List.map` how to turn a "string" into "HTML elements" (`viewParagraph`), and give it your list of "strings" (`names`).

You'll get back your list of "HTML", and that's what you can print to the page."

__Me:__ "..."

__Also me:__ "I'm scared."

## Feeling un-re-stupid

After I got some practice with `List.map`, I started getting the hang of it.

Soon afterwards, I found out JavaScript has the `map` function too!

And it's been there for a long time!

```js
function sayHello (name) {
  console.log('Hello, ' + name + '!')
}

[ 'Ryan', 'Scott', 'mom' ].map(sayHello)
```

Elm forced me to use their weird loop thing.

I felt tricked! But then I liked it better.

Now I only use for-loops in blog posts.


## So thanks, Evan.

I'm glad you forgot the for-loop.

Also [your talk was pretty dope](https://www.youtube.com/watch?v=oYk8CKH7OhE).

__Thanks for reading!__ :heart: