CODEWITHSUNDEEP
javascriptfunction
Aviran
Aviran

Reputation: 21

JavaScript return in functions - What to do with the undefined?

I study front-end. I started creating the javascript side for Rock-Paper-Scissors project, with console.logs instead of applying results to the HTML. I created the html with 3 buttons of the choices, and I created a new div to apply the results of the game (who chose what, and who wins). I already added 2 paragraphs for the player and computer choices, but now I have the function, and I'm a bit stuck.

here is the js:

const buttons = document.querySelectorAll('.btn');
const resultsDiv = document.querySelector('.results');

const getComputerChoice = () => {
  const options = ['rock', 'paper', 'scissors'];
  const computerChoice = options[Math.floor(Math.random() * 3)];
  return computerChoice;
};

const playRound = (playerSelection, computerSelection) => {
  playerSelection = playerSelection.toLowerCase();

  const playerChoiceMsg = document.createElement('p');
  playerChoiceMsg.textContent = `You chose ${playerSelection}`
  resultsDiv.appendChild(playerChoiceMsg);

  const computerChoiceMsg = document.createElement('p');
  computerChoiceMsg.textContent = `Computer chose ${computerSelection}`;
  resultsDiv.appendChild(computerChoiceMsg)


  if (playerSelection === 'rock') {
    switch (computerSelection) {
      case 'rock':
        return 'Even! Try Again!';
      case 'paper':
        return 'You lose! Paper beats Rock!';
      case 'scissors':
        return 'You win! Scissors beats Rock!';
    }
  } else if (playerSelection === 'paper') {
    switch (computerSelection) {
      case 'rock':
        return 'You win! Paper beats Rock!';
      case 'paper':
        return 'Even! Try Again!';
      case 'scissors':
        return 'You lose! Scissors beats Paper!';
    }
  } else {
    // Player chose scissors
    switch (computerSelection) {
      case 'rock':
        return 'You lose! Rock beats Scissors!';
      case 'paper':
        return 'You win! Scissors beats Paper!';
      case 'scissors':
        return 'Even! Try Again!';
    }
  }
};

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const playerSelection = button.textContent;
    console.log(playRound(playerSelection, getComputerChoice()));
  });
});
<div class="buttons">
  <button class="btn btn-rock">Rock</button>
  <button class="btn btn-paper">Paper</button>
  <button class="btn btn-scissors">Scissors</button>
</div>

<div class="results">

</div>

In the switch cases, I can just create a new let to apply the result (win, lose, even) with a proper message, and then createElement(p) to apply it to the results div. But, if I do this, I will get "undefined" in the DevTools, because the function won't return anything. I know functions don't always have to return, but it doesn't look professional to see "undefined" (what would you think if it happens after clicking a button in Google?) What is the best way to get rid of the undefined? Should I just add "return;" to the end of the function?

Upvotes: 1

Views: 53

Answers (1)

Brad
Brad

Reputation: 163232

I know functions don't always have to return...

They don't have to have an explicit return statement. But, they always return. If you don't include a return statement, the function returns undefined after it executes.

...but it doesn't look professional to see "undefined" (what would you think if it happens after clicking a button in Google?)

Who cares? :-) The search works, right?

Sure, it's generally considered a poor practice to have stuff dumped in the console on public builds of your code, but it's just a tool like any other. Use it when you find it useful.

What is the best way to get rid of the undefined? Should I just add "return;" to the end of the function?

No, if you try this you'll see that you still get undefined. If you don't want to output anything to console, just don't use console.log(). Replace this line:

console.log(playRound(playerSelection, getComputerChoice()));

With this:

playRound(playerSelection, getComputerChoice());

Upvotes: 2

Related Questions