0

I have an object called Utils.MediaQuery. I am trying to access its isMobile() function.

However, for some reason, trying to access that function returns a "not a function" error. Worse (and difficult for debugging), the object shows up as having the function in Firefox console, and shows up as not having the function in Firefox console.

Debugging code:

console.log("Utils.MediaQuery:", Utils.MediaQuery);
console.log("Utils.MediaQuery.isMobile():", Utils.MediaQuery.isMobile());

Result:

Console error illustration

(The "Object" part in the bottom half is what I get when clicking on the Utils.MediaQuery object)

The logged Object doesn't have the isMobile() function, but its description does.

The guilty object:

require(['jquery'], function($) {

    Utils = {};

    Utils.MediaQuery = {
        SCREEN_WIDTH_SMALL: 568,
        SCREEN_WIDTH_MEDIUM: 720,
        SCREEN_WIDTH_LARGE: 1010,
        SCREEN_WIDTH_XLARGE: 1400  // in px
    };

    $(function(){
        Utils.$window = $(window);
        Utils.$html = $('html');
        Utils.$body = Utils.$html.find('body');

        Utils.MediaQuery.getViewportWidth = function() {
            return Math.max(document.documentElement.clientWidth,
                window.innerWidth || 0);
        };

        Utils.MediaQuery.isMobile = function() {
            return (Utils.MediaQuery.getViewportWidth() < Utils.MediaQuery.SCREEN_WIDTH_MEDIUM);
        };
    });

});

What can cause this kind of behavior?

PS: This is from a big clunky legacy project I just joined. Considering I am still mostly unable to understand its architecture, I'm afraid I can't explain it either

PPS: Seems related to this question, which in turn links to this question, but in both cases I couldn't see how the answers applied to the current problem. Sorry if I was wrong.

Community
  • 1
  • 1
Cristol.GdM
  • 505
  • 2
  • 5
  • 21
  • 5
    I suspect it is a case of [deferred console evaluation](http://stackoverflow.com/questions/38660832/element-children-has-elements-but-returns-empty-htmlcollection), yes. When you logged it, it didn't have that property. Later, when you expanded that entry in the console, it did, so it showed it to you. – T.J. Crowder Sep 06 '16 at 10:10
  • 1
    Can you console log: `Utils.MediaQuery.isMobile` (without parentheses). – posixpascal Sep 06 '16 at 10:11
  • @praszyk This returned "undefined" – Cristol.GdM Sep 06 '16 at 10:14
  • 1
    So, it's just you're trying to access the method too early. You should defile the method in the upper part, not inside the jQuery function executed on document ready. – Mario Santini Sep 06 '16 at 10:19
  • @T.J.Crowder Seems that's it yes, but considering all properties are added at the same time, what could cause this? I added a description of the object declaration, to try and make it clearer – Cristol.GdM Sep 06 '16 at 10:21
  • @Cristol.GdM: They *aren't* added all at the same time. All of the ones inside the `$(function() { /*...*/});` aren't added until later, when jQuery fires its `ready` callbacks. – T.J. Crowder Sep 06 '16 at 11:53
  • @T.J.Crowder Ooooh ok, that makes sense. Guess that's the answer I needed. Thanks! – Cristol.GdM Sep 07 '16 at 01:17

0 Answers0