Functions & if expressions

[00:00:00]
>> 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:43]
Let's just write a little function that will fix that. So I'm gonna start off by writing this function in JavaScript, and then I'm gonna translate it to to the elm equivalent. So in JavaScript in ES6 syntax I might say let pluralize equals singular, plural, quantity, these are the three arguments that it would take.

[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:01:33]
If we pass in 3 instead and everything else is the same, then it's gonna return leaves instead. Okay so if we're using Babel, then Babel is going to say, okay this is a perfectly fine JavaScript function. However older browsers don't know about all these stuff, they don't know about let, they don't know about error functions.

[00:01:50]
So we're going to actually take this code and compile it into dissimilar, those perhaps less ergonomically nice JavaScript code. And so it's gonna use var instead of let, it's gonna write out the word function instead of using an arrow function. And, essentially, this is all the browser ever sees.

[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:18]
And so we're gonna do essentially the same thing with Elm. So here is the pluralized function in Elm. There's some differences syntactically between the Elm version and the JavaScript version. But fundamentally, the Elm compiler is going to do the same thing that Bable did, it's going to compile this to JavaScript.

[00:02:33]
And all the browser's ever gonna see is the compile JavaScript. The browser has no idea that this code ever existed. So some of the syntactic differences you can see the arrangements are real separated by whitespace there is no commas in between them. They also go the left of the equal sign worth knowing as opposed on the right that is going to.

[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:10]
So this is sort of just a different delimiter for saying where the if ends, sorry, the if conditional ends and the resulting expression begins. You also notice that in Elm, we use double equals instead of triple equals. So in JavaScript, it's generally considered best practice to always use triple equals.

[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:03:59]
I can actually assign a value to the result of an if expression in Elm. So it actually, Elm if expressions are more similar to JavaScript ternary expressions, it's just they have different syntax. So in JavaScript you have the question mark and the colon, in Elm you have if and then.

[00:04:16]
But much like in JavaScript, you do have the notion of being able to assign them to values. And you also have the notion of needing to have both the if it's true and also the if it's false branches explicitly specified. So in a in JavaScript, you have to specify both.

[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.