Asp Forum - Refer object within itself

Andrew Poulos

2/26/2016 11:51:00 AM

Say I have this object

var foo {
"name":"bar"
"width":600
}

and I want to add another element that references a value within the
object itself. eg

var foo {
"name":"bar"
"width":600,
"height": width * 2
}

Both
"height": this.width * 2
and
"height": foo.width * 2

return errors or undefined.

How do I reference to the object itself within the object?

Or should it be done line this

var foo {
"name":"bar"
"width":600
}
foo.height = foo.width * 2;

Andrew Poulos

31 Answers

Scott Sauyet

2/26/2016 12:51:00 PM

On Friday, February 26, 2016 at 6:50:56 AM UTC-5, Andrew Poulos wrote:
> Say I have this object
>
> var foo {
> "name":"bar"
> "width":600
> }
>
> and I want to add another element that references a value within the
> object itself. eg
>
> var foo {
> "name":"bar"
> "width":600,
> "height": width * 2
> }

One approach:

var foo = (function() {
var width = 600;
return {
name: 'bar',
width: width,
height: 2 * width
}
}());

Evertjan.

2/26/2016 1:15:00 PM

Scott Sauyet <scott.sauyet@gmail.com> wrote on 26 Feb 2016 in
comp.lang.javascript:

> On Friday, February 26, 2016 at 6:50:56 AM UTC-5, Andrew Poulos wrote:
>> Say I have this object
>>
>> var foo {
>> "name":"bar"
>> "width":600
>> }
>>
>> and I want to add another element that references a value within the
>> object itself. eg
>>
>> var foo {
>> "name":"bar"
>> "width":600,
>> "height": width * 2
>> }
>
> One approach:
>
> var foo = (function() {
> var width = 600;
> return {
> name: 'bar',
> width: width,
> height: 2 * width
> }
> }());

var foo = { 'name': 'bar','width': 600 };
foo.height = foo.width * 2;

or:

var foo = {};
foo.name = 'bar';
foo.width = 600;
foo.height = foo.width * 2;

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

ram

2/26/2016 2:14:00 PM

Scott Sauyet <scott.sauyet@gmail.com> writes:
>> and I want to add another element that references a value within the
>> object itself. eg
>> var foo {
>> "name":"bar"
>> "width":600,
>> "height": width * 2
>> }
>One approach:
> var foo = (function() {
> var width = 600;
> return {
> name: 'bar',
> width: width,
> height: 2 * width
> }
> }());

var alpha = new Proxy( {}, { get: function( target, name )
{ return name === "height" ? target.width * 2 : target[ name ]; }});

alpha.width = 100;

console.log( alpha.height );

Christoph M. Becker

2/26/2016 3:43:00 PM

Andrew Poulos wrote:

> Say I have this object
>
> var foo {
> "name":"bar"
> "width":600
> }
>
> and I want to add another element that references a value within the
> object itself. eg
>
> var foo {
> "name":"bar"
> "width":600,
> "height": width * 2
> }
>
> How do I reference to the object itself within the object?

AFAIK, you can't. You may consider to employ a "constructor" function
instead:

function makeFoo(name, width) {
return {name: name, width: width; height: 2 * width};
}

makeFoo("bar", 600);

--
Christoph M. Becker

Thomas 'PointedEars' Lahn

2/26/2016 6:23:00 PM

Andrew Poulos wrote:

> Say I have this object
>
> var foo {
^
> "name":"bar"
> "width":600
> }
>
> and I want to add another element that references a value within the
> object itself. eg
>
> var foo {
^
> "name":"bar"
> "width":600,
> "height": width * 2
> }
>
> Both
> "height": this.width * 2
> and
> "height": foo.width * 2
>
> return errors or undefined.

They do because â??widthâ? has to be resolved *before* the object is
constructed and a reference to it is assigned to â??fooâ? (had you used the
assignment operator). Keep in mind that the above (if written correctly)
is functionally equivalent to:

var o = new Object();
o.name = "bar";
o.width = 600;

/* or this.width or foo.width, respectively */
o.height = width * 2;

foo = o;

> How do I reference to the object itself within the object?

The reason that your approach does not work is that you are _not_ â??within
the objectâ? there.

> Or should it be done line this
>
> var foo {
^
> "name":"bar"
> "width":600
> }
> foo.height = foo.width * 2;

Certainly not, as that would be a syntax error as well ;-)

You can write it thus:

var foo = (function () {
var width = 600;

return {
name: "bar"
width: width,
height: width * 2
};
}());

That is not necessarily what you want, because the value of the â??heightâ?
property is then not *bound* to the value of the â??widthâ? property of the
same object: if the â??widthâ? property value changes, the â??heightâ? property
value does not change with it.

