Javascript weird variable connection / behaviour with each other

Question

I've been programming in javascript (with a support from jquery) and I've run into some weird variable behaviour, which in I think is truly unexpected (or maybe I don't know something).

Basically, what I wanna do is to have one variable (zodziai) (array) be "stuffed" with arrays in one part of code and later on have those arrays removed by a click of buttons (one by one).

Also I still want to have those arrays saved in the end of the game even if the first variable is empty because of the button clicks.Easy, I thought to myself, so I've created another array variable (zodziai2) and equated those both in the beginning of the game (when the first one is full of arrays, ready to have them removed one by one.

Everything seems to fine until I check the value of zodziai2, second variable, in the end of the game. Even if it hasn't been touched throughout the process of removing elements from zodziai (first variable), somehow it turns out to be empty too in the end of the game.

Code: I declared both variable inside document.ready as = [];

 $("#begin").click(function() {
 //#begin is a button which starts the game
 $("#enterwords").html("It's showtime!");
 zodziai2 = zodziai; //zodziai is full of stuff, making zodziai2 the same
 alert(window.zodziai2); //checking, zodziai2 seems to be equal to zodziai
 taskai = 0;
 maxtaskai = zodziai.length;
...
 if (zodziai.length > 0) {
 ... stuff, just DOM.
 ...
 }
 });

And there goes the next button, which is responsible for removing one item from zodziai array. Somehow it gets removed from zodziai2 too.

 $("#next").click(function() {
 enword = $("#angliskas_zodis").val();
 ltword = $("#lietuviskas_zodis").val();
 //enword = enword.split("");
 //atitinkamas = atitinkamas.split(""); 
 if (enword == atitinkamas) {
...
 zodziai.remove(random_skaicius); // removing one item from zodziai (no worries, it's a self written function, working as a bee
...
 ...
 });

Later on, I define the third button, restart, in which zodziai2 is now empty as is zodziai. How can zodziai2 be empty if the code is only "playing" with zodziai? What am I missing??

$("#restart").click(function() {
 zodziai = zodziai2; //should be full of stuff, but is certainly not :(
 random_skaicius = 0;
 ilgis = 0;
 zodis = "";
 atitinkamas = "";
 tempzodislt = "";
 taskai = 0;
 maxtaskai = 0;
 klaidingi = [];
$("#angliskas_zodis").val("");
$("#lietuviskas_zodis").val("");
 surasymas(window.zodziai2);
 alertify.alert("Drop us a line if you think this function would be useful :)");
 });

• David Thomas: It's probably worthwhile putting together a JS Fiddle, or similar, demo of this code in action.
• Dimitar Dimitrov: Also, please keep it as short as you can, focus on the issue, that's a lot of code.
• Lukas Valatka: I could shorten it a bit, good idea!
• Anup Vasudeva: Just a pointer. I see you write a statement zodziai2 = zodziai. What it means that both variables point to the same memory location of the array. If you remove an element from zodziai, it'll be removed from zodziai2 too. Does this helps?
• Lukas Valatka: Brilliant! Now I get it. So, how do I duplicate that record on memory and make zodziai2 point to it? Sort of clone the value of zodziai and make it independant in variable zodziai2. Is this already stuff that needs a bunch of literature?

Answer 1

Just a pointer. I see you write a statement zodziai2 = zodziai. What it means that both variables point to the same memory location of the array. If you remove an element from zodziai, it'll be removed from zodziai2 too. Does this helps?