This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.
'/%3E%3C/svg%3E)
Elm includes a data type called Maybe which is useful for working with values that may, or may not exist. This lesson shows a simple case where maybe types are encountered, and how to make them useful.
Access all courses and lessons, track your progress, gain confidence and expertise.
00:00 I'm going to start out a new Elm app here by typing module main where import graphics.element exposing show. Show is a function that will allow us to take a string and render it to the browser screen. Then I want to define my main function here by calling show with a piece of text. Now let's get it running, I'll switch over to my terminal and type Elm Reactor, which is a little server that comes with Elm for working with small Elm files.
00:31 I'm going to open up localhost:8000 in my browser, and then open main.elm which is the file I'm editing right here. You can see that we've got text rendered to the screen. Now let's make this app render some of our favorite numbers. I'm going to make a variable called favoriteNumbers, and inside it I'm going to put a list of numbers, 1, 5, 27, and 94. Now let's say we wanted to pick our very first favorite number and render it to the screen. First favorite number equals, now I need a way to get the very first item in a list.
01:09 Well, there's a function that comes from the list library, import list exposing head. Head will take an array of items, or a list of items, and return the very first item in the array. Head favoriteNumbers. Now let's go ahead and print out the first favorite number. First favoriteNumber. Save that, reload it in the browser. All right, you see we've got a number, the very first number in our array, but we've also got this little prefix "just."
01:42 Just is a value associated with a datatype defined in Elm's core library called maybe, and it looks a little bit like this. Type maybe = nothing or just something. This means that whenever you have a maybe somewhere in the code, it can either have the value of nothing or the value of just something. You could think of just something like a package with contents, so we can have other contents inside of a just.
02:10 In this case, we have a 1 inside of the just, but it could easily contain a string, or another object, or any number of things. So we could see here that head favoriteNumbers doesn't actually return a number, but it returns a maybe of a number. This is because lists can sometimes be empty. Let me comment out this line right here, a double dash is a comment in Elm, and we'll comment out this existing list, and we'll make favoriteNumbers an empty list.
02:36 Save the file, reload the page, and you can see that now we have nothing, because there are no numbers that head can pull out of this array. How do we actually get any work done with maybe values? Down here let's make a new variable called renderedFavoriteNumber. Let's say we want this renderedFavoriteNumber to be one string if my favorite numbers array is empty, or another string if my favorite numbers array actually has content in it. Well, we can use a case statement in Elm.
03:07 Case first favoriteNumber of this introduces a new statement, this is the variable on which we should switch and then below we're going to list the cases. So remember, head favoriteNumbers returns a maybe, and a maybe can have two values, nothing or just. So we have to cover both of those cases here in this case statement. So in the case of nothing, we'll return the string, "Sorry, no favNums."
03:38 In the case of a just value, we'll enter the string, "Your favNum is," and then we'll use the string concatenation operator, this ++, and we'll cast val which is a number to a string using the built-in toString function, toString val. Then we'll replace first favoriteNumber with renderedFavoriteNumber, save the file, reload the browser page. Sorry, no favNums, that's because here we've got an empty array. That's great, that means our nothing case was activated.
04:13 Now let's get rid of this empty list and bring back our populated list. Reload the page, "Your favNum is 1."
