Javascript scope issue, inside an anonymous function

Question

Sorry I couldn't be anymore specific with the title.

I'm building a web-site (personal), which displays different content to the user depending on the query string that is used in the url.

e.g. page=home.html would display home.html

The websites Javascript is wrapped inside an object, with each value containing different data, some pseudo code:

(function(){
    var wrapper = {
        init: function(){
            //Runs on document ready
            this.foo();
            this.nav.render();
        },
        foo: function(){
            //Some functionality goes here for the website, e.g. Display something from an API
        },
        nav: {
            //Functionality to handle the navigation, has different properties
            config: {
                //Contains the config for nav, e.g. page names + locations
                dir: '/directory/to/content/',
                pages: {
                    page_name: wrapper.nav.config.dir + 'page_value'
                }
            },
            render: function(){
                 //some code
            },
            routes: function(){
                 //some code}
            }
        }
    };

    $(function(){
        wrapper.init();
    });
})();

My problem is that I'm trying to prepend the dir value to each of the page values (inside the object where the pages are defined), expecting to get the output of (in this pseudo code case) of directory/to/content/page_value, but instead dir is undefined when I'm trying to access it, I've tried the following to achieve what I want:

wrapper.nav.config.dir + 'page_value'

I've been playing around with the last 30 minutes trying to find out what I'm doing wrong, and even thought about hard-coding the URL in for each page.

The reasoning for wanting to do this is that my local development server and web host have different directory structures, so I don't want to re-write the URL's each time I want to develop + publish. As for why everything is wrapped inside an object, I thought it would be easier to maintain this way.

Hopefully the answer is simple and it's just an amateur mistake / lack of understanding.

Where is the line of code wrapper.nav.config.dir + 'page_value'? It isn't in your above example. — jfriend00
– jfriend00, Commented Jan 7, 2012 at 21:33
It's what I've used to try and access the dir property, with no success — Daniel
– Daniel, Commented Jan 7, 2012 at 21:47

jfriend00 · Accepted Answer · 2012-01-07 22:36:41Z

2

The issue is that you can't refer to a variable that is being defined in that very definition.

So, inside the definition of wrapper, you can't refer to wrapper. And, inside the definition of config, you can't refer to config either and so on.

The usual design pattern for solving this is to initialize as much as you can in the declaration of your data structure and then do the rest in .init() when you can freely access all of it.

edited Jan 7, 2012 at 22:36

answered Jan 7, 2012 at 21:32

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

jfriend00 Over a year ago

OK, assuming you don't want to know about syntax typos (there are still more in your question), I've updated my answer.

Daniel Over a year ago

Thanks for the update, as far as syntax typos, on the actual source I don't get any errors in the console, so I asssume it's working as intended.

jfriend00 Over a year ago

@Daniel - Next time please try to post code that doesn't have a bunch of syntax errors. When you do that, we can't tell whether those errors are what are causing the problem or not and you're less likely to find the real answer you want. Anyway, glad you finally got your answer.

Krizz · Accepted Answer · 2012-01-07 21:33:13Z

1

Change the first two lines to:

var wrapper = null;
(function(){
   wrapper = {

Otherwise, the wrapper is a local variable to your anonymous function.

answered Jan 7, 2012 at 21:33

Krizz

11.6k1 gold badge33 silver badges45 bronze badges

7 Comments

Daniel Over a year ago

The reasoning for wrapping everything in an anonymous function was that I thought defining global variables was bad, still, making the changes, I still get a wrapper is undefined.

jfriend00 Over a year ago

This has nothing to do with the problem. If the OP needed to access wrapper outside of the anonymous function, this might be one solution, but that isn't part of the question at all.

Krizz Over a year ago

@jfriend00: "but instead dir is undefined when I'm trying to access it, I've tried the following to achieve what I want" I assumed this is because wrapper is actually undefined while used in link or something.

Krizz Over a year ago

@Daniel, where do you use wrapper actually?

jfriend00 Over a year ago

Look at the code they have in their answer now. It won't compile because of the problem mentioned in my answer. They are trying to access wrapper inside the definition of wrapper (which is inside the self executing function). The question was edited since you may have seen it.

|

Johan · Accepted Answer · 2012-01-07 22:02:17Z

1

The problem is that you're still busy defining the wrapper when you ask for its value, which is why it's still undefined.

The code below fails too:

var x = {
    y:"1",
    z:x.y
}

answered Jan 7, 2012 at 22:02

Johan

3,2121 gold badge26 silver badges19 bronze badges

Comments

Minko Gechev · Accepted Answer · 2012-01-07 22:43:48Z

0

Why not:

//...
init: function(){
    //Runs on document ready
    this.foo();
    var config = this.nav.config;
    for (var page in config.pages) {
        config.pages[page] = config.dir + config.pages[page];
    }
},
//...

answered Jan 7, 2012 at 22:43

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

Collectives™ on Stack Overflow

Javascript scope issue, inside an anonymous function

4 Answers 4

3 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related