Accessing a JavaScript variable from a namespace at a "global" level on the same page

Question

I'm trying to access a variable from a namespace on the same page at a "global" level but thus far have been unable to do so. Here's the code:

window.addEventListener('resize',
    () => {
        alert('entityId in addEventListener alert: ' + Best.Namespace.Ever.entityId);
        // prints "entityId in addEventListener alert: undefined" 
});

var Best = Best || {};
Best.Namespace = Best.Namespace || {};
Best.Namespace.Ever= Best.Namespace.Ever || (function () {

    var entityId;

    function doSomethingAmazing(something) {

        entityId = alterEntityIdBasedUponSomething(something);

        alert('entityId in doSomethingAmazing: ' + entityId);
        // prints "entityId in doSomethingAmazingalert: 14" 

        // a lot of other stuff
    }

    return {
        doSomethingAmazing: doSomethingAmazing,
        entityId: entityId

        // a lot of other stuff
    };
}());

The issue here is that I'm unable to access the entityId from within the alert in the addEventListener method. At that point it is undefined. However, I can access it in the alert just after it is set just fine. (See the comments in the code above for what prints.)

I feel like this should be possible and I just don't know the correct way to access entityId. If anyone has any ideas I would very much appreciate it.

Thanks!!

issue is how variables are referenced. Once you set the variable entityId: entityId it will be that value, it will not update, you should be using a getter method. — epascarello
– epascarello, Commented Jul 21, 2020 at 17:49
I've created a getEntityId method to try what you've suggested, but must not be exposing it correctly. Would you mind posting an answer with some code to show me how to expose and call the getEntityId method? Thanks! — risingTide
– risingTide, Commented Jul 21, 2020 at 19:10

Cody Gray · Accepted Answer · 2020-07-22 05:25:17Z

Your problem is that primitives are passed as values and not as references in JS.

Here is what you want:

window.addEventListener('resize',
    () => {
        alert('entityId in addEventListener alert: ' + Best.Namespace.Ever.wrapper.entityId);
        // prints "entityId in addEventListener alert: 14"
        // after 1 second
        // prints "entityId in addEventListener alert: 18"
});

var Best = Best || {};
Best.Namespace = Best.Namespace || {};
Best.Namespace.Ever= Best.Namespace.Ever || (function () {

    const wrapper = {entityId : 14} ;

    function doSomethingAmazing(something) {

        //entityId = alterEntityIdBasedUponSomething(something);
        wrapper.entityId = 18;
        alert('entityId in doSomethingAmazing: ' +  wrapper.entityId);
        // prints "entityId in doSomethingAmazingalert: 18" 

        // a lot of other stuff
    }

    return {
        doSomethingAmazing: doSomethingAmazing,
        wrapper

        // a lot of other stuff
    };
}());

setTimeout(_=>{
  Best.Namespace.Ever.doSomethingAmazing();
},1000)

When I implement this solution the alert in the addEventListener is printing 14, which is basically the same problem I was having before. I cannot seem to access the new value that is being set in the function (i.e. 18 in your example).
The value is 14 (if you resize), and after 1 second the value is updated with 18, and then any futher resize will show 18. What's wrong (try to run the snippet because it works well) ?
Yes, I do see that it is working in your solution. However, when I place this concept in my own code I am not ever getting the updated value. :/

risingTide · Accepted Answer · 2020-07-30 14:07:30Z

As it turns out this wasn't exactly an issue with the code, but rather with unexpected page loading/event firing. What was happening is that the doSomethingAmazing function was being called on page load and was setting the entityId to 14 just fine. However, after that another event (or something) was reloading the entire script again which was re-initializing entityId back to undefined (but NOT calling doSomethingAmazing). So when the resize event was called and entityId was printed it was undefined.

My problem here was a failure to understand the basic principle that the entityId is essentially stateless between JavaScript page loads; it gets re-initialized every time the entire script is loaded.

Hopefully this helps someone!

Collectives™ on Stack Overflow

Accessing a JavaScript variable from a namespace at a "global" level on the same page

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related