Javascript creating object properties using existing object property

Question

This is what I would like to do

var myObject = {
  prop: "872349827194721934798",
  calcProp: (this.prop.length % 3),
  method1: function () { return this.calcProp; },
  method2: function () { return this.calcProp - 1; }
}

However it returns an error "this.prop is undefined".

Below works:

var myObject = {
  prop: "872349827194721934798",
  calcProp: function () {this.prop.length % 3;},
  method1: function () { return this.calcProp(); },
  method2: function () ( return this.calcProp() - 1;}
}

Now the usage of calcProp is myObject.calcProp()' and I want the usage to bemyObject.calcProp`. I know this will work.

var myObject = {
  init: function () { this.calcProp = this.prop.length % 3; },
  prop: "872349827194721934798",
  calcProp: null,
  method1: function () { 
    this.init();
    return this.calcProp; 
  },
  method2: function () { 
    this.init();
    return this.calcProp - 1;
  }
}

Is there a way to implement calcProp where the usage is Object.calcprop. Without calling an init().

EDITED - Additional Requirement

Note: Should have added to my requirements that I would like to try to stay away from modifying the properties outside of the initial definition. I do not want to do the following;

var myObject = {
  prop: "872349827194721934798",
  method1: function () { return this.calcProp; },
  method2: function () { return this.calcProp - 1; }
};
myObject.calcProp = (myObject.prop.length % 3);

I would like to keep it all in the initial definition.

possible duplicate of Self-references in object literal declarations — Felix Kling
– Felix Kling, Commented Oct 21, 2011 at 18:31
@FelixKling No this is not a duplicate because I do not want to create an init function. I like the solution that Daniel Earwicker provided. — John Hartsock
– John Hartsock, Commented Oct 21, 2011 at 18:39
@JohnHartsock: your I would like to try to stay away from modifying the properties outside the initial definition is not possible. JS is a scripting language and cannot self reference as it is being defined. You can sort of do this after, but you don't seem to want that. — vol7ron
– vol7ron, Commented Oct 21, 2011 at 19:03

Daniel Earwicker · Accepted Answer · 2011-10-21 18:28:23Z

3

var myObject = {
  prop: "872349827194721934798",
  method1: function () { return this.calcProp; },
  method2: function () { return this.calcProp - 1; };
};
myObject.calcProp = (myObject.prop.length % 3);

Or to allow this to be done inline, write a helper:

function alloc(init) {
    var o = {};
    init.call(o);
    return o;
}

You can now say:

var myObject = alloc(function() {
   this.prop = "872349827194721934798";
   this.calcProp = (this.prop.length % 3);
   this.method1 = function () { return this.calcProp; };
   this.method2 = function () { return this.calcProp - 1; };
});

edited Oct 21, 2011 at 18:28

answered Oct 21, 2011 at 18:15

Daniel Earwicker

117k38 gold badges209 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Hartsock Over a year ago

Should have added to my requirements that I would like to try to stay away from modifying the properties outside of the initial definition.

Daniel Earwicker Over a year ago

See update: there is no way to use object initialisation syntax in the way you want to because it doesn't expose a name for the semi-constructed object. The alloc function I've added does the minimum to expose a name for a blank object and then call a function to set it up.

user113716 Over a year ago

You can accomplish this without the alloc function by treating the anonymous function as a constructor: var myObject = new function() { /* all the same */ }; jsFiddle Example.

Community · Accepted Answer · 2017-05-23 12:27:33Z

1

var myObject = {
  prop     : "872349827194721934798",
  get calcProp(){ return this.prop.length % 3; },
  method1  : function () { return this.calcProp; },
  method2  : function () { return this.calcProp - 1; }
};

Example use: console.log(myObject.calcProp);

Note: get was introduced in ECMAScript5/Harmony, so if the JS engines weren't updated on older browsers, it may not work in those cases. Refer to Daniel's solution for something a little more support in older browsers.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Oct 21, 2011 at 19:13

vol7ron

42.3k22 gold badges126 silver badges178 bronze badges

2 Comments

Daniel Earwicker Over a year ago

NB this behaves very differently. If prop is modified, a plain calcProp value will not change. But if calcProp is a dynamic property defined by a getter, it will change when prop changes as it is recalculated on every access.

