Working with Subsets of an Immutable.js Map()

[00:01] Immutable JS offers methods to break immutable structures into subsets much like array. For instance, it has the all-powerful slice, and unlike array, it offers functional methods like take and skip. You get the best of both the imperative and functional worlds. It's pretty cool. Let's see how they work.

[00:20] In this JS bin, I have our "To do" class, which you've been using throughout the series, and this add to do method, which will add to dos to our immutable maps. We have five methods that we're going to be creating here that will help us manage and create subsets of our data.

[00:36] The first test, I basically want to take the last two entries of this immutable map, and I'm going to do so using slice. Here we create the map and then we add 10 to dos to it with this lodash each method. Then we need to fill this little piece in right here. The retrieve final pair of to dos and make this test pass.

[00:56] Let's see how we do that with slice, which is a great method. Let's go up here to retrieve final pair. How do we do this? Well, it's going to be lot like array. We're going to take the to dos, we're going to call slice on it, which is going to take a subset, slice a subset of the data.

[01:16] In this instance we want to take the last two, so we're going to do to dos.size, which is the first index we want to start from. This first argument here is where we want to slice from. If we were to slice the to do.size, we'd be slicing at the end, so we need to pull it back a little bit. Take that index up two, since we want a pair. That's going to start from two from the end.

[01:41] Then we simply say we want it to slice until the end, which is the full size of the immutable data. Now if we go back down and now we want to see if this test is going to pass. We can see we're using an interesting operator called take last, and we can take two of the last two of the original immutable and see if those two match the last to dos we just plucked from, using slice.

[02:11] You can get kind of funky with slice. You can actually do negative entries to do some interesting things. We're going to create the to dos. Nothing crazy going on here. We're going to just remove the last one. We're going to create a method called remove last entry.

[02:26] Let's go up to the top to remove last entry and we're going to do to dos.slice. We're going to use slice again. This time we're going to start at the initial index, and we're going to give it a negative end index. Slice will accept that.

[02:42] What that does, it says, "Oh, if this is going to be smaller than the end, if this is actually going to be a negative number, go ahead and start from the beginning and go backwards." That's basically saying this is going to start from the end and go back one, essentially.

[02:58] Let's go back down and we'll see that we're doing to dos.but last. This is another operator which is very interesting which will remove the last item in the immutable map. We're taking but last, which is going to remove the last one, calling for each on all of those, and we're going to see if to dos was last is equal to, the ID is equal to the to do, and sure enough we have a passing test.

[03:24] Now what if we just want to remove the first entry? Well, we can easily do that with slice. Slice is a very powerful operator, so we have our to do setup. We have a method called remove first entry. Let's go ahead and create that.

[03:36] On remove first entry, we're going to do to dos.slice. Then we're going to say to do.slice, and we're going to say we want to slice from one. We want to start at the second item, and then slice to the end. That size. Boom.

[03:52] Now that we've done that, we've taken out the first to do. Let's see down here. There's another cool operator that immutable JS offers called rest, which does exactly that. We mimicked it with slice, and so we'll see what happens. We have our to do without first. We see we're iterating through each of the rest to dos, and we see that they are all equal and we're good to go and the test passed.

[04:17] What if we want to just get the last five to dos? Well, there's an interesting operator called skip. What we want to do is actually remove the first five with skip. Let's see how we write this in this function.

[04:30] What we're going to do is use skip instead of slice. We're going to do skip five. What that does, it says return me an immutable map or whatever type this is, but skip the first five and give me the rest. We'll go back down to this method. We'll see what we did.

[04:57] There's another method in immutable JS called take last, which pretty does the same thing but in reverse of skip. Take last five, we know that's going to take the last five. We're going to see if the last five using skip is the same, and sure enough they are. We have a passing test.

[05:14] Now we're going to do something a little different. We've got this array here of names. We're going to iterate through these names and assign them to each to do as the to do title. That's what this is doing.

[05:26] But what we want to do is find within these new to dos, the to do with the title of "monkey." But we want to find monkey and after. We want all of these four here.

[05:38] What we're going to do is write a find me monkey method. Let's go ahead and do that. Find me monkey is going to use the skip until operator. To dos.skip until. What this takes is a method. This method is very familiar to what we've been working with before. What we want to do is iterate through each to do and check it to see if it's monkey, if the text is monkey. We'll say monkey and see what happens.

[06:10] This is going to skip until it finds a to do with text of monkey, and then it will return everything after that item. Let's go back down to the test and we'll see what we did.

[06:22] Immutable JS also has an operator called take last. We know that we just need to take the last four here, because it's everything after monkey. We're going to take the last four, which is a cool operator, and we're going to iterate them and see if the IDs match. Because we just replicated this with skip until, and sure enough they do.

[06:43] We're going to do same thing but sort of in reverse. Instead of returning everything after monkey, what if we want to return everything before monkey. Well, we're going to have to write a stop at monkey method. There's a nice method in immutable JS that will help us do that.

[07:01] We're going to do to dos.skip while. Skip while. We're going to pass in each to do into this function. We're going to check to see if its text again is equal to monkey. What it's going to do is skip while it sees monkey.

[07:22] What that means, once it hits monkey it's going to go, "Nope, not monkey, not monkey, not monkey, monkey!" It's going to say, "OK, let's return everything up until this point." Let's use the take operator. We'll take the first four, because this way we know the order. We iterate through them. We're going to see that sure enough they equal the correct IDs.