What does 'value is a reference' mean for JavaScript objects

Question

I was trying to understand passing of variables and objects in JavaScript, and came across this page.

It is explained that JavaScript objects are passed by value, but the value itself is a reference. Though I understood what was happening in the examples given on that page, I am still confused so as to why. Can anyone please explain what does "value itself is a reference" mean?

Answer 1

Some languages have a "pass by reference" concept for function arguments which means that when you call a function and pass in a variable by reference the function can modify the original variable to hold some other value - it has a reference to the original variable.

With "pass by value" when you call a function and pass in a variable the function only gets the value so can't change the original variable that was passed in.

JS only has "pass by value", however when you pass an object as a parameter the "value" is a reference to the original object such that the function can modify, create or delete properties of that object, but the function can't modify the original variable to refer to some other object or value.

Example:

function changeObj(someObj) {
    someObj.a = 1000;
    someObj.c = "test";

    someObj = { "x" : 5 };
    console.log(someObj);   // { "x" : 5 }
}

var o = { "a" : 1, "b" : 2 };
changeObj(o);
console.log(o);   // { "a" : 1000, "b" : 2, "c" : "test" }

The code I've shown creates a variable, o, that references an object with a and b properties. It then calls the function changeObj and passes in o. The function changes the value of the a property and creates a new c property - the function is modifying the same object that variable o refers to because it has a reference to that object. But then the function assigns someObj equal to a completely new object. This does not affect o at all because the function only had a reference to the object o was pointing at, it didn't have access to the o variable itself.

Answer 2

Like Java, Python, and many other languages, in JavaScript, objects are not values.

What that means is that, when you evaluate an expression, the value you get from that is either a primitive or a reference (a reference is a pointer to an object). When you create an object, that expression evaluates to a reference. When you access a field of an object or call a method on an object, the thing on the left is a reference. Basically, anything you do with objects must be done through a reference to the object. There is no syntax for dealing with objects directly.

You cannot have a variable whose value "is" an object (unlike C++, where you can have both a variable whose value is an object, and a variable whose value is a pointer that points to an object); you can only have a variable whose value is a reference that points to an object.

This is apparent from the fact that when you assign a variable, a new object is never created. When you assign a reference, the assigned variable has a copy of the value of the original reference, and thus points to the same object as the original reference. There is nothing that you can put in a variable that causes assigning it to create a new object.

So if someone says "pass an object to a function", I say, No, you cannot pass an object, because objects are not values. You must be passing a reference to an object. Like in assignment, when you pass a reference, the value of it is copied. JavaScript is always pass-by-value.

Answer 3

It is explained that JavaScript objects are passed by value, but the value itself is a reference.

That's rather confusing wording. What they mean is that when objects are passed to functions, the reference value which points to the object is passed instead of the actual object.