Quickstart Elm 0.19, part 8

In this article, we’ll discuss using function composition in Elm.

Note: Examples in this article use Elm 0.19.

Function Composition in Elm 0.19: What is the “«”?

If you are not used to functional programming, there are so many new concepts in Elm to understand. One of them is function composition.

Function composition is a way to combine functions in Elm. It promotes code reuse and readability.

Consider the below snippet of code.

appendPrefix name = 
    "Miss " ++ name
greeting name =
    "How are you today, " ++ name

In the code above, we specify two functions, appendPrefix, and greeting.

The first function, appendPrefix, takes a name, and prefixes it with the title "Miss". The second function, greeting, takes a name and prefixes it with a compassionate greeting.

So let’s use these functions in an app:

module Main exposing (main)
import Html exposing (Html)
appendPrefix name =
    "Miss" ++ name
    
greeting name =
    "How are you today, " ++ name
main : Html msg
main =
    Html.text ((appendPrefix " Alice.") ++ (greeting "Alice" ++ "?"))

The above app can be viewed live on Ellie app.

We can write this app a bit nicer:

module Main exposing (main)
import Html exposing (Html)
appendPrefix name =
    "Miss" ++ name
    
greeting name =
    "How are you today, " ++ name
main : Html msg
main =
    Html.text <| 
        (appendPrefix " Alice. ") ++ (greeting "Alice" ++ "?")

Regardless of how we write it, we’ll get back this text on the screen:

Miss Alice. How are you today, Alice?

The code above does almost what we’d like. I’d prefer to have something like this printed to the screen:

How are you today, Miss Alice?

So how do we do that?

Enter the <<, aka the function composition operator. We’ll keep the rest of the code the same, and just update the main function, using the function composition operator:

main =
    Html.text <| 
        (greeting << appendPrefix) " Alice?"

And indeed, what we get back is:

How are you today, Miss Alice?

Perfect, exactly what we intended to do!

But why does this work?

Composing Functions with << and >>

The function composition operator << is just another infix operator in Elm.

In the example above, we specify the value at the end of the expression.

Then, we put all the functions we want to compose in parentheses, and we can then observe the flow of functions being invoked from right to left.

After the functions in parentheses are composed, the value to operate on — in our case, " Alice?" — is applied.

What if we reverse the flow of function composition?

main =
    Html.text <| 
        (greeting >> appendPrefix) " Alice?"

The result:

MissHow are you today, Alice?

Kind of unexpected, right? Easy fix, though:

main =
    Html.text <| 
        (appendPrefix >> greeting) " Alice?"

Now we get back the expected: How are you today, Miss Alice?

In the next article, we’ll compare strings and records in Elm 0.19.