Defining objects in Javascript

Question

I want to define the following object in javascript:

var property = 'foo';
var value = 'bar';
var obj = {
    property: value;
};

This will result the following:

obj.property <-> 'bar';
obj.foo <-> undefined

This is normal, but how to define the object to get:

obj.foo = 'bar';

Possible solution is:

var obj = {};
obj[property] = value;

or

var obj = new Object();
obj[property] = value;

But this is not convient when have to define objects like:

var obj = {
    o1: {
        oo1: {
            property: value;
        }
    }
};

Again, what I want is:

var property = 'foo';
var value = 'bar';
var obj = {
    property: value;
}; 
alert(obj.foo); // I want this to alert: 'bar'

How you handle similar situations? Thanks!

This question is similar to: Is it possible to use a variable's value as an object key inside object declaration?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Jan 18 at 9:23

Elias Van Ootegem · Accepted Answer · 2012-03-02 08:54:09Z

If I understand correctly, you want to use variables from the global scope in your object's constructor several levels deep. Apart from that being, well, risky to put it politely, since there it isn't really possible to be sure about the value of these variables, you could specify the scope like so:

var property = 'foo';
var value = 'bar';
var obj = {val : window.value};//doesn't work for property id's
var obj[window.property] = obj.val;
alert(obj.foo);//alerts 'bar'

Alternatively, make your constructor accept parameters:

function Foobar(prop,val)
{
    this[prop] = val;
}
var obj = new Foobar('foo','bar');
alert(obj.foo);//alerts 'bar'

In my second example, nested objects can use the arguments passed to their 'parent'/containing object like this:

function Foobar(prop,val)
{
    Foobar.prop = prop;
    Foobar.val = val;
    ...
    this.subObj = {};
    this.subObj[Foobar.prop] = Foobar.val;//var prop from scope Foobar, same as window
}

Taking advantage of the fact that variables of functions or objects can be made static, you might even do something like this:

Foobar.prop = (typeof Foobar.prop !== 'undefined' ? Foobar.prop : prop);
//or
Foobar.subObj=  {new Foobar};//extending parent object
Foobar.subObj.newProp = 'newVal';

treeface · Accepted Answer · 2012-03-02 08:06:01Z

1

The only way to do this in JavaScript is to use the brackets:

var property = 'foo',
    value = 'bar',
    obj = {};

obj[property] = value;

I'm not sure I understand why this is impractical for you. Could you expound on that a bit?

answered Mar 2, 2012 at 8:06

treeface

13.3k4 gold badges53 silver badges57 bronze badges

Comments

beatgammit · Accepted Answer · 2012-03-02 08:56:21Z

It seems you want an alias.

If I understand correctly, you want to do this:

var obj = {something: 'bar'};
alert(obj.foo); // alerts 'bar'

To do this, define a getter. This is simplest with a prototype:

function Factory() {
}
Factory.prototype = {
    get foo() {
        return this.something;
    }
};

var obj = new Factory;
obj.something = 'bar';
alert(obj.foo); // alerts 'bar'

The prototype is basically the model for the object. When you create a new Factory, the resultant object has the getter 'something' that returns the value of foo. This is kind of messy syntax, but it works for what you want.

Also, you could avoid the prototype entirely and do this:

var obj = {};
obj.__defineGetter__('foo', function () { return this.something; });
obj.something = 'bar';
alert(obj.foo); // alerts 'bar'

The same can be done with __defineSetter. This is ES5 syntax and doesn't work in all browsers (IE), but should work in newer browsers.

See John Resig's blog for more info.

TrySpace · Accepted Answer · 2014-11-07 19:10:04Z

0

I would recommend https://github.com/leecrossley/dotject

You can make objects with:

dotject("a,b.c");

Makes:

{
  "a": {},
  "b": {
    "c": {}
  }
}

Or a more real world example:

var camera = {isEnabled: true};
camera = dotject("settings.encoding.format,output.data.base64", camera, "JPEG", true);

{
  "isEnabled": true,
  "settings": {
    "encoding": {
      "format": "JPEG"
    }
  },
  "output": {
    "data": {
      "base64": true
    }
  }
}

answered Nov 7, 2014 at 19:10

TrySpace

2,4988 gold badges37 silver badges65 bronze badges

Collectives™ on Stack Overflow

Defining objects in Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related