Incomprehensible object reassignment in javascript

Question

I've been looking at the examples of this game engine and I really don't understand why it reassigns the object, I code in java and I'm learning javascript, it may be a concept error.

example https://blacksmith2d.io/Docs/Examples/Arcade-Physics/CollisionEvents

onassetsLoaded() event he is setting object properties and then reassign it again below.

this.arcade = arcade;
this.circle = circle;
this.box = box;

also i don't understand this part on if statement

!this.circle 

Answer 1

About these statements:

this.arcade = arcade;
this.circle = circle;
this.box = box;

Earlier in that block of code, all variables that occur at the right side were defined as local variables (local to the method onAssetsLoaded ):

const arcade = ...
const circle = ...
const box = ...

So the assignments that have you wondering are in fact copying references from local variables to instance variables (ie properties). This is needed to not lose this information once the onAssetsLoaded call has completed.

As to this expression:

!this.circle 

The not-operator ( ! ) can be used on any expression. It evaluates to true when the operand is "falsy". In JavaScript values like undefined , null , 0 , "" , NaN , are considered "falsy", while all objects are considered "truthy". Here it is used to detect that this.circle has not been assigned a proper value, ie it would mean that onAssetsLoaded had not yet been called, and this.circle was still undefined .

Answer 2

Java and Javascript are as similar as a Car and a Carpet https://stackoverflow.com/a/245068/1897495 :-). The knowledge that you have acquired in Java cannot be directly transposed.

Unlike in Java, access to objects properties are explicit in Javascript: the use of this. is mandatory. The same goes when calling methods from the same class (you need to use this. )

class SomeClass {
   constructor() {
       this.param1 = 42;
   }

   localAndParameter(param1) {
       console.log(this.param1); // prints "42"
       console.log(param1); // prints "666"
   }

   localAndGlobal() {
       console.log(this.param1); // still "42"
       console.log(param1); // prints 123
   }

   callMethods() {
       this.emptyMethod(); // this works
       emptyMethod(); // This would raise an exception if called
       // "emptyMethod" is undefined or something like that
   }

   emptyMethod() {
   }
}

const param1 = 123;
const obj = new SomeClass();
obj.localAndParameter(666);
obj.localAndGlobal();

Also the language is dynamic.

Properties can be added to objects at all times, not only when declared/constructed

class SomeClass {
   constructor() {
       // no properties created.
   }

   someMethod() {
       // everything is dynamic! I can create a property here
       this.newProperty = 23;
   }
}

const obj = new SomeClass()
console.log(obj.newProperty); // prints "undefined"
obj.someMethod();
console.log(obj.newProperty); // prints "23"