65.9K
CodeProject is changing. Read more.
Home

About JavaScript Immutable Objects and Prince

emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0 vote)

Nov 6, 2013

CPOL

2 min read

viewsIcon

9915

About JavaScript Immutable Objects and Prince

By default, when creating an object is used with the object literal notation such that...

var Musician = {
 FirstName:"Prince",
 MiddleName:"Rogers",
 LastName:"Nelson",
 StageName:"Prince"
}
It creates a ref type object (Musician) that is mutable.

What that means is that its state can be changed. In other words, if I take that Person named Prince and change his stage name

var Musician = {
 FirstName:"Prince",
 MiddleName:"Rogers",
 LastName:"Nelson",
 StageName:"Prince"
}
Musician.StageName ="The Artist Formerly know as "+Musician.StageName;
Musician.StageName ="Jamie Starr";
Musician.StageName ="Christopher";
Musician.StageName ="Alexander Nevermind";
Musician.StageName ="Joey Coco";
Musician.StageName ="Prince";  

We will still only have one Musician object in memory that has a StageName of "Prince".
However, that is to say the members are not mutable. All the stage names set are immutable which in contrast means that their state can never be changed.

But, Terrance. It looks like their values are changing for Stagename and you said there is only one musician so doesn't that mean you either shouldn't be able to change the value of stage name or that all the stage names are somewhere?

Well I'm glad you asked that. The value located at Musician.StageName isn't actually changing behind the scenes. It stays in the same place in memory. What is actually changing is the thing that Musician.StageName is pointing to. That is to say that somewhere in memory there is still a "Jamie Starr", "Christopher", "Alexander Nevermind" and a "Joey Coco". We just can no longer access them directly. This holds true until JavaScript's garbage collector deallocates that particular portion of memory after which we can truly say that they are gone.

So with that, all immutability really means is that the data stored at a location or "address" will not change. This does not mean that the state of our current object will not change. In our case, it means that the Musician is directing all who access the Stage Name to refer to him as what he is currently pointing to. This also means that there is a potential for a lot of memory to be used when dealing with a large number of strings or a large number of literal assignments.

To apply the behavior you expected (as far as immutability is concerned), there is a neat function that is partially supported referred to as Object.freeze() that will make an object Immutable.

See it in action here. *Note that this will potentially throw a TypeError when using Strict Mode.

var Musician = {
    FirstName: "Prince",
    MiddleName: "Rogers",
    LastName: "Nelson",
    StageName: "Prince"
};
Musician.StageName = "The Artist Formerly know as " + Musician.StageName;
Musician.StageName = "Jamie Starr";
Musician.StageName = "Christopher";
Musician.StageName = "Alexander Nevermind";
Musician.StageName = "Joey Coco";
Musician.StageName = "Prince";

console.info("Before freeze Musician.StageName = " + Musician.StageName);
Object.freeze(Musician);
Musician.StageName = "Joey Coco";
console.info("After freeze Musician.StageName = " + Musician.StageName);

document.getElementById("musicianName").value = Musician.StageName;

While we might remember, for a time, all the different stage names he has given himself over the years, if nothing else, he will always simply be Prince... LOL