Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In


    Model Simple Structures with Tuples in Elm

    Enrico BuonannoEnrico Buonanno

    Tuples are a very simple way of associating values to form a data structure. They can be used to model simple structures in your program and often appear in the APIs of the Core library.

    In this lesson learn how alias types, and destructure tuples in function arguments. To follow along check out the elm repl here. I've also provided you with the lesson code down bellow.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    00:01 Tuples are a very simple way to create more complex data structures from primitives. For example, you can create a tuple with a string hello and the number 2.5. If you enter this in the REPL, the REPL tells you that this is a value of type tuple, and it contains a string and a float.

    00:21 Of course, you could create more complex tuples with several values. For example, true, high, and 2.5. This will be now a three tuple with a Boolean, in addition to the string and the float.

    00:34 Another interesting thing that we can see in the REPL is that the comma itself can be taken as a function. It takes something of type A, and something else of type B, and returns a tuple that contains the A and the B.

    00:47 I could also say use comma as a function to create a tuple with hello and, as a second argument, pass it 2.5. This will be another way to create a tuple with the string hello and the float 2.5. Similarly, I can refer to the two commas as a function which takes three items and returns a three tuple.

    01:10 These functions to create tuples can be quite useful in some cases. For example, there is no zip function in the core library at this moment, but you can define zip in terms of map2.

    01:21 If you look at list.map2 function that takes a binary function and two lists, and then a list of results that are obtained by applying the function to each element from either list.

    01:34 For example, you will have a list, L1, that contains the values 1, 2, and 3, and the list, L2, with the strings one, two, and three. We want to zip these two lists together.

    01:50 Then we would use list.map2 with tuple as the function, and the two lists. We get a list of tuples where each one associates the first item from L1 with the first item of L2, and so on.

    02:08 Let's see how we could use tuples in a very simple program. I'm going to write a program that very simply renders a rectangle as HTML, and I'm going to use a tuple to model the rectangle. I'm going to type type alias rectangle equals a tuple of two Ints.

    02:28 What this really means is that all I need to know about the rectangle is its width and its height. That's all the data I'm interested in. I can use a pair of Ints to represent that, but in order to make my code more readable, I'm going to refer as this tuple of Ints with the name rectangle.

    02:46 I'm going to define the rectangle that I want to render. I'll call it rect, and I say that it's a value of type rectangle. Rect will be a rectangle with width of 200 pixels and a height of, say, 50 pixels.

    03:02 Essentially, I just want my program to render this rectangle to the screen. I'm going to say that this main program should just render rect, which is the rectangle that I've just defined before.

    03:14 All I have to do is define a render function that takes a rectangle and returns some HTML of A. Now, I just need to provide an implementation for this render function.

    03:32 It's going to take R, that's rectangle. For now, I'll return text, "Hello, World," just so it compiles. It doesn't quite compile because I'm referring to the HTML type. I need to import this also.

    03:53 On to the work of actually rendering the rectangle, I'm going to import the div function, which can create a div node. Here, in render, instead of just text, I'm going to return a div, and like all functions that create HTML elements, this takes two parameters -- a list of attributes, and the list of children.

    04:14 Let me keep this text in the children so that we still see something on the screen. In order to set the size of the div, I'm going to use the styles function. HTML elements are in the HTML module, but attributes have their own module.

    04:34 Let me import Html.Attributes. The function I'm going to need is called style. This allows me to here call style, and this in turn takes a list and its list of tuples, or rather, a list of pairs, where the first item is the style attribute. For example, color. The second item is the value for the attribute, for example, red.

    05:08 If I compile that, you see that the contents of the div are now in red. Just to see what it does at the HTML level, let's inspect that.

    05:19 You can see that we have a div that's the result of having the div here, and that style is rendered as a styling here, and we have color red. Keep in mind that, as a rule, you would use CSS for styles, but this is just for the purpose of showing an example.

    05:39 I'm now ready to set the width and height. Width -- here, I want something like 200 pixels. Likewise, for the height, I want something like height, and something like 50 pixels. Of course, this should be parameterized based on the rectangle based as input.

    06:05 How do I pull out the elements of the tuple? I can deconstruct it here. I will have w for the width and h for the height. Here, this is a string. I will need to convert that variable, w, using the toString function, and then concatenate with pixel, and similarly with height.

    06:36 Rather than the contents color, here I should be using the background color. If I compile this now, a bit too big because I still have the 50 here. Indeed, now we have a div that's 50 pixels high and 200 pixels wide.

    06:56 Now, I can delete this placeholder here. Indeed, I've succeeded in creating a program that renders a rectangle of an arbitrary size, which is not spectacular, but it shows you how you can use tuples to represent the data in your program.