Why are changes in an object no longer reflected after reassignment?

Question

I think I could best explain my confusion with code:

var options = {};

exports.options = options;
exports.options.a = "a";
console.log(exports.options, options);

exports.options = {};
console.log(options, exports.options);

The first output is:

{ a: "a" } { a: "a" }

Great, it looks like anything done to exports.options will be done to options! But the second output is:

{ a: "a" } {}

What happened? Why is options not also {}? What can I do to “empty” exports.options which also empties options?

The same goes with:

options = {};
console.log(options, exports.options);

Which outputs:

{} { a: "a" }

Because `options` still points to the original object. `exports.options = {};` makes a new object, it doesn't modify the old one or point any other variables to the new one. — Alexander O'Mara, Dec 15 '14 at 02:12
Closely related: [Variable re-assignment of object reference leaves other object unaltered (no “transitive” assignment)](/q/41814414/4642212). — Sebastian Simon, Jan 29 '23 at 13:10

Peter Olson · Answer 1 · 2014-12-15T02:23:57.757

1

When you do this,

exports.options = options;

you are assigning a reference of the object associated wtih options to exports.options.

When you change it again,

exports.options = {};

you are assigning a new reference to exports.options without changing options.

edited Dec 15 '14 at 02:23

answered Dec 15 '14 at 02:13

Peter Olson

139,199
49
202
242

If I replace `exports.options = {};` with `options = {};`, I still get the same behavior. – Jürgen Paul Dec 15 '14 at 02:21
@PineappleUndertheSea Then you're changing what object `options` refers to without changing the object that `exports.options` refers to. – Peter Olson Dec 15 '14 at 02:24

score 0 · Answer 2 · answered Dec 15 '14 at 02:13

You can understand by the following code

var options = {};  // Let's say Ref1
exports.options = options; // Ref1 passed to exports.options
exports.options.a = 'a'; // still Ref1 
console.log(exports.options, options); // So both will be updated
exports.options = {}; // New reference say Ref2, which has nothing to do with Ref1
console.log(options, exports.options); // Therefore changing Ref2 doesn't affect Ref1

When you are doing exports.options = {}; the first reference is destroyed and a new reference gets stored, which is in no way connected to the first reference. So options which has a separate reference, which still represents {a : 'a'} does not get affected.

If I replace `exports.options = {};` with `options = {};`, I still get the same behavior. — Jürgen Paul, Dec 15 '14 at 02:21

score 0 · Answer 3 · answered Dec 15 '14 at 02:17

When dealing with reference variables (which includes variables that point to objects), it's helpful to think of a variable as a box that holds a value.

You start off with one box called options that holds an empty object. You also have a box called exports. Inside the exports box, you put another box called options...that contains the same object that options contains (this is where the physical box analogy starts is strained, but just imagine that two boxes can contain the same physical thing).

The variable name is simply the name written on the box. So now you have three boxes:

Box options containing empty object X (I'm arbitrarily calling it X)
Box exports containing...
- Another box labeled options that also contains object X

When you do the assignment exports.options = {}, all you are doing is putting something different in that box, in this case, a new object Y. So now you have:

Box options containing empty object X (I'm arbitrarily calling it X) Box exports containing... Another box labeled options that contains object Y

So you can see that options and exports.options options point to different things, even though their names are the same.

Why are changes in an object no longer reflected after reassignment?

3 Answers3

Linked