Javascript - How to change object properties without reassignment

Question

Below is a snippet below doubt.

var foo = 'something' var baz = 'other thing' var obj = { prop1 : 'my prop', prop2 : foo, //referencing external variable prop3 : baz //referencing external variable } // here we get the expected obj to be printed console.log(obj) // now I change one of the initial variable foo = 'changed' // here we get the sabe print as the first, that is the ~problem~ console.log(obj) 

So how to print "changed" to prop2 without reassigning obj.prop2 = foo

Answer 1

When you do

 var obj = { prop1 : 'my prop', prop2 : foo, //referencing external variable prop3 : baz //referencing external variable } 

There is no current relationship between prop2 and the variable foo (or prop3 and baz ). All that happens is that the current value of foo is read and stored in prop2 (and the same for baz and prop3 ).

If you need prop2 and prop3 to stay connected with foo and baz , you can make them properties using getters. These are the properties that call the function when they are read (there are also setters that call the function when the property is set):

 var obj = { prop1 : 'my prop', get prop2() { return foo; }, get prop3() { return baz; } }; 

Access to obj.prop2 is a call to a hidden function. Since the function closes above foo , it returns the current value of foo .

Live example:

 var foo = 'something'; var baz = 'other thing'; var obj = { prop1 : 'my prop', get prop2() { return foo; }, get prop3() { return baz; } }; console.log(obj); foo = 'changed'; console.log(obj); 

Answer 2

Since JavaScript is passed by value, not by reference, you cannot override the previous value by assigning it directly to a variable.

You can, although make an object, and change the property of the object as follows:

 var foo = {value: 'something'} var baz = 'other thing' var obj = { prop1 : 'my prop', prop2 : foo, //referencing external variable prop3 : baz //referencing external variable } console.log(obj) foo.value = 'changed' console.log(obj) 

Answer 3

Here's what happens:

• The string "changed" is assigned to the variable foo
• The value foo assigned to obj.prop2
• Since this value is a string (unlike an array, an object), obj.prop2 just gets the value. It does not receive a link to foo, because these types of values ​​(string, integer, boolean) can be stored in obj as is.

Now try the same thing with a different type:

 var bloop = [1, 2, 3]; obj.prop4 = bloop; console.log(obj.prop4); // [1, 2, 3] bloop.push(4); console.log(bloop); // [1, 2, 3, 4] console.log(obj.prop4); // [1, 2, 3, 4] 

In this case, what we assign to obj.prop4 is not a value of type string, integer or boolean. Instead, we assign a reference to an array stored elsewhere in memory. bloop and obj.prop4 both contain a reference to the same array in memory, so if the array is updated, both will be updated.

This works both ways:

 obj.prop4.push(5); console.log(obj.prop4); // [1, 2, 3, 4, 5] console.log(bloop); // [1, 2, 3, 4, 5] 

So, if you are dealing with values ​​such as string, ints, booleans, you cannot change the properties of the object as you describe. It will work only when the property of the object is a reference to an array, object, etc.

Answer 4

You get only the values ​​of the variables, not binding the variables themselves:

 var foo = 'something' var baz = 'other thing' var obj = { prop1 : 'my prop', prop2 : foo, //getting the value of external variable prop3 : baz //getting the value of external variable } console.log(obj) // change the value of prop2 obj.prop2 = 'changed' console.log(obj)