Differences between the Immutable.js Map() and List()

[00:02] The immutable JS Map is analogous to a JavaScript object or hash, since it is comprised of key value pairs. The immutable JS List is analogous to a JavaScript Array and contains many of the same native methods. Let's compare the two and dive into the basics of List.

[00:19] Here I've got the To Do class. We've been using this throughout the series and I've got our Add To Do to Map method, which we've been using throughout the series as well. We'll be writing an Add to To Do to List series to show the difference between how we add items to either a List or a Map.

[00:35] This test here will show how we go about finding data within a List versus a Map. We've instantiated To Do and we're also instantiating a Map. Then we're adding the To Do to the Map. Let's see how this works with a List. We'll instantiate the List, make it empty. Then we'll take the List and we'll use our Add To Do to List method, do the same thing. We'll add the To Do to List via this method.

[01:07] What do we do? We're going to return it by using the Push method. This is the same method you would find in Array. We'll say Push To Do, but the only difference is it returns a new immutable structure. It does not mutate the original To Dos. When we do that this new List will contain this To Do and we'll write an expectation to confirm that.

[01:30] Let's first see if the To Dos Map contains the To Do. That should equal our To Do. The test passed. Let's write this for a List. How do we find an item in a List? It's going to be similar to an Array, but it's not going to use the actual bracket operators. Let me show you what I mean. To Do the List.git, because that's the common retrieval method in immutable JS, then we'll give it an Index, get (0just like we would do with an Array. Now we can see if this is equal to the To Do, and it is.

[02:12] Get is a little bit different, but Push is almost identical to Array and if we go over to the immutable JS documentation we can see how we create persistent changes in List. Lo and behold, we have Push, Pop, Shift, and a lot of the operators we're familiar with, with Array.

[02:32] That's cool that we want to Push onto a List, but what if we want to instantiate a List with items already in it? We can do it a couple of different ways. We have an Array here. What we're going to do is I want to actually make this Array match this List. List will take a list of items just like Array, but it doesn't use the bracket operator. We just provide a List, which is kind of convenient. Then we can see if this matches our expectations.

[03:05] Now let's loop through these two structures to see if they match. We're going to create account variable of 0Then we're going to use lodash to iterate through the initial Array and it takes a function that will accept each item. Now we're just going to write a method that will compare the two. Expect our immutable List.git count to equal the item.

[03:36] Then we also have to increment the count and now we have a passing test. There's also one other way to actually instantiate a List which is a little bit easier. If we have an existing Array, we can simply provide the Array by using the Rest operator. The Rest operator will take and break apart the Array into the items just like it was being added before.