Javascript variable scope and referencing

Question

I'm trying to figure this javascript variable referencing issue out. Here is a fiddle to demonstrate what I'm about to explain: http://jsfiddle.net/XpVb5/1/

I have an object that I want to define and call within a separate object's properties.

var vals = {'something':1};  //original object
var buf  = {'field1': vals, 'field2': vals};  //second object with original object used as properties

Now I want to change the something property for only field1, so naturally, I would do this:

buf.field1.something = 0;

However, this will also change field2's something property. I'm assuming that this is because of how Javascript references variables in the variable definition process. But, in either case, how can I get around this without explicitly calling {'something':0} each time I need to use it in a property definition; like so:

var buf = {'field1': {'something':0}, 'field2': {'something':1}};

This is more of a by-value/by-reference question than a scoping one. See, e.g. stackoverflow.com/questions/518000/… — Scott Mermelstein
– Scott Mermelstein, Commented Nov 12, 2013 at 22:22

Community · Accepted Answer · 2017-05-23 11:50:08Z

3

You need to create a copy of the vals object. Currently you're just providing a reference to the object in both places. When you modify the base object, the change appears in both buf's (field1 + field2) because they only provide a reference to the base object.

Note: I'm using JSON.parse(JSON.stringify($vals)) as a quick example on how to copy the $vals object.

var $vals   = {"something":1},
    buf     = {"field1": JSON.parse(JSON.stringify($vals)), "field2": JSON.parse(JSON.stringify($vals))};

//change the 'something' field for one of the buf properties
buf.field1.something = 0;

//see if the 'something' field changed for the other buf property
alert( buf.field2.something );

http://jsfiddle.net/XpVb5/2/

Gives

Further reading: "The most elegant way to clone an object"

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Nov 12, 2013 at 22:19

Nick Grealy

26.2k9 gold badges112 silver badges127 bronze badges

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

2 Comments

sadmicrowave Over a year ago

What if my object was a jquery DOM object? Wouldn't that break?

Nick Grealy Over a year ago

At the end of the day, if you want to update two separate objects independently, you'll need to have two separate instances of your object. How you get two instances is up to you!

charlietfl · Accepted Answer · 2013-11-12 22:21:27Z

1

Can change $vals to a function that returns an object. Each return will be a different instance

var $vals = function(){
    return {"something":1}
}
var  buf     = {"field1": $vals(), "field2": $vals()};

//change the 'something' field for one of the buf properties
buf.field1.something = 0;

//see if the 'something' field changed for the other buf property
alert( buf.field2.something );

DEMO

answered Nov 12, 2013 at 22:21

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Javascript variable scope and referencing

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest