CODEWITHSUNDEEP
javascriptreferencejavascript-objectsvariable-assignment
Jürgen Paul
Jürgen Paul

Reputation: 15007

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

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" }

Upvotes: 0

Views: 61

Answers (3)

Peter Olson
Peter Olson

Reputation: 142921

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.

Upvotes: 1

Ethan Brown
Ethan Brown

Reputation: 27282

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.

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

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.

Upvotes: 0

Related Questions