Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


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

    J.S. LeonardJ.S. Leonard

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



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.