JavaScript object literal scope

Question

Possible Duplicate:
How can a Javascript object refer to values in itself?

I have some JS as follows:

var Wrap = {

    Inner : {

        site_base : "http://site.com/",
        marker_purple : site_base + "images/icon/marker-puple.png"
    }
}

site_base is undefined. Wrap.Inner.site_base is undefined.

How can I access my values within the same object?

You can't. You'd have to do that in a separate statement: `Wrap.Inner.marker_purple = Wrap.Inner.site_base + ...` — Pointy, Oct 25 '12 at 14:49
Nope; http://stackoverflow.com/questions/2787245/how-can-a-javascript-object-refer-to-values-in-itself — Alex K., Oct 25 '12 at 14:49
Object literals do not define a scope, functions do for variables. — Bergi, Oct 25 '12 at 14:52

score 3 · Answer 1 · answered Oct 25 '12 at 14:51

3

The error you have is due to the fact that site_base is undefined, so object creation fails.

Try this:

var site_base = "http://site.com/";

var Wrap = {
    Inner : {
        site_base : site_base,
        marker_purple : site_base + "images/icon/marker-puple.png"
    }
}

answered Oct 25 '12 at 14:51

Matteo Tassinari

17,408
7
58
80

Happy with this approach - thank you. I'll accept as soon as I'm allowed. – Alex Oct 25 '12 at 14:59

score 2 · Answer 2 · answered Oct 25 '12 at 14:51

Alternative to a separate statement:

var Wrap = { // variable names starting with capital letters make me uncomfortable
  Inner: function() {
    var base = "http://site.com/";
    return {
      site_base: base,
      marker_purple: base + "images/icon/marker-purple.png"
    };
  }()
};

ferrants · Answer 3 · 2012-10-25T15:01:53.543

0

You have to do it in different statements as the object does not exist yet.

var Wrap = {
    Inner:{
        site_base: "http://site.com/"
    }
};
Wrap.Inner.marker_purple = Wrap.Inner.site_base + "images/icon/marker-puple.png"

edited Oct 25 '12 at 15:01

answered Oct 25 '12 at 14:49

ferrants

616
5
11

I know what you mean, but "on different lines" doesn't sit well with me. Although it probably should, given the auto statement termination nature of JavaScript engines in general. – Grant Thomas Oct 25 '12 at 14:50

score 0 · Answer 4 · answered Oct 25 '12 at 14:50

0

Use a closure within an Immediately Invoked Function Expression:

var Wrap = (function(){
  var site_base = "http://site.com/"
  return {
      Inner: {marker_purple : site_base + "images/icon/marker-puple.png"}
  };
}());

answered Oct 25 '12 at 14:50

KooiInc

112,400
31
139
174

score 0 · Answer 5 · edited Oct 25 '12 at 15:08

As already stated in the other answers, you can not access object properties, before the object is actually created. Thus your code fails.

When using ECMAScript 5 and the Object.create() function, however, you can mimic the behavior you want by using the get() function like this:

var Wrap ={
  Inner: Object.create(Object.prototype, {

    site_base: { writable:true, configurable:true, value: "http://site.com/" },

    marker_purple: {
      get: function() { return this.site_base + "images/icon/marker-puple.png" }
    }
  })
};

More information can be found on MDN, e.g. on browser support

ChruS · Answer 6 · 2012-10-25T15:25:02.207

0

Is it valid?

marker_purple : this.site_base + "images/icon/marker-puple.png"

EDIT: I can test it and it works fine btw.

edited Oct 25 '12 at 15:25

answered Oct 25 '12 at 15:02

ChruS

3,647
5
28
38

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Jon B Oct 25 '12 at 15:21
No, it isn't valid. Don't post wild guesses as answers when you can easily test them. – interjay Oct 25 '12 at 15:23

JavaScript object literal scope

6 Answers6