JavaScript - setting multiple variables to object properties does not change underlying value

Question

Recently, I have been working more with JavaScript and I cannot understand why the following happens. Rather than providing hundreds of lines of code, I have created a scenario that recreates the problem.

Issue:

Setting multiple variables to an object's properties does not change the object's underlying value.

Example:

DEMO

In the following example, I have created two classes:

//company
function Company(name, subsidiary) {
    var self = this;
    self.name = name;
    self.subsidiary = subsidiary;
};

//subsidiary
function Subsidiary(name, type) {
    var self = this;
    self.information = {
        name: name,
        type: type,
        type2: type
    };
}

Now, I do the following:

create a new company and add new subsidiary in the constructor:

define other variables related to the company/subsidiary properties

//new company
var company = new Company(
    'Company 1', [
        new Subsidiary('Subsidiary 1', 'small')
    ]),
    subsid = company.subsidiary[0], //get first subsidiary
    info = subsid.information, //get information
    type = info.type; //get type

The following code is where the problem lies:

When I try to change the variable type, the value within company does not change...

//does not work
type = 
    type === 'small' ?
    'large' :
    'small';

However, if I were to use info and reference the property type (info.type), the value changes...

//works
info.type2 =
    info.type2 === 'small' ?
    'large' : 
    'small';

I assumed since each variable derives from another, type would be equivalent to company.subsidiary[0].information.type, but that does not seem to be the case.

Am I missing something?

Any assistance would be greatly appreciated. Thank you!

Pointy · Accepted Answer · 2014-01-22 19:03:07Z

1

You've got an object with a property called "type". You fetch the value of that property and put a copy of that value in a local variable called "type". Subsequent changes to the local variable will not affect the object property value.

Your assumption:

I assumed since each variable derives from another, type would be equivalent to company.subsidiary[0].information.type

is not correct. The JavaScript assignment operator represents a value copy operation. Thus,

var type = info.type;

means that the value of the object property should be copied as the value of the variable. Thereafter, there is absolutely no special relationship between the variable and the object property.

Then, here:

var info = subsid.information;

you're establishing a variable called "info" with a copy of the value of that "information" property. What is that value? It's a reference to an object. That's why a subsequent update actually changes the value of the real property in the original object.

There's no direct way to make a simple local variable be an alias for an object property in JavaScript.

edited Jan 22, 2014 at 19:03

answered Jan 22, 2014 at 18:57

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dom Over a year ago

Thank you for taking the time to answer! I am still a little confused though. Wouldn't the variable info be a copy of company.subsidiary[0].information? Why would changing info.type change the value within company?

Pointy Over a year ago

Because you're explicitly updating the value of the object property. I'll add a little bit to the answer.

Dom Over a year ago

Thank you so much for taking the time to explain that! You did an amazing job at explaining what exactly is going on! Thanks again and I will accept your answer asap.

Pointy Over a year ago

@Dom well JavaScript can be really confusing because it looks more like other languages than it actually is!

Collectives™ on Stack Overflow

JavaScript - setting multiple variables to object properties does not change underlying value

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related