Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

About JavaScript Immutable Objects and Prince

0.00/5 (No votes)
21 Aug 2014CPOL2 min read 9.9K  
About JavaScript Immutable Objects and Prince

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

JavaScript
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

JavaScript
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.

JavaScript
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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)