Question

I would like to understand well something i observe more and more.

In some circonstances, different instances from a same model change their attributes the same way (if i have 2 UserModel A and B, if i change A, B will be affected the same way).

I observed some practical cases:

When i send an instance of a model to a view constructor, they are linked, if i change the model in my view, the outside one will be affected the same way. I guess sometime we just send a pointer and not a copy of the instance to the view.

More specific with some code;

A = new UserModel();
B = new UserModel();

var Data = A.get('info'); //where info = {some: "thing"};
Data.some = 'other';
B.set('info', Data); //A.get('info') == B.get('info')

Because i got the object info and not only the attributes separately (i tested it and there is no repercution between the values this way).

So my question is, are we always using pointers with objects in javascript ? Is it specific to backbone ? I would like to understand what is behind this behavior.

Thanks.

Answer 1

Objects and Arrays are passed or assigned as references in javascript, not copies. If you want a copy of an object or an array, you have to explicity make a copy.

Simpler types such as numbers, boolean are copied when assigned or passed.

Strings are a bit of special case. They are passed as references, but since strings are immutable (can’t be changed), you can’t really use a string reference for anything because any attempt to modify the string creates a new string.

A couple examples:

// arrays assigned by reference
var a = [1,2,3];
var b = a;
a[0] = 0;
alert(b[0]);  // alerts 0 because b and a are the same array

// objects assigned by reference
var c = {greeting: "hello"};
var d = c;
c.greeting = "bye";
alert(d.greeting);   // alerts "bye" because c and d are the same object

// numbers assigned as copies
var e = 3.414;
var f = e;
e = 999;
alert(f);    // alerts 3.414 because f is its own copy of the original number

// make a copy of an array
var g = [1,2,3];
var h = g.slice(0);    // h is now a copy
h[0] = 9;
alert(g);              // shows [1,2,3]
alert(h);              // shows [9,2,3]

The same is true for passing arguments to a function or returning values from a function. Unless an explicit copy is created, arrays and objects are passed or returned by reference.

---

A shallow copy of an array can be made with the .slice() method.

var arr1 = [1,2,3];
var arr2 = arr1.slice(0);   // make independent copy of first array

A shallow copy of an object can be made by copying each property from the original object to a new object.

Deep copies involve testing the type of each item being copied and recursing on the object if it is an object or array so nested objects and arrays are copied too.