Introduction to Elm, v2 Functions & if expressions
Transcript from the "Functions & if expressions" Lesson
>> Richard Feldman: Let's move on to talking about functions. To talk about functions, we're gonna start with a user interface example. We're gonna have this hypothetical user interface, and we're gonna solve a very, very small problem in that interface using a function. Okay, this is going to be a leaf search.
[00:00:12] We have somehow made an application where the user wants to search for different types of leaves. So here's an example of how that UI might look. It would say, your search returned 3 leaves: Elm leaf, Maple leaf, and Oak leaf. And then let's say maybe your search only returned two leaves, that says Elm leaf and Maple leaf.
[00:00:28] And then it only returned one leaf but we have a little bit of a bug here where it says your search returned 1 leaves. That looks kind of amateurish, that's not right, it should say 1 leaf, right? It should be 2 leaves, 3 leaves but 1 leaf so how can we fix this bug?
[00:00:58] So that is the singular form which is to say leaf, the plural form, which is leaves, then the quantity which might be one, two, three, five, however many leaves there are. Then I write a little conditional here, if (quantity === 1), return singular, else return plural. This is our whole function, that's all that it's going to do.
[00:01:14] That's it's entire job is to fix this one bug, to handle the edge case of what if there's exactly one leaf. So we could write console.log(pluralize("leaf", "leaves", 1)); and that would return leaf, because it sees that quantity is 1, the quantity we passed in is 1. So it's going to return the singular form, which is leaf.
[00:02:05] So the browser has no idea that the other version of the code ever existed. From its perspective, you use var and function, that's all it knows that you did. So the browser understands this, and is able to execute it, even though this is not literally the code that you wrote.
[00:02:51] There are no parentheses around the conditionals. So it says if quantity == 1 then, and we move on from there. Parentheses, if you want you can put them there, but they're optional, so they typically are not used. Also note that, we have the then keyword instead of curly braces.
[00:03:27] And unless you really really know what you're doing and are doing something extremely specific, not to use double equals. But in Elm, there is no triple equals. There's only one thing called, and it's double equals, and it just works the way that you want. So you're free to use only double equals in Elm, there is no triple equals.
[00:03:41] Double equals is just the thing to reach for. Also worth noting that in Elm, else is required. If you have an if, there has to be an else that goes with it. And the reason for this is that in Elm, if is actually an expression. So I can write this, this is perfectly valid Elm code.
[00:04:33] In an Elm if expression, you also have to specify both. This is an important distinction because there is no if statement in Elm. There's no way to avoid specifying both of those. And that's because it gets ultimately assigned to an expression. So if it didn't force you to specify both, you'd be like, okay, what actually is x if there's no else and quantity doesn't happen to be 1.
[00:04:55] So essentially both of these are expressions.