Using properties inside a Javascript object literal

Question

I'm looking to create javascript json object that has a dynamic field that will just return a value based on previously specified properties. So far This is what I have...

var car = {
  color: 'red',
  wheels: 4,
  hubcaps: 'spinning',
  age: 4,
  full_name: this.color + ' ' + this.spinning
}

I was wondering if this is possible to do? My goal is to be able to reference values such as car.color or car.full_name. For this example car.full_name would return the value red spinning

That's not a "JSON object", that's an object written in object literal notation. These are not the same; JSON is a string-formatted data format that evaluates as objects and arrays. Note that JSON does not allow functions as parameters, either. — Jared Farrish
– Jared Farrish, Commented Jul 27, 2014 at 1:56
Sure, use full_name: function () { return this.color + ' ' + this.spinning; };. And use it like car.full_name() — Ian
– Ian, Commented Jul 27, 2014 at 1:56
btw. function === dynamic field that will just return a value based on previously specified properties — Dalorzo
– Dalorzo, Commented Jul 27, 2014 at 1:57

Jay Harris · Accepted Answer · 2014-07-27 02:44:04Z

3

You can wrap your object in a function so you can perform operations on it, e.g. concatenations.

var car = function () {
    var color     = 'red',
        hubcaps   = 'spinning',
        full_name = color + ' ' + hubcaps;

    return {
       color: color,
       wheels: 4,
       hubcaps: hubcaps,
       age: 4,
       full_name: full_name
    };
// (); <- calls the anonymous function after defining it
}();

// true
car.full_name === "red spinning";

Edit: Like what @Jimmyt1988 said, if you want to instantiate new versions of this functions, i.e. OO Javascript, you can remove the inline function call (); and use it like so

var myCar = new car();

alert(mycar.color);

edited Jul 27, 2014 at 2:44

answered Jul 27, 2014 at 2:18

Jay Harris

4,27120 silver badges22 bronze badges

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

2 Comments

Jimmyt1988 Over a year ago

This technique is a great step in the right direction. If you remove the static typing "()" at the end, you can actually instantiate new versions of this object... I'd say this is the most useful answer. var myCar = new car(); alert( myCar.color );

Jay Harris Over a year ago

@Jimmyt1988 yeah i agree, but i think he just wants the array object so i did it so he wouldn't have to call the function first.

jfriend00 · Accepted Answer · 2014-07-27 02:06:00Z

You cannot refer to other fields in the javascript literal when it is statically declared like you are doing because in the eyes of the parser, the object does not yet exist (it hasn't finished parsing) and it also doesn't set the this ptr like you are trying to use either.

Instead, you would have to do this:

var car = {
  color: 'red',
  wheels: 4,
  hubcaps: 'spinning',
  age: 4,
}

car.full_name = car.color + ' ' + car.spinning;

Your other option would be to turn full_name into either a function or a getter so that it is computed dynamically based on the other field values.

If you want full_name to always be dynamic, then you probably want to use a getter which can have a function behind it, but can be used like a property.

Collectives™ on Stack Overflow

Using properties inside a Javascript object literal

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related