Introduction to Elm, v2

Case Expressions

Richard Feldman

Richard Feldman

Vendr, Inc.
Introduction to Elm, v2

Check out a free preview of the full Introduction to Elm, v2 course

The "Case Expressions" Lesson is part of the full, Introduction to Elm, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Richard introduces custom types, and hints that they will allow the audience to add features such as pagination and tabs to the example app. To demonstrate case expressions, it's demonstrated how a snippet would be written with an if statement, and then the same statement is rewritten with a case expression.


Transcript from the "Case Expressions" Lesson

>> Richard Feldman: Custom types, all right. So we're gonna talk about a few things here, case expressions, enumerations, which is one use of custom types, containers, which is another more exciting use of custom types. And finally we're gonna talk about variant functions. Okay, so, we're gonna start adding some features to our feed.

We've been sort of building up this feed as we've been going along. We've added some interactivity. We've added the banner and the tags. And now, we're gonna actually add some new stuff on top of what we've already built. So specifically, we're gonna add pagination to the end of the feed.

So at the bottom of the feed, we're gonna have this big long list of all the different pages of results in the feed and make it so you can click a different page in order to go to that page of articles and we're going to add some Tabs.

So previously we had this popular tags. When you clicked it, the tag itself turned green. But now we're gonna have multiple different Tabs. So one is Your Feed which is to say all the articles that you've favorited. Another is Global Feed, which is all the articles. Completely unfiltered, just every article out there.

And then, the third tab is optional and it's only when you've clicked on a tag. When you click on one of the tags, it sort of shows this third tab, which is based on the particular tag that you selected. And then, that's gonna work the same way as what we did in the last two exercises.

Okay, so we're gonna run in to some challenges along the way as we implement these and we're going to solve them. So, first thing that we're gonna run into is, how should we represent this tab bar? So one way we could do this is we could say okay, well I'm gonna have a new field and model called tab, which is a string.

And it just says yeah, this is the particular tab that I'm on right now. Maybe it's on YourFeed, maybe it's on GlobalFeed, maybe it's on a TagFeed. Okay, that's the way we could do that and then inside the view we could say I'm gonna have a three way if.

So I'm gonna have if == your feed then I'm going to have your feed. Else if it's GlobalFeed then I'm going to have GlobalFeed. Otherwise, through process of elimination it must be the Tag feed. So when can just show that there. By the way, you might notice that we're using else if here.

There is no actual separate syntactic thing for else if in elm. This just works by virtue of how if and else already work. Basically, if this is true, we're gonna run this, else if this is true we're gonna run this, else we're gonna run this, this is basically just two if expressions just stapled together.

There's no separate syntactic construct for else if, it's not special. Okay, another way we could do this, is we could refactor it to be like this. case of, then we say YourFeed ->, GlobalFeed -> and _ ->. These are equivalent. So this is a case expression in elm and the way that it works is you give it a subject.

And then it's gonna compare that subject in a couple of different ways. And if the subject matches. So in this case, if this string is exactly equal to this, it's run the first branch. Otherwise, if it matches this second one then it's gonna run the second brand and otherwise the underscore is the default branch.

And then it's gonna say okay, we didn't run any of the others so we're gonna run this one. Just like with the if expressions you have to be exhaustive here, you have to enumerate all the possibilities and if you can't enumerate all of them exhaustively. Which is to say there are still other strings out there in the world then you need some sort of underscore for a default branch, just like you need else at the end of an if.

So these two though are basically doing the same thing. It's just two different ways to write the same thing. Questions about case expressions. Yeah.
>> Speaker 2: Are there restrictions on what types you can have that match as far as what you're looking for on of case.
>> Richard Feldman: Got you.

Are there restrictions on what types you can be looking for? Yeah, there are. So you can do this with basically strings, some of the primitives. Strings, numbers, booleans, custom types which we'll get into shortly, and records a little bit. And you can't do a function. So there's no way to say like case, I don't know, list dot filter of and then I don't even know what that will look like, but you can't do [LAUGH] walking file.

Serious, there are a few that you can do. One other quick note on this is, that this is the other case of Elm where indentation matters, so the first was let expressions. Every declaration in a let expression had to be the same indentation level. Same deal here. Every one of these cases, every one of these patterns has to have the same indentation level.

Those are the only two places in Elm where indentation matters.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now