This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

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

3:15 JavaScript lesson by

Learn how to create an Immutable.Map() through plain Javascript object construction and also via array tuples.

Get the Code Now
click to level up comment guidelines



Ahmed Ayoub

I don't like this kind of videos when the instructor forgets something like the coma in 1:38, and fix it behind the scene, then vooollaaa, everything is wow, nice awesome!

Dear instructor, it's not about how you are perfect and awesome coder.if you did something wrong, it is always useful and helpful to let the trainee know what was the problem and how he fixed it, by doing that, the trainee will learn how to debug his errors.


Hi, @Ahmed! Thanks for the suggestion. I hadn't considered how that might be helpful and will be mindful of that in future videos.

In reply to Ahmed Ayoub

At a high level, I agree with you, as long as it is pertinent to the lesson subject in some way. If it's a "gotcha" that you might often encounter while trying to apply the lesson contents. In this case, a simply syntax issue does not seem relevant to help further the learning of Immutable.js. I don't mean to sound condescending, but you'll pick up how to deal w/ SyntaxError as you become more acquainted with JavaScript, to the point where it's immediately obvious.

In reply to Ahmed Ayoub

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

Joel's Head
Why are we asking?