Does a Javascript function return objects by reference or value by default?

Question

I have an object defined outside the function, in a global scope. This object is not passed into the function as an argument, but the function does modify it and return the modified object.

What I wanted to know is, if the function returns a copy of the object, or the original global object?

Also, will passing that object to the function as an argument, make a difference, since objects are passed into functions by reference?

Answer 1

Whenever you're returning an object, you're returning a reference to the object. Likewise, when you're passing an object, you're passing a reference. However, passing an object in as an argument can be different than just changing an object in global scope, as these examples show. This is because the reference to the object is itself passed by value.

If you're changing the members of an object, then whether you pass it in as an argument or just update the global object makes no difference. Either way, you're working with the same object.

Example 1:

var object = {foo:'original'};

function changeObject() {
    object.foo = 'changed';
    return object;
}

console.log(changeObject()); // outputs {foo:'changed'}
console.log(object); // outputs {foo:'changed'}

Example 2:

var object = {foo:'original'};

function changeArgument(object) {
    object.foo = 'changed';
    return object;
}

console.log(changeArgument(object));  // outputs {foo:'changed'}
console.log(object);  // outputs {foo:'changed'}

On the other hand, if you're overwriting the object with a new object, the change won't persist if you do it to the argument, but will persist if you do it to the global object. That's because the argument passes the reference to the object by value. Once you replace this value with a reference to a new object, you're not talking about the same object anymore.

Example 3:

var object = {foo:'original'};

function replaceObject() {
    object = {foo:'changed'};
    return object;
}

console.log(replaceObject()); // outputs {foo:'changed'}
console.log(object); // outputs {foo:'changed'}

Example 4:

var object = {foo:'original'};

function replaceArgument(object) {
    object = {foo:'changed'};
    return object;
}

console.log(replaceArgument(object)); // outputs {foo:'changed'}
console.log(object); // outputs {foo:'original'}

Answer 2

May be late comment, but this is typical challenge in any language. Objects created on the heap and passed around by reference opposed to primitives(by value). I think the root of the question is shared instance versus unique one to avoid unwelcome effects. For example we calling a function to get a template(object) for new user to add to collection or want to clear the form on cancel event from different modules to start over. It easy to understand and easy to overlook..test cases typically not covering all usage permutations

The sanity checklist:

Here the shared instance:

var bigo = {
    usr: { name: 'steven' },
    bigi: function () {
        return this.usr;
    }
};   
var outA = bigo.bigi();
var outB = bigo.bigi();

print(outA.name); // => steven
print(outB.name); // => steven

outA.name = 'ilan'; // change value

print(outA.name); // => ilan
print(outB.name); // => ilan

Non shared instance:

var bigo = {
    bigi: function () {
        var user = { name: 'steven' };
        return user;
    }
};   

var outA = bigo.bigi();
var outB = bigo.bigi();

print(outA.name); // => steven
print(outB.name); // => steven

outA.name = 'ilan'; // change value

print(outA.name); // => ilan
print(outB.name); // => steven

Answer 3

What I wanted to know is, if the function returns a copy of the object, or the original global object?

Effectively, you only ever deal with references to objects in JavaScript. Even var foo = {} just assigns a reference to a new object to foo.

Answer 4

If the object is outside the function, you don't need to 'return' it. If you modify the object within the function it will update the object itself. Then you can reference the newly updated object in other functions as needed.

Answer 5

From your question this is how I think your code looks (more or less):

var o = {};

function f() {
    o.prop = true;
    return o;
}

1. In this case the global variable o references an object.
2. When you modify o you're modify whatever o references. Hence it modifies the original object.
3. When you return o you're returning a reference to the original object.

Passing the object to a function results in the reference to the original object being passed. Hence any modifications will affect the original object. For example:

var o = {};

f(o);

console.log(o.prop); // true

function f(o) {
    o.prop = true;
}