how to store objects value in var ?

[Jonforum]

hi


am try to understand a basic notion in JavaScript.
If somebody has some clarification.


if i has this.


//example: i have storing a default permanente array value with a constructor in: $gameSystem.huds.hudsSlot.default = [10,5];
console.log($gameSystem.huds.hudsSlot.default); // return me [10,5]; is nice

//now in a context, i need to store this value in temps var to do some stuff
var test = $gameSystem.huds.hudsSlot.default;
console.log(test): // return me [10,5]; is nice

// but after, if i do
test[0]++;
// or
test[0]+=1;

console.log(test[0]); // return me 11 ( is ok ) !
//But why
console.log($gameSystem.huds.hudsSlot.default) // return me 11 ??????
// why test[0]++; or test[0]+=1; increase my objets $gameSystem.huds.hudsSlot.default ???
// why increase my var test[0] increase $gameSystem.huds.hudsSlot.default[0] in same time ?


thanks a lot for help me


my full context is thats 

Spoiler

my call constructor at boot game



$gameSystem.huds = new huds(); // build the $gameSystem +


and


the builder function call



/*=============================================================================
* BUILD HUDS INTEGRER (not the menue)
=============================================================================*/
// parrent call from $gameSystem.huds = new HUDS();
function huds() {
this.status = false; // tous les huds visible ou non ? supprime tous image
this.modeCine = false // function qui passe en mode cinema
this.hudstates = new hudstates();
this.hudsSlot = new hudsSlot();
}
//sub from parent
//-----------------------------------------------------------------------------
// le huds des stats -----------------
function hudstates() {
this.status = false; // si visible ou non ?
}
// le huds des itemdice.. hudsSlot -------------------
// $gameSystem.huds.hudsSlot
function hudsSlot() {
this.PIDdebug = [15,47]; // static
this.status = false; // si visible ou non ?
this.XY = [25,0]; // default x y screen // change selon les mode de this.movemode
this.easing = []; // store ici tous les processus de easing
this.SlotXY = [[this.XY[0]+37,this.XY[1]+101],[this.XY[0]+37,this.XY[1]+207],[this.XY[0]+37,this.XY[1]+313],[this.XY[0]+37,this.XY[1]+420],[this.XY[0]+37,this.XY[1]+530],
[this.XY[0]+147,this.XY[1]+101],[this.XY[0]+147,this.XY[1]+207],[this.XY[0]+147,this.XY[1]+313],[this.XY[0]+147,this.XY[1]+420],[this.XY[0]+147,this.XY[1]+530]]; // position des 10 slot item,dice default
this.movemode = function(mode) { if (mode==='default') {this.XY = [25,0]; return this.XY}else if (mode==='tuto') {this.XY = [150,20]; return this.XY}else if (mode==='combat') {this.XY = [25,50]; return this.XY}else if (mode==='hide') {this.XY = [-200,0]; return this.XY} } // defeni this.XY sur le bon mode et return linformation
this.slots = []; // initialise build .slot
for (var s =0; s<10; s++) { this.slots = new slots() } // les sub slot du jeux, 10 max
}
// $gameSystem.huds.hudsSlot.slots[]
function slots(id) {
this.pintype = null; // un slot est piner ? si oui quel type ?
this.idcontent = 1; // si contient un id item ?

}


_______________________________________________________________________


After if i try stuff ex:

var x = $gameSystem.huds.hudsSlot.PIDdebug //
console.log(x); // return me [25,0];

// but if i do after 
x[0]++;

// the  $gameSystem.huds.hudsSlot.PIDdebug[0]  are increase
//but $gameSystem.huds.hudsSlot.PIDdebug[0] are supose to be static ?!

//What I would like. Did I get it wrong?

 

[Sarlecc]

It is due to how javascript works if you were to change a value in


$gameSystem.huds.hudsSlot.default


then test would change to reflect this as well. Think it has something to due with both variables referencing the same place in memory if I remember correctly. (Though has been awhile since I have looked up this particular behavior).


Believe you can fix this by using:

var test = Object.assign({}, $gameSystem.huds.hudsSlot.default).

 

[Jonforum]

@Sarlecc


Hey Thank you infinitely, to you. it work!


I find the process somewhat complicated.
I may have done wrong my builder?


because if i do this example. this

x = $gameScreen.picture(15)._scaleX; // return 100 to x
//or 
x = $gameScreen._pictures[15]._x // return 100 to x

// after
x++;
//or 
x+=1;

console.log(x); return me 101 is ok 
// and 
console.log($gameScreen.picture(15)._scaleX); return me 100 ! is ok !
  console.log($gameScreen._pictures[15]._scaleX); return me 100 ! is ok !
// why in this context the objets $gameScreen.picture(15)._scaleX dont increase with variable ?

the underscore ??

 

[Sarlecc]

Primitive values such as strings, numbers and boolean values do not inherit this behavior. Non primitives such as objects and arrays do.


Perhaps @Zalerinian can give a better explanation then I can.

 

[Jonforum]

am not understand 


lol

 

[Zalerinian]

The main reason behind this is due to the way working with memory is in languages such as C++. In order to make Javascript run faster, complex variables like objects and arrays are stored in what is essentially just a pointer. A pointer is a variable that, instead of holding the value of the variable, holds the location in the computer's memory that the value exists.


This makes it faster because in order to call a function with an object as an argument, instead of having to make a copy of the entire object for that function to work with, it just has to copy the location in memory, which is just a number.


Howevwr this also means that functions access the variable by memory address, and this changes to it are not local to the function, but global to anything that uses them. This can be very useful if you know what you're doing, or very confusing if it isn't the kind of behavior you were expecting. 