vol7ron Over a year ago

@DanielEarwicker: I think he wanted calcProp to be the result of a function, without using the parenthetical syntax. The above does as you described: example

DefyGravity · Accepted Answer · 2011-10-21 18:20:32Z

0

This is pretty much the same as the other answers:

 var propVal = "872349827194721934798";
    var myObject = {
      prop: propVal ,
      calcProp: (propVal.length % 3),
      method1: function () { return this.calcProp; },
      method2: function () { return this.calcProp - 1; }
    }

answered Oct 21, 2011 at 18:20

DefyGravity

6,0915 gold badges35 silver badges48 bronze badges

1 Comment

John Hartsock Over a year ago

Should have added to my requirements that I would like to try to stay away from modifying the properties outside of the initial definition.

hugomg · Accepted Answer · 2011-10-21 18:25:28Z

0

You have no choice but to do initialization by parts

var obj = { prop: ... };
obj.calcProp = ...

You can use some tricks to still be able to write this inline though:

//the module pattern allows for inline statements
var fullObj =(function(){
    var obj = { prop: ... };
    obj.calcProp = ...
    return obj;
}());

//a constructor function gives you unlimited power:
function init(obj){
    obj.calcProp = ...
    return obj;
}
var something = init({
    prop: "123"
    ...
});

edited Oct 21, 2011 at 18:25

answered Oct 21, 2011 at 18:17

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

5 Comments

John Hartsock Over a year ago

Not sure I understand your second scenario...Why did you wrap the obj in stuff?

hugomg Over a year ago

It was just an example of a case where you need to put things inline in an expression instead of spread over multiple statements. (Removed it anyway)

John Hartsock Over a year ago

Not exactly what I was hoping for.

hugomg Over a year ago

The thing is you can't get what you are hoping for. The literal syntax doen't handle circular references so the best you can do is try to make the process of splitting things into multiple statements more pleasant (for example, the module pattern avoids creating any variables that will polute the outlying scope)

John Hartsock Over a year ago

Daniel Earwicker provided a very clever solution to keep my code together as I wanted.

gilly3 · Accepted Answer · 2011-10-21 18:36:26Z

0

You have to create the object before you can access its members.

var myObject = { 
  prop: "872349827194721934798", 
  method1: function () { return this.calcProp; }, 
  method2: function () { return this.calcProp - 1; } 
};
myObject.calcProp = myObject.prop.length % 3;

In the context of your object literal expression, this refers to the expression's context - likely the window. You get an undefined error, because your current context contains no prop property. If the context had a member named prop, that value would be used:

var prop = [];
var myObject = {
  prop: "872349827194721934798",    
  calcProp: (this.prop.length % 3),    
  method1: function () { return this.calcProp; },    
  method2: function () { return this.calcProp - 1; }    
};
myObject.calcProp; // 0 (ie, [].length % 3)

Edit: You shouldn't need to access the property, just use the same value. Eg:

var myObject = {
  prop: "some literal string",
  calcProp: "some literal string".length % 3
};

or

var myObject = {
  prop: someVariable,
  calcProp: someVariable.length % 3
};

Or, here's another approach:

function SomeObj(prop) {
    this.prop = prop;
    this.calcProp = this.prop.length % 3;
}
SomeObj.prototype.method1 = function () { return this.calcProp; };
SomeObj.prototype.method2 = function () { return this.calcProp - 1; };

var myObject = new SomeObj("872349827194721934798");

edited Oct 21, 2011 at 18:36

answered Oct 21, 2011 at 18:15

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

3 Comments

John Hartsock Over a year ago

Should have added to my requirements that I would like to try to stay away from modifying the properties outside of the initial definition.

gilly3 Over a year ago

@JohnHartsock - The property of the object does not exist until the object has been created. You can't access a property of an object that doesn't exist. See my edit for another approach that may get you closer to what you are looking for.

John Hartsock Over a year ago

Daniel Earwicker has a very clever solution.

Collectives™ on Stack Overflow

Javascript creating object properties using existing object property

5 Answers 5

3 Comments

2 Comments

1 Comment

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

1 Comment

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related