How can we store the reference of a value, rather than copying the value in javascript?

Question

In Javascript, how can i store the reference of a value, rather than copying the value?

Suppose i created a window popup using const popup = window.popup(url, config) and that if i want to check if that popup is closed, i can just console.log popup.closed.

This would return a boolean value depending on the state of the popup. All Cool.

Now, in vuejs 3, I want to look for changes in this value to trigger a function.

What i did is, I created a data property isClosed and assigned value as false (becasue after opening a popup, & checking, closed would be false) like below:

data() {
    return {
        isClosed: false
    }
}

Now after creating a popup, i assigned this isClosed to popup.closed:

this.isClosed = popup.closed

Now what I was doing is, I added a watcher property to trigger a function when the value is changed:

watch: {
    isClosed() {
        console.log("value changed");
        // the function to trigger here
    }
}

Now the thing is, its not even logging when i close that popup. Then i realised its just copying the value of popup.closed rather making a ref.

So, how can i possibly do this without setInterval ?

What I'm doing now is, I'm reassigning that isClosed data property every 3sec so that it would change the value of isClosed & trigger the watcher & thus trigger the function.

const timer = setInterval(() => {
    this.isClosed = popup.closed;
    if (this.isClosed) {
        clearInterval(timer)
    }
}, 3000)

But the big blow on my face is, why use a watcher when we can just add the function to trigger inside this timer, to trigger when the value of popup.closed is true.

So, how can i store the reference of a the popup.value, rather than copying the value?

You cannot do that in JavaScript. You can save the reference to `popup` and check the `closed` property, as you did in your question, but you cannot create a reference to a variable or object property value. — Pointy, Jul 27 '23 at 12:08
For doing that kind of thing (not sure it will work for a popup), you might want to look at [mutation observers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). — Pointy, Jul 27 '23 at 12:09
Can't use mutation observers as we are opening a new window, if it was an element we are adding in the dom, that would have worked. Thanks for the suggestion though, as i could learn a new topic. — Sooraj S Prakash, Jul 27 '23 at 12:14
See https://stackoverflow.com/questions/9388380/capture-the-close-event-of-popup-window-in-javascript . setInterval is a workaround that may be acceptable as a fallback. Not directly related to Vue as native APIs obviously don't have vue reactivity. "why use a watcher" - you probably don't have to, but if you need to react to the *changes* in open/close state with no multiple calls, that's the place where you can do that — Estus Flask, Jul 27 '23 at 12:51
@EstusFlask, thanks for reply. Saw that post already, but i thought there might be a better way rather using setInterval. I understand the use of watcher, but i was not able to use it for my use case, then thought about posting the question here. — Sooraj S Prakash, Jul 28 '23 at 06:01
@SoorajSPrakash There may be a better way depending on your case, this is reflected in the answers — Estus Flask, Jul 28 '23 at 09:58

How can we store the reference of a value, rather than copying the value in javascript?

0 Answers0