0

I have the following javascript code:

var oLink = {
        title:   $link.attr('title') || '',
        row:     $link.attr('data-row') || '',
        $modal:  ''
    }

I now call a function like this:

oLink.$modal = accessModalOpen(oLink, content);

Do I need to return oLink.$modal or could I just set it inside accessModalOpen? In other words is the parameter oLink passed as a reference in javascript?

Update:

Added $modal to the oLink declaration

2
  • You could simply find that yourself, by trying the two different cases.
    – saji89
    Sep 20, 2012 at 6:06
  • As much as "if it works" I'm hoping to get some advice on is this a good thing to do. Thanks Sep 20, 2012 at 6:09

6 Answers 6

3

With your current setup, you should return it. oLink is passed as a reference, so you can set it inside of the function too, but then you'd have this instead:

accessModalOpen(oLink, content);

Demo to help you understand

2
  • Can you explain why you think I should return it. I updated my question slightly and included $modal to the oLink declaration. Thanks Sep 20, 2012 at 6:06
  • Well, in your current setup, if you didn't return it, in the end, oLink.$modal would be undefined. It'd be set inside the function, then the function would end, it'd return nothing, which is undefined, and this return value would be set to the variable, making it undefined.
    – Some Guy
    Sep 20, 2012 at 6:10
2

"In other words is the parameter oLink passed as a reference in javascript?"

Yes. Within your function, you will have a reference to the same object, not a copy of the object, so yes you can update, add and delete object properties within your function.

Note though that it's not "pass by reference" in the sense that some languages have it. The variable outside the function and the parameter used inside the function will both refer to the same object, which is why you can change its properties, but if you assign the function parameter to some other object that doesn't affect the variable outside the function which will continue to refer to the original object.

1

Both will achieve the same result in this specific case, but it depends on the actual semantics of the oLink.$modal property. If that property is closely tied to the logic of accessModalOpen, then you should set it inside accessModalOpen; if there would be situations where accessModalOpen shouldn't set oLink.$modal, but you would still need that value in some other way, you should return it.

1

To help (or hinder... we'll see), JS passes non-scalar objects by reference, but passes scalar objects by value.

var x = 10;
function increment (num) { num += 1; }

increment(x);
console.log(x); // 10;

Meanwhile:

var bob = {
    name : "Bob",
    age : 32,
    job : "Shoe Salesman",
    salary : 2000000
};

function fire (employee) {
    delete employee.job;
    employee.unemployed = true;
    employee.salary = 0;
}

fire(bob); // { name : "Bob", age : 32, unemployed : true, salary : 0 }

So if you're passing an object or a function into a function, you will be able to add/modify properties.
If you pass an array, you will be able to push items into it, or pop items out of it.

If you're passing a string or a number or a boolean, you need to use the return value (but if you pass an object, you can modify one of its properties to be a scalar value).

1

You can do either:

DEMO

var $link = {
    attr:function(str) { return str; }
}

function accessModalOpen(obj,cont) {
    return "Modal: accessed "+obj.title+" with "+cont.text;
}    
function accessModalOpen1(obj,cont) {
    obj.$modal1= "Modal1: accessed "+obj.title+" with "+cont.text;
}    
var content = {
    text:"This is content"
}    
var oLink = {
  title:   $link.attr('object title') || '',
  row:     $link.attr('data-row') || ''
}

oLink.$modal = accessModalOpen(oLink, content); // return content and set
alert(oLink.$modal); 

accessModalOpen1(oLink, content); // just set
alert(oLink.$modal1); 
​
2
  • You see the return in accessModalOpen? That's what he's talking about. He's asking if he can simply set the value in there instead of having a value returned.
    – Some Guy
    Sep 20, 2012 at 6:12
  • Ahh - NOW I understand. Updated to reflect either
    – mplungjan
    Sep 20, 2012 at 9:10
0

Like all JavaScript parameters, oLink will be passed to the function accessModalOpen by value. However, oLink itself is only a reference to the location in the global heap where the contents of the oLink object are stored. This means that you can modify the properties on oLink from within your function and those modifications will continue to be visible after the function returns.

If you were to reassign oLink to a new object within accessModalOpen, then that change would not be visible after the function returned. This means you could not do something like creating a new oLink object if it was unassigned.

The short answer is that you can modify oLink within the function, just as you are asking. But be aware that if you do anything that changes the object that oLink is referencing, then those changes would be thrown away after the function returns (in the outer scope). This can lead to some hard to track bugs if you do not understand it.

There is a really good write up that I will link below on how JavaScript handles parameter passing that I highly recommend. It goes into much more detail on exactly what is happening.

JavaScript parameter passing

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.