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

The "Lists" 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:

Lists in Elm are as common as Arrays in JavaScript. Richard explains how lists are implemented in Elm.

Preview
Close

Transcript from the "Lists" Lesson

[00:00:00]
>> Richard Feldman: So we want to list. So we've seen this a little bit, these lists literals when we were doing our virtual dome stuff. This is a list in Elm. So, a list is different from an array. It has a similar syntax to JavaScript arrays. But under the hood it's actually an immutable linked list.

[00:00:15]
It's not literally a JavaScript array. So that means it is. Different performance characteristics. So that's a list, this is a list of lists, we can nest the lists of we want, that's totally fine. This is not a valid Elm list though, although syntactically it works. It will not compile, and the reason is that, it has inconsistent contents.

[00:00:35]
So this right here is a list of numbers. This right here is a list of list of strings. Its first element is a list of strings. And the second one is a list of strings. And both of those go into a list of a list of strings. This one has mixed contents.

[00:00:50]
It has a string and a number, coexisting in the same list, and that's not allowed in Elm. So this is what I compile. If we try to write that code, put it into a put it anywhere, it will not compile. So to see why Elm enforces that, let's consider some JavaScript code.

[00:01:07]
So JavaScript, of course, allows you to mix contents and arrays, you can put anything you want in an array. Let's say we had an array of the strings pow, zap and blam. And we were mapping over them, so if you were not familiar with JavaScript map, basically the way that it works, is you call it as a method on an array.

[00:01:24]
You pass it a function, and it's gonna run that function on each element of the array. When it's done doing that, it's gonna take all of the return values of each of those, and its gonna give you back a new array. That has all of those return values, as the contents of the new array.

[00:01:41]
So, this where it essentially transform pow, zap and blam into an uppercase version. That's also had an exclamation point added to the end. So it's gonna make them more exciting. So we have lowercase pow, zap, blam turning into, this is the array that they will return, POW!, ZAP!, BLAM!

[00:01:56]
Much more energetic. Okay, so it works. What happens if we put a number in there? This is totally valid Java script. We're allowed to put a number in a list of strings in Java script. What's gonna happen? Well for the first three, it's gonna work exactly the same as before.

[00:02:14]
But when it gets to the last one, it's gonna call str.toUpperCase and we're gonna get a runtime exception. str.toUpperCase is not a function. So, fundamentally, the problem here is that, toUpperCase is a method that exists for these, but not for this. And this is a general problem. Anytime you have mixed contents in an array, in lists, in any kind of collection that you're able to iterate over.

[00:02:35]
Potentially, you have the problem that the code that you wrote, to operate on each of those elements, is gonna work for some of the elements, but not other elements.
>> Richard Feldman: So the purpose of enforcing this guarantee that these all have to have the same contents, is so that whenever you iterate over a list.

[00:02:52]
It's not possible to run into this situation. You know ahead of time, that every operation you're going to do on each of those elements is gonna work for every single operation in there, because they're all the same. Okay, so this is the fundamental problem,and the Elm solution to this is to require consistent entries and lists.

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