Creating an Immutable Object Graph with Immutable.js Map()

[00:00] The immutable map is one of the fundamental structure in immutable.js that can be assembled into an object graph. It's essentially an unordered hash with keys of any type that can be built from plain old JavaScript. I've got three tests here. I want to show you how to instantiate maps.

[00:17] Now, we can create it from just some plain old JavaScript data, let's go ahead and do that. Create a constant of data, and give it a key of TODO. Within that data, we'll do a title called TODO1, and then, we'll do a value called, let's say, "MakeItHappen." That's a good TODO.

[00:42] We're going to create two of these. Let's go ahead and copy that, paste it in, update the key and the title. Now, I've got some data, and we want to make this test pass.

[00:56] Let's go ahead and instantiate that map. We'll do, LetMap equals immutable.map, using the immutable namespace, and then, you just pass it in the data. It'll instantiate now, and create the map from that data.

[01:11] Let's make this test pass. We'll say map.get, the key that we passed it of TODO1. This get method is basically how you query data in a map. We want to see that this is equal to TODO1. We want to see the title is equal to TODO1. See if title is equal to TODO1. We'll save that, and we will refresh.

[01:40] Now, we have our first test, and it's passing. We can also create a map from an array. We'll go ahead and do that right now. To do that, we're going to use an array typle. Within that array, we're going to pass in another array with two values. The first value is going to be the key, we'll call it TODO1, and the second value is going to be the actual data we want stored in the key.

[02:10] We'll just do TODO1, and keep it simple for this particular test. Now, our immutable map should have a key of TODO1 with a title of TODO1. Let's see if we can get this test to pass. We'll copy the same thing up here, and we'll see if it's equal to the same thing down here. Sure enough, we now have a passing test.

[02:31] It's also worth noting, these maps are very similar to arrays. I want to show you just one property that's probably going to be very useful to you, and that's size.

[02:39] We're going to go ahead and create another map, and this time we're going to use this function appeared to create 10 different TODOs. It creates this exact data, but it's just using a function to do it.

[02:53] We'll go ahead and do create object TODOs, like so, and we'll see if this map's size, map.size is not length, keep that in mind, is going to be equal to 10. Sure enough, we have three passing tests, and that's map in a nutshell.