-2

how can I achieve below things in javascript

var parent = {
  a: 5,
  b: 6
}

var child = parent;
console.log(child.b); // 6

//now if I change the value of b
parent.b = 7

console.log(parent.b); //7
console.log(child.b); //7

//but I want to preserve the previous value of the object property it should not change now.it should show 6 instead of 7 in case of console.log(child.b)

https://codebunk.com/b/696347863/

user3647491
  • 45
  • 5
  • There is no inheritance going on here. You're looking to clone the object. – CertainPerformance Jul 09 '19 at 10:51
  • 2
    Your code has nothing to do with inheritance or prototypes. – Quentin Jul 09 '19 at 10:51
  • **Important:** you're maintaining two references which point to the same value in memory. So, every change in any of those two references will modify the value in memory. – Ele Jul 09 '19 at 10:52
  • `var child = JSON.parse(JSON.stringify(parent));` – Lain Jul 09 '19 at 10:52
  • 2
    @Lain - That's an **extremely** poor way to duplicate an object. It fails in lots of ways and makes a completely unnecessary pass through *text*. – T.J. Crowder Jul 09 '19 at 10:53
  • The fundamental thing here is that there is no parent/child or inheritance relationship here at all. As @Ele pointed out, `var child = parent;` makes both the `child` variable and the `parent` variable point to the **same** object. So naturally any change you make to that object will be visible whether you look at that (one) object through your `child` or `parent` variable. **If** your goal with `var child = parent;` was to create a copy, see the linked question's answers. If your goal was to create some kind of inheritance relationship, you wouldn't do it that way... – T.J. Crowder Jul 09 '19 at 10:54
  • ...you'd use `var child = Object.create(parent);` instead, which creates a new object that uses `parent` as its prototype. More: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create But if you do that and change `parent.b`, since `child` doesn't have its own `b`, you'll still get `7` for `child.b` (since `b` is inherited). – T.J. Crowder Jul 09 '19 at 10:55
  • @CertainPerformance the dupe question only explains how to clone rather than explaining what to do for solving the real problem. – Ele Jul 09 '19 at 10:56
  • 2
    @Ele - Based on what the OP says they want (assigning to `parent.b` not to affect the value of `child.b`), cloning the object rather than just referring to it is the real problem. The OP's mention of inheritance and such is, I think, a red herring. (Not sure I fully agree with the closure, but I don't *disagree* enough to unclose it myself, esp. in light of the `parent.b`/`child.b` thing. :-) ) – T.J. Crowder Jul 09 '19 at 11:00
  • @Ele - I do think your comment (and mine afterward) are critical to helping the OP understand *why* they need to make a copy. (E.g., because `child = parent` doesn't. :-) ) – T.J. Crowder Jul 09 '19 at 11:02
  • 1
    @T.J.Crowder I know, but the OP has a lack of knowledge on what is really happening when s/he only assigns an object to a variable. – Ele Jul 09 '19 at 11:02
  • 1
    @Ele - Yes, wholeheartedly agree. – T.J. Crowder Jul 09 '19 at 11:03
  • Related: https://stackoverflow.com/questions/41255297/why-does-this-function-mutate-data That's an array, but arrays are objects in JavaScript. – T.J. Crowder Jul 09 '19 at 11:05
  • Related: https://stackoverflow.com/questions/24586423/javascript-why-assigning-a-variable-to-an-object – T.J. Crowder Jul 09 '19 at 11:06
  • @T.J.Crowder what about this: https://stackoverflow.com/questions/50840293/setting-a-variable-equal-to-another-variable – Ele Jul 09 '19 at 11:06
  • @T.J.Crowder then what is the solution – user3647491 Jul 09 '19 at 11:12
  • 1
    @Ele - Looks great to me. – T.J. Crowder Jul 09 '19 at 11:17
  • @user3647491 - As far as I can tell, the solution to your question is: Make a copy of the object. See the answers to the questions [here](https://stackoverflow.com/questions/122102/) and [here](https://stackoverflow.com/questions/728360/). – T.J. Crowder Jul 09 '19 at 11:18

1 Answers1

0

When you do var child = parent both child and parent refer to the same object instance in memory. If you want to copy the property of parent to the child you need to create a new object with the same keys as the parent object. You can use spread ... or object.assign for this

var parent = {
  a: 5,
  b: 6
}

var child = {...parent};
var child1 = Object.assign({}, parent);

console.log(child.b); // 6
console.log(child1.b); // 6

//now if I change the value of b
parent.b = 7

console.log(parent.b); //7
console.log(child.b); //6
console.log(child1.b); //6

For deep cloning, we need to use other alternatives because Object.assign() and ... copies property values. If the source value is a reference to an object, it only copies that reference value.

Ashish
  • 4,206
  • 16
  • 45
  • 1
    This is not a totally cloning approach, this is just spreading the first level of the object. – Ele Jul 09 '19 at 11:08
  • 1
    @T.J.Crowder I have removed that line. I was not talking in those terms. Although yes it sounds confusing if you think it like that. – Ashish Jul 09 '19 at 11:20
  • var child = {...parent}; SyntaxError: Unexpected token ... at createScript (vm.js:56:10) at Object.runInNewContext (vm.js:93:10) – user3647491 Jul 09 '19 at 11:22
  • @user3647491 The editor is giving you this error, It Might be the case that editor doesn't support ES6 syntaxes although it is completely a valid syntax. You can use `Object.assign()` instead of `...` if it helps. – Ashish Jul 09 '19 at 11:25