Creating Javascript object based on one of its own variable?

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?

possible duplicate of [JavaScript: Access own Object Property inside Array Literal](http://stackoverflow.com/questions/3330686/javascript-access-own-object-property-inside-array-literal) (ignore the array literal part, it's the same problem). — Felix Kling, Mar 08 '12 at 21:56
Also duplicates of http://stackoverflow.com/questions/3392033/referencing-other-properties-in-object-creation, http://stackoverflow.com/questions/7433395/object-referencing-its-own-property-on-initilization, http://stackoverflow.com/questions/4616202/self-references-in-object-literal-declarations — Felix Kling, Mar 08 '12 at 21:59
Do you want it calculated once, or should it be recalculated on the fly? — , Mar 08 '12 at 22:00
Right now I want only once, but on the fly would be bonus, because in future if I change offsets based on some user event then it would be great. — bits, Mar 08 '12 at 22:03

Alex · Answer 1 · 2012-03-08T22:04:26.250

4

This won't be possible as already evident from the error message. Though, you could do the following:

var shapeContainer = {
    name : "bender",
    offsetX : 100,
    offsetY : 100,
    getwidth : function() { return screenWidth - 2 * this.offsetX },
    getheight : function() { return screenHeight - 2 * this.offsetY },
};

http://jsfiddle.net/XQGDB/

edited Mar 08 '12 at 22:04

answered Mar 08 '12 at 21:56

Alex

34,899
5
77
90

score 2 · Answer 2 · answered Mar 08 '12 at 22:03

As an addition to Xander's answer: It is also possible, to use only one function that wraps around the whole object at once.

var shapeContainer = new function() {
    this.name = "bender";
    // ...
    this.width = screenWidth - 2 * this.offsetX;
};

score 1 · Accepted Answer · answered Mar 08 '12 at 22:16

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;

Very elegant! Maybe I was just looking for this kind of getter concept. Thanks. — bits, Mar 08 '12 at 22:24

score -1 · Answer 4 · answered Mar 08 '12 at 21:56

-1

You must use shapeComtainer.offsetX and shapeComtainer.offsetY

answered Mar 08 '12 at 21:56

botzko

630
3
8

2

`this` does not refer to the object though. – Felix Kling Mar 08 '12 at 21:57
@Felix Kling you are right but now it's work I test it on firefox – botzko Mar 08 '12 at 22:02
1

And how exactly are you using this? If in this way: `var a = {b: 42, c: a.b};` then it will not work. At the moment you want to access `shapeComtainer` (or `a` in this case), it does not exist yet. If you do it differently then you should post it. – Felix Kling Mar 08 '12 at 22:03
I use set this in firefox console: var screenWidth = 1280; var screenHeight = 720; var shapeComtainer = { name : "bender", offsetX : 100, offsetY : 100, width : screenWidth - 2*shapeComtainer.offsetX, height : screenHeight - 2*shapeComtainer.offsetY, }; console.info(shapeComtainer.width); //print 1080 – botzko Mar 08 '12 at 22:06
If you use that code, I get an error in Firefox as well, in the Web Console and Firebug... maybe `shapeComtainer` was already defined through your previous attempts. – Felix Kling Mar 08 '12 at 22:07
Hmm I receive the result because I declare shapeComtainer before. – botzko Mar 08 '12 at 22:10

Creating Javascript object based on one of its own variable?

4 Answers4