Javascript array value changes automatically

Question

I've got one peculiar problem while working on with javascript. I have a temporary variable where I had stored a value while loading the page. Then I had to perform some filtering of data for some events, so I had assigned it to another variable and performed the filter like this:

var myVar = tempVar;

myVar is a new variable and initially tempvar has two array elements. After filtering I will be assigning the value to myVar. The strange thing occurs now. While myVar value changes, automatically tempVar value also changes. Do anyone know why this happens? If so can you tell me how to assign the variable value to another variable and perform operation without changing the variable's value?

post your code. many things are not clear unless you post your code here — Anam Ahmed
– Anam Ahmed, Commented Jun 3, 2014 at 6:47
You have to create a copy of the value hold in tempVar. How to do this exactly depends on the "type" of the value. — Felix Kling
– Felix Kling, Commented Jun 3, 2014 at 7:00

Rory McCrossan · Accepted Answer · 2014-06-03 06:44:31Z

2

This is because your are creating a reference to the array in the new variable, not copying it. Therefore both myVar and tempVar are pointing to the same variable.

To clone an array use slice(0):

var myVar = tempVar.slice(0);

Working example

answered Jun 3, 2014 at 6:44

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deepak Ramakrishnan Kalidass Over a year ago

tempVar contains a array object.Now when i put slice(0) it throws an error like this "undefined is not a function"

Felix Kling Over a year ago

@user2078883: If you get that error then you are not working with an array, like you claimed.

JamesA · Accepted Answer · 2014-06-03 06:58:51Z

As stated above, myVar = tempVar simply matches the object references to each other so they share the same object.

If you wish to clone an object using jQuery, you can use the jQuery extend option

var myVar = jQuery.extend(false, {}, tempVar);  // shallow Copy
var myVar = jQuery.extend(true, {}, tempVar);   // deep Copy

If your definition of objectToCopy was

var tempVar= {
   var item1 = 1;
   var item2 = 2;
   var deeperItem = {
        var item3 = 3
   }
}

A shallow copy would clone the first layer of data into the myVar .

Any changes to the tempVar item1,item2 would be independent of the myVar item1,item2.

However, any nested objects (like deeperItem), would still be linked, so myVar .deeperItem.item3 = 'New Value' would also set myVar .deeperItem.item3

If you want a full clone using jQuery, use the second method, which does a deep copy so its a completely seperate object.

http://api.jquery.com/jquery.extend/

Collectives™ on Stack Overflow

Javascript array value changes automatically

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related