Posted on May 24, 2013
Does Javascript pass by value or pass by reference?
Javascript exhibits quite interesting behavior when it passes object parameters. At first glance, it would appear that it passes everything by reference. Consider the following HTML page.
<html>
<body>
<script type="text/javascript">
function MyObject() {
this.value = 5;
}
var o = new MyObject();
alert(o.value); // o.value = 5
function ChangeObject(oReference) {
oReference.value = 6;
}
ChangeObject(o);
alert(o.value); // o.value is now equal to 6
</script>
</body>
</html>
We initialize an object o by calling the MyObject() constructor. The constructor sets the value member to 5. We then pass o into the ChangeObject() function, where it sets the value member to 6. If o were passed by value, that would mean we are passing a copy of o, and that its value member would not be changed once the function exits. However, if we open up this HTML page in a browser, the final alert(o.value) indeed prints 6. This would lead us to conclude that Javascript passes by reference.
However, things get really interesting when we look at this HTML page.
<html>
<body>
<script type="text/javascript">
function MyObject() {
this.value = 5;
}
var o = new MyObject();
alert(o.value); // o.value = 5
function ChangeObjectWithNew(oReference) {
oReference = new MyObject();
oReference.value = 6;
}
ChangeObjectWithNew(o);
alert(o.value); // o.value is still 5
</script>
</body>
</html>
This page is identical to the last, with the slight modification that we call the ChangeObjectWithNew () function. ChangeObjectWithNew creates a new instance of MyObject and assigns it to oReference, and then sets this new instance’s value member to 6. If Javascript passed by reference, o would now point to this new instance, and its value member would be 6 after ChangeObjectWithNew ran. However, if you run this page in a browser, the final alert(o.value) still prints 5. How is this possible?
What is happening behind the scenes is that Javascript is passing a reference of o by value. This can be a little confusing, so think of it this way. When o is first declared and initialized, it points to the memory location of the actual object that we instantiated. When the ChangeObject function is called, it passes in a copy of this pointer that points to the exact same memory location. Thus any changes to oReference’s member variables will be reflected in o, since both point to the same spot in memory. However, when we call ChangeObjectWithNew, the line “oReference = new MyObject” now causes to point to an entirely different spot in memory. Thus any further changes to oReference’s member variables will no longer be reflected in o.
A picture helps clarify things.
Here is what the situation looks like when we call ObjectChangeWithNew:
After ChangeObjectWithNew has run, note that oReference now points to a new memory location.
Since Javascript hides the implementation details behind how it handles its pointers, this C program demonstrates passing by reference and passing a “reference” by value. ChangeObject is called with a pointer to MyObject. This is passing by reference. ChangeObjectWithNew is being called with a copy of the original MyObject pointer. As a result, modifying its value member does not modify the original pointer’s value member.
#include <stdio.h>
#include <stdlib.h>
typedef struct
{
int value;
} MyObject;
void ChangeObject(MyObject * objReference)
{
(*objReference).value = 6;
}
MyObject * ChangeObjectWithNew(MyObject * objReference)
{
objReference = (MyObject *)malloc(sizeof(MyObject));
objReference->value = 6;
}
int main(int argc, char* argv[])
{
MyObject * o = (MyObject *)malloc(sizeof(MyObject));
MyObject * oCopy; //this will be a copy of the original object pointer
oCopy = o;
printf("Setting o->value to 5");
o->value = 5;
printf("MyObject.value: %d\n", o->value);
//now pass by reference
printf("Calling ChangeObject with original pointer\n");
ChangeObject(o); //this will change o->value to 6
printf("MyObject.value: %d\n", o->value); //prints 6
//reset o->value to 5
printf("Resetting o->value to 5\n");
o->value = 5;
printf("MyObject.value: %d\n", o->value); //prints 5
//now pass a COPY of the origal pointer
//this is how Javascript behaves, minus the memory leak
printf("Passing in a copy of the pointer o to ChangeObjectWithNew\n");
oCopy = ChangeObjectWithNew(oCopy);
printf("MyObject.value: %d\n", o->value); //still prints 5
//free the memory
free(o);
free(oCopy);
o = NULL;
oCopy = NULL;
scanf("Press any key to continue");
}
The fact that Javascript passes a “reference” by value is important to keep in mind. Assuming it passes by reference can lead to some difficult to track down bugs later on.