Context
A project I'm working on involves a scenario where a Shape class is triggering a function call SetPosition( x, y ) on a Drawer class. As part of this process, the Drawer class needs to retain the values (x, y) passed through SetPosition.
There could potentially be numerous shapes, resulting in multiple calls being made from a single user interaction.
I am contemplating the memory and garbage collection implications when using objects or classes versus literals for these calls.
Below are the specific details regarding different approaches.
Consistency Across Options
I apologize for utilizing class-like syntax in the code examples below; however, it has no impact on the core question. One can easily substitute the Class syntax with standard JS functions & prototype syntax if needed.
In all the options presented here, the shape class is initialized with a property shapeType that represents a new instance of an existing class ShapeType:
Shape = new Class({
// Initialization
initialize: function() {
this.shapeType = new ShapeType( 0, 0, 10, 10 );
}
});
Option 1 - Using Primitive Values
The Shape class:
Shape = new Class({
draw: function( drawerInstance ) {
drawerInstance.setPosition( this.shapeType.x, this.shapeType.y );
}
});
The Drawer class:
Drawer = new Class({
// Initialization
initialize: function() {
this.position = {
x: 0,
y: 0
};
},
setPosition: function( x, y ) {
this.position.x = x;
this.position.y = y;
}
});
Considerations
As far as I understand, there is no memory allocation involved in this option, so there shouldn't be any major concerns - it's pretty straightforward.
Option 2 - Utilizing Object Literals
The Shape class:
Shape = new Class({
draw: function( drawerInstance ) {
drawerInstance.setPosition( { x: this.shapeType.x, y: this.shapeType.y } );
}
});
The Drawer class:
Drawer = new Class({
// Initialization
initialize: function() {
this.position = {
x: 0,
y: 0
};
},
setPosition: function( newPosition ) {
this.position = newPosition;
}
});
Considerations
My query revolves around whether by using
drawerInstance.setPosition( { x: this.shapeType.x, y: this.shapeType.y } );
a new object gets created. Moreover, upon executing
this.position = newPosition;
wouldn't the previous object now be subject to garbage collection?
Option 3 - Leveraging Class Instances
The Shape class:
Shape = new Class({
draw: function( drawerInstance ) {
// shapeType.getPosition() returns a new Point( x, y );
drawerInstance.setPosition( this.shapeType.getPosition() );
}
});
The Drawer class:
Drawer = new Class({
// Initialization
initialize: function() {
this.position = new Point( 0, 0 );
},
setPosition: function( newPosition ) {
this.position = newPosition;
}
});
Considerations
Given that getPosition() provides a new point class instance (new Point( x, y )) it clearly indicates memory allocation involvement as illustrated here:
// shapeType.getPosition() returns a new Point( x, y );
drawerInstance.setPosition( this.shapeType.getPosition() );
It's evident that with this line:
this.position = newPosition;
the previous position object (class) would be cleared via garbage collection.
Does this hold any distinctions compared to option 2?
Considering this is the preferred approach for me (given that the Point class offers methods beneficial for other operations within setPosition) would it pose challenges considering the high volume of calls per user action (in contrast to options 1 and 2)?