Scope problem nesting Javascript Objects

Question

I am writing some Javascript code using jQuery to display specially formatted widgets in a browser. I've had success, but now I'm working on refactoring my code for two reasons.

(1) I wish to be able to easily use the widget more than once and have a Javascript object referring to each one.
(2) I wish to do it the right way so that my code is totally reusable and doesn't little the global namespace with all sorts of objects and functions.

I'm having a scoping problem and I wish to fix the problem and improve my understanding of Javascript scope. I've condensed this problem down to a tiny code snippet that illustrates what I'm doing:

  function getMyObject() {
      var theObject = {
          doThis: function () { },
          doThat: function () { },
          combinations: {
              doThisTwice: function () { doThis(); doThis(); },
              doThatTwice: function () { doThat(); doThat(); }
          }
      };
      return theObject;
  }

  var myObject = getMyObject();
  myObject.combinations.doThisTwice();

I've declared a function that returns an object.

However, when I try to execute the function combinations.doThisTwice(), the program throws an error saying that doThis() is out of scope. How do I refer to the function doThis in the scope of combinations.doThisTwice?

Update: Thank you kindly for the answer to my question: Replace doThis() with theObject.doThis() inside the function doThisTwice(). This works, but I don't understand why.

I would have thought that the name theObject would not be valid until the end of the object declaration. I think I must misunderstand some fundamental aspect of Javascript... probably because of the C-like syntax.

Yeah, JS is weird like that. Google for Javscript scope and closures. You'll have a better understanding of how scoping works. — Mrchief
– Mrchief, Commented Jun 24, 2011 at 15:24

John Kalberer · Accepted Answer · 2011-06-24 15:07:31Z

2

You need to do:

function getMyObject() {
    var theObject = {
        doThis: function () { },
        doThat: function () { },
        combinations: {
            doThisTwice: function () { theObject.doThis(); theObject.doThis(); },
            doThatTwice: function () { theObject.doThat(); theObject.doThat(); }
        }
    };
    return theObject;
}

var myObject = getMyObject(); myObject.combinations.doThisTwice();

You reference 'theObject' from an outer scope to call the functions in an inner object.

answered Jun 24, 2011 at 15:07

John Kalberer

5,8001 gold badge25 silver badges27 bronze badges

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

1 Comment

Gherman Over a year ago

Try inheriting from theObject with prototypes or copying theObject to another variable and it won't work anymore. Why do you need this in the first place if you just refer the object by its variable?

Felix Kling · Accepted Answer · 2011-06-24 15:10:05Z

2

doThis is not defined in the functions scope, so it will traverse up the scope chain, but not find it.

You can reference it by

theObject.doThis();

However, more readable might be if you define your function like this:

  function getMyObject() {
      function doThis() {};
      function doThat() {};

      var theObject = {
          doThis: doThis,
          doThat: doThat,
          combinations: {
              doThisTwice: function () { doThis(); doThis(); },
              doThatTwice: function () { doThat(); doThat(); }
          }
      };
      return theObject;
  }

But in this case, whenever you change doThis from the outside, doThisTwice will still reference the original function.

edited Jun 24, 2011 at 15:10

answered Jun 24, 2011 at 15:02

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

wong2 · Accepted Answer · 2011-06-24 15:04:47Z

0

In doThisTwice, use theObject.doThis(); instead of doThis();

answered Jun 24, 2011 at 15:04

wong2

36.1k51 gold badges138 silver badges182 bronze badges

Collectives™ on Stack Overflow

Scope problem nesting Javascript Objects

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related