Need help understanding React Tic Tac Toe "Winner" function

JavaScript
1

Can someone please help me understand the “Winner” helper function from the React Tic Tac Toe tutorial?

This is taken from the official React tutorial. The problem I have is understand the for loop. Thanks.

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}
2 Likes
2

Hello.

First, calculateWinner() function, declares a multidimensional array ‘lines’, that holds all the winning combinations.

Second, a ‘for’ loop iterate through all the combinations, and adds the board’s squares indexes in constants ‘a’, ‘b’ and ‘c’.

Finally, and ‘if’ conditional statement will compare the current combination of the iteration with the board’s clicked squares combinations, and if there is a match, it returns the current combination, otherwise it returns null.

This is my first time on this forum. Hope I could help you.

3 Likes
3

It didn’t help :frowning:

But I did managed to figure out while I was showering. The test is on the value or the props. If the value of a, b, c are the same, return the value of a (either X or O).

Thanks.

1 Like
4

I was confused at first too, but breaking it down everything makes sense.

See fiddle with detailed explanation: https://jsfiddle.net/nh_codes/tyck2j64/

2 Likes
5 
function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

understand what the logical operators are doing.

const [a, b, c] = lines[i];

lets us only look at winning combination lines while we start comparing Square’s values.
Square’s values can only be 'X' , 'O' , or null.
if the value can be converted to false (if the value is null) the if statement returns false.

if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
  return squares[a];
}

&& is checking for null values;
( why is && used twice ¯\_(ツ)_/¯ );
=== is comparing the values of [a] , [b] , and [c] to see if they are all 'X''s or all 'O''s;
return squares[a] can only be 'X' or 'O' after passing the if statement.

1 Like
6

but what i don’t understand is why in this line

if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {

why square[a] has to be by itself. isn’t

if (squares[a] === squares[b] && squares[a] === squares[c]) {

sufficient?

8

but isn’t null a falsy value?

10

Yeah, I basically read that in my head as “are we even dealing with a real ‘a’ here to begin with?”

If not, then there is not point to the rest of it!

11

–ok i got it all wrong

13

I was confused, i have it right now i guess :slight_smile, rereading it your explanation makes total sense.
The first a is needed, we have to test the truthness of [a] first because null==null is returning true.
Thank you!

1 Like