How to prevent Javascript Class variable (this) inside Methode overtakes values from variables defined inside Method

Question

I was trying to make a small class, make a global variable inside the class and assign them a object. Inside the class inside methods i wanted to catch this values, works with them but the main object which i declared at the top i wanted to stay as it was initialized

Example Code

class testClass {
  myVarObject;
    
  constructor() { }
    
  methodOne() {
    this.myVarObject = {
      blo : 7
    }
    return this;
  }
    
  methodTwo() {
    const testVar = this.getMyObject();
    testVar.blo = 12;
    return this;
  }
    
  getMyObject() {
    return this.myVarObject;
  }
}
    
let myObject = new testClass();
myObject.methodOne().methodTwo();
console.log(myObject.getMyObject());

The output of the console debug is:

Object { blo: 12 }
blo: 12
<prototype>: Object { … }
debugger eval code:31:9

What i do not understand:

Why this.myVarObject.blo is now 12 and not 7? I didn't modified this.myVarObject but only testVar.blo . I am bit confused :)

When i modify my Variable "testVar" inside the Method "methodTwo", how i can prevent that "this.myVarObject" is overtaking this new values automatically? What i wanted to do with

testVar = this.getMyObject();

is to make a copy, modify it and return it as a result. But the main Variable (this.myVarObject) must stay as it is

What i have missed?

Thank you for your help

I don't think `testVar = this.getMyObject();` is making a copy. It's just passing the reference — Joacim Norbeck, Jul 28 '22 at 18:28

score 0 · Accepted Answer · answered Jul 28 '22 at 18:31

Why this.myVarObject.blo is now 12 and not 7? I didn't modified this.myVarObject but only testVar.blo.

Yes, you did modify this.myVarObject when you called const testVar = this.getMyObject(); and then called testVar.blo = 12;.

testVar is not a copy of myVarObject. It's a second reference to it, so when you modify testVar, you are modifying myVarObject.

This may be helpful.

score -1 · Answer 2 · answered Jul 29 '22 at 07:40

-1

Thank you for pointing to right direction!

While programming mostly in PHP i was not aware that variable = object is everytime a reference and not a clone.

I've solved it now with:

let variable = JSON.parse(JSON.stringify(object));

Thank you

answered Jul 29 '22 at 07:40

Sascha

1
2

Your solution won't work when the object in question contains methods as `JSON.stringify()` and `JSON.parse()` don't serialize object methods by default. Instead, you should use [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign). – Scott Marcus Jul 29 '22 at 09:09
But i understand it correctly (https://code.tutsplus.com/articles/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655) that Object.assign() do not copy it deep down?! My Object is like: let myObject = { a: { aa: 1 }, b: { bb: { bbb: 4} } } – Sascha Jul 29 '22 at 11:21
Then you should look at a technique that doesn't cause data loss like JSON will. Check out [this](https://dev.to/shadid12/the-most-efficient-ways-to-clone-objects-in-javascript-1phe) link and look at the "Deep cloning with custom function" option. – Scott Marcus Jul 29 '22 at 12:20

How to prevent Javascript Class variable (this) inside Methode overtakes values from variables defined inside Method

2 Answers2