why is variable players and currentPlayer undefined?

Question

I am setting a variable to be the returned value from a function, players and currentPlayer, however it is saying that variable is undefined when trying to use in another function? is the way I'm setting the variable wrong?

let message = document.getElementById('game-message');
// async allows the use of the "await" keyword
async function setPlayers() {
    message.innerHTML = `<p>Name of player One?</p>`;
    let player1 = await getUserInput();
    message.innerHTML = `<p>Name of player Two</p>`;
    let player2 = await getUserInput();
    const players = [];
    players.push(player1, player2);
    return players;
}

var players = setPlayers();
var currentPlayer = players[0];

@epascarello I have tried adding the await but getting this error message - Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules — NovaBrownie, May 03 '23 at 18:55
https://stackoverflow.com/questions/71517624/because-i-cant-run-await-on-the-top-level-i-have-to-put-it-into-an-async-funct — epascarello, May 03 '23 at 19:01

Sheri · Accepted Answer · 2023-05-03T20:18:44.820

Then warp it in IIFE (Immediately Invoked function expression) because you need to put await when calling setPlayers function, so to use await, the parent function must be an async function.

let message = document.getElementById('game-message');
// async allows the use of the "await" keyword
async function setPlayers() {
    message.innerHTML = `<p>Name of player One?</p>`;
    let player1 = await getUserInput();
    message.innerHTML = `<p>Name of player Two</p>`;
    let player2 = await getUserInput();
    const players = [];
    players.push(player1, player2);
    return players;
}

let players, currentPlayer; # declare variables here
(async() => {
    # now assigning values to the variables
    players = await setPlayers();
    currentPlayer = players[0];
})()

# now you can access those variables here
console.log(players, currentPlayer)

I need to store players and current players as global variables. Is there a way around it at all? — NovaBrownie, May 03 '23 at 19:21

score 0 · Answer 2 · answered May 03 '23 at 21:25

You shouldn't pollute the global namespace if you can help it. Try writing code that is self contained or a javascript module. If you need to communicate between namespaces, then an EventTarget with CustomEvent can be used to share data.

// Global namespace
if ( !window.myGameEvents ) window.myGameEvents = new EventTarget();

// Game namespace 
(async() => {
    // Game Global Variables
    const message = document.getElementById('game-message');
    const players = [];
    let currentPlayer = null;

    // Game Methods
    async function setPlayers(){
        message.innerHTML = `<p>Name of player One?</p>`;
        players[0] = await getUserInput();

        message.innerHTML = `<p>Name of player Two</p>`;
        players[1] = await getUserInput();
    }

    async function getUserInput(){
        /* ...code... */
    }

    /* ...code... */

    // Game Run
    await setPlayers();
    currentPlayer = players[0];

    // Sample Event Dispatch
    myGameEvents.dispatchEvent( new CustomEvent('my-event-name',{
        detail: { /* ...data... */ }
    }) )
})();

why is variable players and currentPlayer undefined?

2 Answers2