My App Doesn't Work! Common bugs and how to squash them

javascript
#1

We’ll keep updating this thread with common bugs for all the apps in the course. Let’s get started with Pig Latin! Don’t forget to look back at common bugs from other apps, too.

Pig Latin

Accidental early return

For Pig Latin’s spec 1.2, it tells us to:

return word.replace(firstLetter, '') + firstLetter + 'ay';

Once we get that spec working, we’re inclined to move on and keep tackling new specs. Pay close attention to where the return keywords are in your functions. If you leave that first one in and add code below it, the javascript gremlin will never execute those following lines! This is because return halts the execution of the current function. Try it yourself!

function earlyReturn() {
  console.log('here I am!');
  return 10;
  console.log('I never even get a chance!');
}
earlyReturn();
1 Like
#2

Rock Paper Scissors

Ties, but really?

It’s pretty handy to be able to “return early” from a function. For the rest of the function, you’re free from worrying about that particular condition/case!

if (hand1 === hand2) {
  return "It's a tie!";
}

^ sweet! But watch out! Input pairs like “banana”, “banana” will trigger a tie, even though that’s not a legitimate game of RPS.

See if you can take the “early return” approach to the max as you code RPS

1 Like
#3

Tic Tac Toe

Ternary

Remember that a value “comes out” of a ternary expression.
In your node console, try something like this:

> (1 === 1) ? 'yes' : 'no'
'yes'
> (2 === 1) ? 'yes' : 'no'
'no'

See how a value is “coming out” of the expression? We can capture this value with an assignment statement.

> var a = (2 === 1) ? 'yes' : 'no'
undefined
> a
'no'

The value comes out and gets assigned into the left-hand side of the assignment statement. Sneaky! Keep this in mind when you’re toggling (updating the value) of playerTurn.

console.log !== return

It’s easy to get the behavior of the following functions confused.

function doSomething1(param1) {
  console.log(param1);
}

function doSomething2(param2) {
  return param2;
}

var result1 = doSomething1(1);
var result2 = doSomething2(2);

When we invoke doSomething1 , we see our parameter’s value (1) get logged to the console. doSomething2, however, doesn’t log anything.

Notice that the values that get stored into result1 and result2 are different as well. Since doSomething1 doesn’t explicitly return a value (notice there’s no return keyword), the value of result1 is undefined. On the other hand, result2 is set to 2. That’s because we do explicitly return a value in doSomething2.

TL;DR

  1. console.log() makes a value show up in the console when we run our program
  2. return makes a value come out of a function when we call it

Order is important

You might see that you’re correctly alternating X’s and O’x on the board, but when you make a mark which should win the game, nothing happens! Maybe your checkForWin function has a bug in it… or maybe we just need to play one more turn.

If you play another turn and then see the “Player X/O Wins!”, we just need to think about the order in which our actions should take place. We know that we start with playerTurn set to X, so we should be able to intuitively figure out that we need to place a mark on the board before we toggle to the next player’s turn.

function ticTacToe(row, column) {

  // I have to come first, BEFORE we change the value of playerTurn
  board[row][column] = playerTurn;

  // NOW we can change the value of playerTurn 
  // (I may have written this differently than you did
  // can you think of more than one way to do it?)
  playerTurn = (playerTurn === 'O' ) ? 'X' : 'O';
}
1 Like
#4

I’m using your post to show my class how to comment and upvote an answer on “Hack-Overflow”