Why is this variable undefined within the object literal?

Question

I'm trying to store an object of selectors in jQuery for performance reasons and later use.

In some case, I may need to access a key in the same object literal I am creating.

(function($) {

    'use strict';

    var appCache = {

        $navSecondary: $('#nav-secondary'),
        $navMore: appCache.$navSecondary.find('.more')

    };

})(jQuery);

The above code produces the error:

TypeError: appCache is undefined

how can I get around this? Would I have to perform the selection again in jQuery?

Thanks.

When you call appCache to set $navMore, appCache is still undefined. — Rory McCrossan
– Rory McCrossan, Commented May 19, 2014 at 16:30

Quentin · Accepted Answer · 2014-05-19 16:30:27Z

4

The right hand side of the assignment operator is evaluated first. The result is then passed left and assigned to the variable.

The variable is undefined while the object is being constructed, so you can't use its value (it has been declared though, var statements are hoisted).

You can assign a new property after the object has been created.

var appCache = {
    $navSecondary: $('#nav-secondary')
};
appCache["$navMore"] = appCache.$navSecondary.find('.more');

answered May 19, 2014 at 16:30

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Brandon Over a year ago

+1 for explaining why the above approach does not work and offering a solution at the same time.

nicael · Accepted Answer · 2014-05-19 16:31:59Z

1

 var appCache = {

    $navSecondary: $('#nav-secondary'),
    $navMore: appCache.$navSecondary.find('.more')
              ^^^^^^^^

};

Because you are trying to access variable during its initialization.

answered May 19, 2014 at 16:31

nicael

19.1k13 gold badges65 silver badges93 bronze badges

Comments

A. Wolff · Accepted Answer · 2014-05-19 16:36:35Z

1

You could use a function instead:

$navMore: function(){return this.$navSecondary.find('.more')}

Then call it once object is initialized:

appCache.$navMore(); // this will return set of jQuery matched elements

answered May 19, 2014 at 16:36

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Collectives™ on Stack Overflow

Why is this variable undefined within the object literal?

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