7

Quick question on Javascript to which I can't find a clear concise answer.

I'm building an app that's way ahead of anything I've done before and involves multiple classes being instantiated. These objects are then passed into a processing class that checks user inputs, draws onto canvas and updates the objects that it has been passed.

I am wondering, how does JavaScript handle passing objects to functions? Am I passing a copy of the object, or am I passing a reference to the object?

So if my controller class alters one of the objects variables, is that changed everywhere or just in the object that that controller sees?

Sorry for such a simple, possibly easily testable question but I'm not even sure if I'm making a class correctly at this point thanks to errors piling up.

Improve this question
11
  • google.com/… Commented Jun 28, 2013 at 8:55
  • You're passing a reference. Assignments obj1 = obj2 also just create more references to the same object. Commented Jun 28, 2013 at 8:56
  • in javascript objects are passed by reference Commented Jun 28, 2013 at 8:57
  • 1
    Did you see this answer? I see your pain as the answers are ambiguous but this cleared things up for me. Best bet is to do a bit of experimenting with jsFiddle for clarity :-) Commented Jun 28, 2013 at 9:02
  • Thanks for the link, I'm not too sure of the syntax but it does illustrate the way i;ve been doing it in the second part and nice to know it is being done correctly. 200 lines of code and 4 hours last night weren't wasted. Commented Jun 28, 2013 at 9:08

3 Answers 3

Reset to default
4

When passing in a primitive type variable like a string or a number, the value is passed in by value. This means that any changes to that variable while in the function are completely separate from anything that happens outside the function. 

function myfunction(x)
{
      // x is equal to 4
      x = 5;
      // x is now equal to 5
}

var x = 4;
alert(x); // x is equal to 4
myfunction(x); 
alert(x); // x is still equal to 4

Passing in an object, however, passes it in by reference. In this case, any property of that object is accessible within the function

function myobject()
{
    this.value = 5;
}
var o = new myobject();
alert(o.value); // o.value = 5
function objectchanger(fnc)
{
    fnc.value = 6;
}
objectchanger(o);
alert(o.value); // o.value is now equal to 6
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Actually that's not 100% accurate, it looks like a pass by reference, sometimes it also behave as it, but in javascript variables are passed by reference. For objects and arrays, the value passed is a reference to the object, but that's slightly different than saying it's passed by reference. Passing the object reference is different than passing the object itself. Sorry for the punctuation :)
"but in javascript variables are passed by reference" - @lorenzo.marcon - in JS it's the opposite. Everything is passed by value, but with objects the value is a reference to the object. It's not like "by reference" in some other languages where a function can change the variable that was passed in. EDIT: Actually I just noticed that you said as much in your answer, so I assume this was just a typo in your comment.
ehrm.. my bad, it's a typo. Obviously I meant by value! ALWAYS by value in JS. that's what I also wrote on my answer, before writing the comment. but thanks for pointing it out! I wonder if someone could correct it, since I cannot edit it anymore.
3

As well described in https://stackoverflow.com/a/5314911/636348, in JavaScript it's always pass by value, but for objects the value of the variable is a reference.

So, it's not a pure pass by reference. Here's an example to understand this concept:

E.g.:

x = {member:"foo"}

If you change the object with another object inside a function, you won't get the new object outside the function scope because you just create another object. The original reference is still bound to the original object:

function changeObject(x) {
  x = {member:"bar"};
}

changeObject(x);
alert(x.member)

output: foo

instead, if you alter a member inside a function, the object will be changed:

function changeMember(x) {
  x.member = "bar";
}

changeMember(x);
alert(x.member)

output: bar

Improve this answer

2 Comments

Do we have a reason for why this happens? Also, Is this termed as some particular phenomenon in Javascript?
I'd say that it is a mix of understanding scope and passing objects' reference. Further info here: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…
1

If you pass in a variable which is pointing to an object, it passes a reference to the object. If you pass in an object literal, then obviously no other class or function will be able to change that object.

Improve this answer

4 Comments

I beg to differ about your second sentence - the function could well save additional references to the object in question and make them available to other code outside the function. Whether an object was originally created via a literal is irrelevant.
Right Ok Thank you for the info, though I'm not sure what a object literal is. My experience with classes is lacking outside of a MVC Framework and moreso outside of javascript
@nnnnnn You're right of course, for some reason I hadn't taken into account the idea that the function might leak one of its parameters into global state. That'll teach me to fire off 20 second responses on SO.
@ChrisMorris What I was basically trying to say was that if you create an object as part of the function call then obviously you aren't passing a reference to an object that exists and was previously accessible from anywhere else. nnnnnn pointed out that actually the function could take that object and the store a reference to it in a global variable, or pass it off to some other function, and then a reference to that object would be accessible from somewhere else.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.