Firebase RTDB - quizID only equals undefined in a certain place of script

Bost

I'm working on a website currently, and something strange is going on.

I have this code:
My code
CnP version:

var gameID = location.href.split("&gameID=")[1]

var quizID

firebase.database().ref('liveGames/' + gameID).get().then((snapshot) => {
    quizID = snapshot.val().quizID
})
        
console.log("Quiz ID: " + quizID)

When I try to run that, the console logs Quiz ID: undefined.

But when I put it in a different spot as shown below,

The console says the quiz ID properly. (It says Quiz ID: 7630579719)

Also, if I put it in either spot, DevTools says the correct thing as well:
Correct DT 1
Correct DT 2

Why does this all happen, and how can I fix it to never say undefined and always say the right one?

Additional details:

I do have Firebase initialize app and credentials, etc.
I'm using Firebase version 8.4.3 (I find the modular v9 too hard to comprehend)

If you need any additional details, please ask in replies. Thanks a bunch!

Bost

I just noticed in the DevTools screenshots that the "0" (which is the player's score, by the way) is showing in different places in different screenshots. Does that change anything? Thanks again!

Sempervivum

Questions of this type are asked frequently. The reason is that your access to the database is working asynchronously, i. e. it takes a short moment until the result is ready. When placing the console.log after the call the result is not yet ready and quizID is undefined. In order to be sure that the result is ready you need to place all actions that require the result (quizID) inside the callback of the then.

Bost

Sempervivum Thanks that helps my understanding a lot more. But I want the quizID to be globally accessible (by every script tag and out of the then statement.) I was thinking about making a function that waits until a variable (set by the then when it's triggered/activated) equals true or waits until quizID != undefined. Any ideas on how I could do that?

Sempervivum

Two options how to work around this situation come to my mind:

I was thinking about making a function that waits until a variable (set by the then when it's triggered/activated) equals true or waits until quizID != undefined

Might be done by using setTimeout like so:

function waitForIt() {
    if (quizID != undefined) {
        // Fine, the variable is available, do anything you like with it
    } else {
        // Variable is not yet available, wait a moment and try again:
        setTimeout(waitForIt, 100);
    }
}
waitForIt();

However, again every processing based on the variable needs to be placed inside the function waitForIt.

I want the quizID to be globally accessible (by every script tag and out of the then statement.)

You might consider loading these scripts not statically in the head section but dynamically in the callback of the database access:

firebase.database().ref('liveGames/' + gameID).get().then((snapshot) => {
    quizID = snapshot.val().quizID;
    // Prepare HTML for including the script.
    scriptHtml = ...
    // Insert this HTML at the end of the head section:
    document.querySelector('head').insertAdjacentHTML('beforeend', scriptHtml);
});

Bost

rickmildon Indeed I did. It was due to me trying to access the undefined variable before it was set (it was right after the then callback.) The solution is to put all code that needs to access the variable inside of the then callback.