-4

Consider I have an object name x having value x = { a: 'abc', b: 'jkl' },

Now I'm assigning this object x to new local variable y by var y = x.

when var y value change with new value y.a = 'pqr', y.b = 'xyz', var x object auto updates with new value { a: 'pqr', b: 'xyz' } of var y.

This is the good scenario but in some cases I want to prevent that. How can I achieve this?

You can find plunker code for this here

Hardik
  • 3,038
  • 2
  • 19
  • 31
  • 4
    *"`var x` object auto updates with new value"* No it does not. – Robby Cornelissen Jan 29 '18 at 07:21
  • I don't think `var x` will auto update in this case, please share a snippet to replicate this! – gurvinder372 Jan 29 '18 at 07:21
  • Don't confuse `y = {a: 'pqr'}` and `y['a'] = 'pqr'`. Very different, these two. – Sergio Tulentsev Jan 29 '18 at 07:23
  • @RobbyCornelissen Why, yes, it actually does, and there are very good duplicate targets against that behaviour. Sadly, Y'all have incorrectly closed it as unclear. If this gets reopened, here's a dupe: https://stackoverflow.com/questions/18359093/how-to-copy-javascript-object-to-new-variable-not-by-reference or https://stackoverflow.com/q/728360/576767. There's a 2.5k+ upvotes question that explains that behaviour, how can you say it doesn't happen? – Félix Adriyel Gagnon-Grenier Jan 29 '18 at 14:01
  • @FélixGagnon-Grenier The question has been edited long after my comment. Look at the edit history for the original. – Robby Cornelissen Jan 29 '18 at 14:02
  • @RobbyCornelissen Good point. Let's just reopen then. – Félix Adriyel Gagnon-Grenier Jan 29 '18 at 14:04
  • @FélixGagnon-Grenier Why? You just pointed out that there are already two duplicates. – Robby Cornelissen Jan 29 '18 at 14:05
  • @RobbyCornelissen so we can actually close them as duplicates. This is not an unclear question. Moreover, the original asks very much the same question, the revision added bold and a code sample, but the question was already there. – Félix Adriyel Gagnon-Grenier Jan 29 '18 at 14:05
  • 1
    @FélixGagnon-Grenier Might as well just vote to delete it. The original does *not* ask the same question. The original completely assigns a new object to `y` and then claims that this impacts `x`. – Robby Cornelissen Jan 29 '18 at 14:07

2 Answers2

1

There are two ways to prevent that:

1 - Object.assign:

var x = { a: 'abc', b: 'jkl' }
var y = Object.assign({}, x);
y.a = 'modified';
console.log('x: ', x);
console.log('y: ', y);

2 - Spread operator:

var x = { a: 'abc', b: 'jkl' }
var y = { ...x };
y.a = 'modified';
console.log('x: ', x);
console.log('y: ', y);
Faly
  • 13,291
  • 2
  • 19
  • 37
  • That only takes care of one level. When you try this and then do `y.one.two` then you mutate x because `y.one` will still be a reference to `x.one` – HMR Jan 29 '18 at 08:16
1

In the described scenario, y gets a new object and x remains.

It would be different, if you update some properties of x or y, then both references the same object with the update.

var x = { a: 'abc', b: 'jkl' };
    y = x;

y = { a: 'pqr', b: 'xyz' };

console.log(x);
console.log(y);
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392