Back

Technologies:

javascriptjavascript
avatar
Tolerim
25 days ago

What is the reason for players and currentPlayer variables being undefined?

When I try to use a variable that I set to the return value of a function named "setPlayers", which includes the variables "players" and "currentPlayer", in another function, it is showing up as undefined. Is my approach to setting the variable incorrect?

let message = document.getElementById('game-message');

// The use of "async" allows for the "await" keyword
async function setPlayers() {
    message.innerHTML = `<p>What is the name of player One?</p>`;
    let player1 = await getUserInput();
    message.innerHTML = `<p>What is the name of player Two?</p>`;
    let player2 = await getUserInput();
    const players = [];
    players.push(player1, player2);
    return players;
}

// Set "players" variable to the return value of "setPlayers" function
var players = setPlayers();
// Set "currentPlayer" variable to the first item in the "players" array
var currentPlayer = players[0];
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
The issue is that the function setPlayers() is asynchronous and returns a promise. Therefore, when you try to access the value of players outside of the function, it is still undefined because the promise has not yet resolved. One way to solve this issue is to use the .then() method on the promise returned by setPlayers() to access the resolved value of the promise. Here's an example: 
async function setPlayers() {
    message.innerHTML = `<p>What is the name of player One?</p>`;
    let player1 = await getUserInput();
    message.innerHTML = `<p>What is the name of player Two?</p>`;
    let player2 = await getUserInput();
    const players = [];
    players.push(player1, player2);
    return players;
}

var playersPromise = setPlayers();
playersPromise.then(function(players) {
  var currentPlayer = players[0];
  console.log(currentPlayer);
});
In this example, we store the promise returned by setPlayers() in a variable called playersPromise. We then use the .then() method on playersPromise to access the resolved value of the promise (which is an array of players). We then set the value of currentPlayer to be the first item in the players array. I hope this helps! Let me know if you have any other questions.

Sources

JavaScript Variables - W3SchoolOptional chaining (?.) - JavaScript | MDN - Mozilla DeveloperSurprised that global variable has undefined value in JavaScriptjavascript variable is undefined - Stack OverflowJavaScript variable undefined after assigning value inside a function ...
avatar
Tolerim
25 days ago
Yes, the way you're setting the variable is incorrect. The setPlayers() function is an asynchronous function that returns a Promise that resolves to an array of players. In other words, the value of players won't be immediately available when you try to access it outside of the function. To correctly use the players variable, you can use the Promise.then() method to execute code after the Promise resolves. For example, you can modify your code as follows: 
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;
}

setPlayers().then(function(players) {
    var currentPlayer = players[0];
    // Use currentPlayer or do other stuff with players
});
In this example, we use Promise.then() to define a function that takes the players array as an argument. This function then sets the currentPlayer variable to the first element of the array. You can now use currentPlayer or do other stuff with players.
;