Question

Here is some javascript code that I have:

   var screenWidth = 1280;
   var screenHeight = 720;

   var shapeComtainer = {
    name : "bender",
    offsetX : 100,
    offsetY : 100,
    width : screenWidth - 2*offsetX,
    height : screenHeight - 2*offsetY,
   };

I am getting the error offsetX and offsetY are not defined. This is in the lines where I am calculating width and height. The issue is that my width and height is dependent upon other variables inside the same object.

Is there a better/correct way to have a javascript object that represents information such as offsets and size information?

Answer 1

Just because no one mentioned it so far, this is also a prime example for ECMAscript5’s getter functions:

var defProps = Object.defineProperties;

var shapeComtainer = {
    name : "bender",
    offsetX : 100,
    offsetY : 100
};

defProps(shapeComtainer, {
    width: {
        get: function(){ return screenWidth - 2*this.offsetX; }
    },
    height: {
        get: function(){ return screenHeight - 2*this.offsetY; }
    }
});

And then you can just access it like:

shapeComtainer.height;