Home

Welcome to the Javascript-mutable-data-and-prototypes- wiki!

_{This repository is part of a larger project!}

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

---

Javascripts prototype has its benefits, but the use of mutable data within prototype should be done with caution.

There exists also immutable(unchangeable) data.

🔖 The difference, very simply put, seems to lie in memory allocation.

Here follows a purely made up example of an immutable variable:

// Variable x has the memory ID 42 
var x = 5; 

// Variable x changed its memory ID to 666
x = 4;

🔖 Interpreting the listing above, a mutable vaiable would have a fixed memory ID while an immutable has not.

Here follows an purely made up example of a mutable variable:

// Array x has the memory ID 42 
var x = [33,44]; 

// Array x still has memory ID 42
x.push(55);

Citate: "...Mutable is a type of variable that can be changed. In JavaScript, only objects and arrays are mutable, not primitive values..."¹

Personal Note 😩!:

I couldn't find a way to check the memory address of a js variable 
and my research lead me to believe that it ain`t easy to do 

The reason for the caution of using mutable data in prototype (e.g. defining an array in a prototype) is that the same data will be shared in all instances.

An example follows:

function Machine(type)
{
    this.type = type;
}

Machine.prototype = 
{
    Models: [],
    addModel: function(model)
    {
        this.Models.push(model)
    }
}


myCar       = new Machine("van");
myVaccum    = new Machine("robot");

myCar.addModel("Hot-Wheels t1000");
myVaccum.addModel("R2D2");

// Outputs: ["Hot-Wheels t1000", "R2D2"]
console.log(myCar.Models);

// Outputs: ["Hot-Wheels t1000", "R2D2"]
console.log(myVaccum.Models);

Writing addModel in prototype will result in storing all models in one array, which is here not desired. The desired output would be:

// Outputs: ["Hot-Wheels t1000"]
console.log(myCar.Models);

// Outputs: ["R2D2"]
console.log(myVaccum.Models);

This could be achieved by declaring the array Models directly in the class/function Machine, like the variable this.type, instead of declaring it in prototype.

Content

The user interaction part could look like the content as seen below by starting "index.html" in a web browser and interacting with its features.

• The black boxes represent states.
• The black spiral arrows represent transition.
• If a black arrow is left clicked then the next state would be reached or an error message would be shown.
• The error would only pop up if a state could not be reached from the current state.
• "Interface" area would show the clicked transition if a state was successfully reached.

To use the project just download the files and execute "index.html". Note that all files(folders "wiki_images" and "PaintNET" excluded) should be placed in the same folder so that the functionality of the code is guaranteed.

The "PaintNet" folder contains .pdn files which can be opened and altered with PaintNET for simple picture editing.