Without Proxy (ECMAScript 2015+) â?? see Stefan Ramâ??s answer â??, you can define
this relationship in a more compatible way using a getter (ECMAScript Ed.
5+):

var foo = Object.create(Object.prototype, {
name: {
value: "bar",
configurable: true,
enumerable: true,
writable: true
},
width: {
value: 600,
configurable: true,
enumerable: true,
writable: true
},
height: {
"get": function () {
return this.width * 2;
},
configurable: true,
enumerable: true
}
});

or, less explicit:

var foo = Object.defineProperty(
{
name: "bar",
width: 600
},
"height",
{
"get": function () { return this.width * 2; },
configurable: true,
enumerable: true
}
);

(Getters and Setters have been supported in various ways even before
ECMAScript Ed. 5; see JSX:object.js for a wrapper implementation.)

You can use â??nullâ? instead of â??Object.prototypeâ? if you do not want your
object to inherit any properties, and you can omit definitions for the
â??configurableâ?, â??enumerableâ?, and â??writableâ? properties if you want the
property to be not configurable, enumerable, or writable, respectively.

Note that such an accessor property with only a getter is read-only, until
you reconfigure it (which is only possible if it is also configurable) to
have a setter (in which case the new getter needs to return, and the new
setter needs to write a value of another property or variable), or to have a
value instead (in which case it also should be defined as writable).

Therefore, another alternative is

var foo = (function () {
var width = 600;

return Object.defineProperties({name: "bar"}, {
width: {
"get": function () { return width; },
"set": function (value) { width = value; },
configurable: true,
enumerable: true
},
height: {
"get": function () { return width * 2; },
configurable: true,
enumerable: true
}
});
}());

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Thomas 'PointedEars' Lahn

2/26/2016 6:25:00 PM

Christoph M. Becker wrote:

> Andrew Poulos wrote:
>> and I want to add another element that references a value within the
>> object itself. eg
>>
>> var foo {
>> "name":"bar"
>> "width":600,
>> "height": width * 2
>> }
>>
>> How do I reference to the object itself within the object?
>
> AFAIK, you can't. You may consider to employ a "constructor" function
> instead:
>
> function makeFoo(name, width) {
> return {name: name, width: width; height: 2 * width};
> }
>
> makeFoo("bar", 600);

No, that is not necessary, and maybe also not equivalent to what was
originally intended.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Ram Tobolski

2/28/2016 6:06:00 PM

Hello, this should work:

var foo = {
"name":"bar",
"width":600,
get height(){return this.width * 2;}
}

console.log(foo.height) // "1200"

Evertjan.

2/28/2016 10:08:00 PM

Ram Tobolski <ramtob@gmail.com> wrote on 28 Feb 2016 in comp.lang.javascript:

> Hello, this should work:
>
> var foo = {
> "name":"bar",
> "width":600,
> get height(){return this.width * 2;}
>}
>
> console.log(foo.height) // "1200"

Well, just "works", but not so nice, imho, is this:

var foo = {
'name':'bar',
'width':600,
get height(){return this.width * 2;}
};
alert(foo.height); // 1200
foo.height = 7;
// Uncaught TypeError: Cannot set property height of #<Object>
// which has only a getter

==========

and also not so nice, imho, is:

var vvv;
var foo = {
get height(){return vvv * 2;}
};
alert(foo.height) ; // NaN
vvv = 20;
alert(foo.height) ; // 40
vvv = 7;
alert(foo.height) ; // 14

==========

See:

<https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Fun...
>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

ram

2/28/2016 10:15:00 PM

"Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:
>// Uncaught TypeError: Cannot set property height of #<Object>
>// which has only a getter

Defining the setter was kindly left as an
exercise for the reader by Ram Tobolski,
so you might just give it a try!

Evertjan.

2/28/2016 10:23:00 PM

ram@zedat.fu-berlin.de (Stefan Ram) wrote on 28 Feb 2016 in
comp.lang.javascript:

> "Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:
>>// Uncaught TypeError: Cannot set property height of #<Object>
>>// which has only a getter
>
> Defining the setter was kindly left as an
> exercise for the reader by Ram Tobolski,

This being a discussiongroup,
why guess at the level of kindness of a single poster?.

> so you might just give it a try!

Well, I just did, and being tested I found that it gives additional errors,
unforseen by the unwary, because it is not an equivalent to defining an
objects element, so I think it is not a nice way to implement the problem at
hand.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

comp.lang.javascript

Refer object within itself

Andrew Poulos

Scott Sauyet

Evertjan.

ram

Christoph M. Becker

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Ram Tobolski

Evertjan.

ram

Evertjan.

x Login to ForumsZone