Modifying variables that are passed by reference in Javascript

Question

I was watching a JavaScript talk, and the tutor said that if we pass a property of an object in a function it will actually change the real value, because we will be passing the variable by reference. Here is the slide:

but when I tried to practice the concept, that wasn't the case. Here is my code:

var obj = {val: 5};
function changeVal(x) {
 x = x+5;
 return x;
}
console.log(obj.val) // 5
console.log(changeVal(obj.val)) // 10
console.log(obj.val) // 5

I was expecting obj.val to change to 10. Please tell me what's wrong here, and correct me if I am wrong. Thanks

Read your answer here: http://stackoverflow.com/a/13104500/812519 there are plenty of answers and comments on this topic — anvk, Jul 21 '16 at 17:26
Look into `call by value`, `call by reference` and `call by sharing`. Javascript uses the first (for primitives) and the last (for objects) evaluation strategy. Especially notice the difference between `by reference` and `by sharing` when reassigning a passed object. — , Jul 21 '16 at 17:39
Like Java, Javascript has PASS-BY-VALUE ONLY. Period. There is no pass-by-reference in JavaScript. You can pass primitives, by value, and you can pass references (pointers to objects), by value. "Objects" are not values in JavaScript and cannot be "passed". — newacct, Jul 22 '16 at 01:19

Suren Srapyan · Answer 1 · 2016-07-21T17:36:40.520

1

You are passing not the object, but the primitive type. So when you pass the val of the obj, it is a number and is a primitive type.It copies the val and passes the copy to the object.

If you pass like this, it will work

var obj = {val: 5};

function changeVal( param ) {
 param.val = param.val  + 5;
 return param.val ;
}
console.log(obj.val) // 5
console.log(changeVal(obj)) // 10
console.log(obj.val) // 10

edited Jul 21 '16 at 17:36

answered Jul 21 '16 at 17:25

Suren Srapyan

66,568
14
114
112

the example would be a bit more clear if you name the parameter something different – aw04 Jul 21 '16 at 17:35
@aw04 Agree with you – Suren Srapyan Jul 21 '16 at 17:36

Tejeshvi Roy · Answer 2 · 2016-07-21T18:22:08.730

You are not actually passing an object, just passing the value of property(val). If you will pass obj in changeVal(), then it will actually change the value of the property of passed object.

For that you need to do like:

var obj = {val: 5};
function changeVal(x) 
{
    x = x+5;
    return x;
}
console.log(obj.val); // 5
changeVal(obj); // Need to pass object instead of value of the property's value
console.log(obj.val);  // 10

score 0 · Answer 3 · answered Jul 21 '16 at 17:33

Primitive types (string, integer, boolean, etc...) are immutable, which means if you change one of the values inside a function, the callee (scope which calls your function) will not see the change.

function doSomething(a) {
    a = a + 1;
}
var value = 2;
console.log(value); // result: 2
doSomething(value);
console.log(value); // result: 2

Pass-by-reference only works for objects. Like this:

function doSomething(obj) {
    obj.attribute = obj.attribute + 1;
}
var myObject = {attribute: 2};
console.log(myObject.attribute); // result: 2
doSomething(myObject);
console.log(myObject.attribute); // result: 3

More reading about Javascript types: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

score 0 · Answer 4 · answered Jul 21 '16 at 18:46

Say for instance you have an Iphone . Now lets say a manufacturing company calls you and asks to borrow your Iphone for a reference just so they can design an Iphone that is similar and sell it to customers . Your original Iphone still exists and is never gone , but every now and then the factory needs to use it for a reference , think of your function as the factory that just make a copy of obj.

//Original data

var obj = {val: 5};

Once your function returns something , it technically becomes a value

Example :

return 3; is a value of 3

so

function changeVal(x) {
 x = x+5;
 return x;
}

is a new value of x which in this case would be x + 5;

x is a copy of whatever you pass into the function .

Hope this helps.

Modifying variables that are passed by reference in Javascript

4 Answers4