Object.assign is one of the ways to make a full duplicate of an object in Javascript so that you can avoid issues such as the one you encountered,  this is not optimal, and certainly shouldn't be something you do often. Its best that wherever possible, you don't make a duplicate of any variable for a specific function. Avoid it as much as you can. 

 

[Jonforum]

instead of having to make a copy of the entire object for that function to work with, it just has to copy the location in memory, which is just a number.

Firstly thank you so much for taking the time to help me understand.


but holy frick !


If I have correctly understood your explanation, and the tests ,  I find it difficult to understand ..


ex:

console.log($gameSystem._versionId); // return 0 //ok

var x = $gameSystem._versionId; // assign 0 to x //ok
console.log(x); // return 0 // ok
x++; // increase x=+1
console.log(x) // return 1 // ok
console.log($gameSystem._versionId); // return 0 //ok 

//but if..
$gameSystem._versionId = [0,0] // assign array [0,0] // ok
x = $gameSystem._versionId; // asign [0,0] to x // ok
console.log(x); // return [0,0] // ok
x[0]++; // increase x[0] //ok
console.log(x); //return [1,0] //ok
console.log($gameSystem._versionId); // return [1,0] ??? ho WTF!....

 

[Sarlecc]

Here's another example:


Lets say I create two arrays with the same values:


//Same values but will have different locations in memory
var array1 = [4, 5];

var array2 = [4, 5];

if (array1 === array2) {
console.log(true);
} else {
console.log(false);
}
// will be false because memory addresses don't match


This means edits to either variable will not have an effect on the other


But lets say you have the following:


//both have same memory address
var array1 = [4, 5];

var array2 = array1;

if (array1 === array2) {
console.log(true);
} else {
console.log(false);
}
// will return true memory addresses match


This means edits to the above variables will change both because they both point to the same place in memory.

 

[Jonforum]

@Sarlecc @Zalerinian


Hell**** lol


I understand your explanation thank you, it enlightens me.


so In a slightly anarchic context I can do


x=[];
x[0] =$gameSystem.huds.hudsSlot.XY[0]; // ex: value 5
x[1] =$gameSystem.huds.hudsSlot.XY[1]; // ex: value 10
x[0]++; // add +1 to x
console.log(x[0]); // return 6 // ok
console.log($gameSystem.huds.hudsSlot.XY[0]) // return 5 // OK


I push a little my chance to understand, but with your example, is what I have understand?


The procedure at the top seems functional, but not very logical.
I would like a function like that.

x = GetArrayValue($gameSystem.huds.hudsSlot.XY); // Send to x all the array [a,b,c,d,e,f,....];

 

[Zeriab]

You are getting confused by immutable versus mutable objects. Here's a nice post on Stack Overflow that explains how numbers are copied by value nicely.


For object-oriented languages like JavaScript it's better to talk about object references than pointers, because there are some differences.


Keep on trying to learn


*hugs*


 - Zeriab

 

[Jonforum]

Thank you very much for your readings links and clarification.
I think I have found my mistake.
So to indicate permanent value in my objects.


The best way I have found is to make a function that returns a number and not only a number


//-----------------------------------------------------------------------------
$gameVariables.PidDebug = new PidDebug(); // builder (constructor)
function PidDebug() {
this.permantePID = function() {return 116;}
// instead of this.permantePID = 116;
}


//-----------------------------------------------------------------------------
// if after i ref the objet to a temp variable ( in other.js)
var pid = $gameVariables.PidDebug.permantePID(); // function will return inject number 116 in var pid (new memory block)
console.log(pid); // 116
pid++; // increase
console.log(pid); // 117 // Ok
console.log( $gameVariables.PidDebug.permantePID()); // 116 // Ok

// and if i check the typeof pid is a number
console.log(typeof pid); // number




i also read this on the JSON.parse()
It also seems to me another interesting way.


var objetPermanant = { // the object contain a permanent fixed number i need for multi usage
pidx: 32,
pidz: 14 // ...
};

var newPid = (JSON.parse(JSON.stringify(objetPermanant)));
newPid.pidx++;
newPid.pidz++;

console.log(newPid);
console.log(objetPermanant);




There is a risk of using one or the other in my context?
At the performance level?

 

[Zeriab]

You seem very fixated on one particular approach.


Try creating a solution where neither ++ nor += operators are allowed.


Try also to create solution where you have one object per picture with the coordinate information.


Share your solutions to the different approaches with us :3

 

[mlogan]

@Jonforum It seems it got overlooked that you (presumably) accidentally posted this topic twice. Which would you like to keep open? I can also merge them together, however, given the number of replies in each thread, I fear it could become confusing.

 

[Jonforum]

@mlogan


In fact no, the other post spoke rather to understand the difference between ++ and +=.


But here my question was rather to understand why I have incoherence when I assign an object to a variable.
Now I understand very well that we rather attribute a reference and not only the value of an object.


As said above  @Zeriab, knowing this javascript fondamental now.
It becomes a nonsense to want to use ++, + =


I find myself with real brothels and new notions, so I decided to Reset all my codes. 


I prefer to start again with 0 with this new knowledge, it will just be cleaner.


For my permanents value that I wanted to assign.
I simply opt to put them in a return;
ex: 


this.Avatare = function() {return [5,6]};




and i add a bonus now , i restart


Because I separate each of my plugins, function ...
And I will quickly be difficult to juggle with all the scripts.
So I had the right idea, to set up a MINDmap during construction.


With this approach, my approach should be shielded





so thanks to all for all your help.

 

[mogwai]

I discovered this recently too while trying to clone an array. I didn't know about it either and I've been javascript tinkering since 2007.

I got around it with the parse(stringify) like you did, though this assign function looks more elegant. I might instead use that for my old thing now.

This is good information.