Can someone kindly, explain what the above return with example. And what happen when you change it to ( a === b ===C). Have been trying to understand that logic better in reactjs, although working well but how the logic works still not clear in my mind

Sample code copied from React tutorial

`

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],
    ];
    //alert(lines.length);
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        //alert(squares[a]);
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }
    }
    return null;
}

`

From ReactJS .html

Can someone kindly, explain what the above return with example. And what happen when you change it to ( a === b ===C). Have been trying to understand that logic better in reactjs, although working well but how the logic works still not clear in my mind

Sample code copied from React tutorial

`

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],
    ];
    //alert(lines.length);
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        //alert(squares[a]);
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }
    }
    return null;
}

`

From ReactJS https://reactjs/tutorial/tutorial.html

• javascript
• reactjs
• logical-operators

Share Improve this question Follow asked Nov 20, 2017 at 13:12 Magige DanielMagige Daniel 1,12211 gold badge1010 silver badges1010 bronze badges 3

• 1 Which part of it are you having trouble with? – Oliver Charlesworth Commented Nov 20, 2017 at 13:13
• “And what happen when you change it to ( a === b ===C)” - then it will just be nonsense that means something pletely different, and won’t achieve the same thing any more. This is really not very react-specific - basically you are trying to outsource learning some JS-basics here, so -1 for that. – C3roe Commented Nov 20, 2017 at 13:15
• if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } how is it executing? – Magige Daniel Commented Nov 20, 2017 at 13:15

Add a ment  | 

9 Answers 9

Sorted by: Reset to default 5

JavaScript's if statement (and other flow-control structures) coerce values if they're not already booleans. The line

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

is joining together three expressions with &&, which does a logical AND on them. The three expressions are:

• squares[a]
• squares[a] === squares[b]
• squares[a] === squares[c]

&& takes only two operands (the ones on either side), let's call them x and y (x && y). It evaluates x and, if that result is falsy,¹ takes that result as the && result; otherwise, it evaluates y and takes that as the && result:

let x = 0;
let y = 2;
console.log(x && y); // 0 - `x` was falsy, so that value was the result
x = 1;
console.log(x && y); // 2 - `x` was truthy, so `y` was evaluated and that value was the result

So squares[a] && squares[a] === squares[b] will be truthy if both of its operands evaluate to a truthy value, or falsy if either of them evaluates to a falsy value.

Then the result of that (let's call it r) is used in r && squares[a] === squares[c], which also is truthy if both operands have a truthy value and falsy if either of them is falsy.

Once all that is done, if coerces the truthy/falsy result to boolean (truthy => true, falsy => false) and branches into the body of the if if the condition is true.

And what happen when you change it to ( a === b ===C)

It would stop working, because a === b === C doesn't do what you think it does. It does a === b, which results in true or false (call it r), and then does r === C. Unless C is a boolean, that will be false.

---

¹ falsy - A value is falsy if it converts to false when converted to boolean. The falsy values are 0, NaN, "", null, undefined, and of course, false (bizarrely, on browsers document.all is also falsy for historical reasons — details in Chapter 17 of my book, JavaScript: The New Toys if you're interested). All other values are truthy.

squares[a] && squares[a] === squares[b] && squares[a] === squares[c]

In above statement, square[a] should be equal to square[b] and square[c] and also should be truthy value.

Truthy Values : https://developer.mozilla/en-US/docs/Glossary/Truthy

if you change it square[a] === square[b] === square[c], then it will first pare first two and result boolean value will be pared to square[c]

for example, if

square[a] = 1;
square[b] = 1;
square[c] = 1;

then first square[a] === square[b] will be evaluated which will return true. Then true === square[c] will be evaluated, which will return `false.

foo === bar === baz doesn't mean "if foo, bar, and baz are identical."

It evaluates the first part of the expression first, so think of it this way:

(foo === bar) === baz

What does foo === bar evaluate to? Either true or false. So it bees either true === baz or false === baz.

foo === bar && foo === baz, on the other hand, would mean "if foo, bar, and baz are identical."

In case if you don't have an understanding of logic gates(i.e. &&, ||) first read about them or if you know and this logic that you mention above

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

doesn't seem you easy then understand this logic then try to understand below logic it works the same as above

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

Maybe it helps.

I found it that (squares[a] && (squares[a] === squares[b]) && (squares[a] === squares[c])) this would be a good way of representing the answer that i understood.. i was anding before the equals... So when squares[a] is not null and squares[a]===squares[b] and squares[a]===squares[c] then the oute is true and the return value is executed ..

Its a bit confusing notation ..thanks to everyone for helping

var a=null, b=null ,c=null;

if(a === b && a === c)   // it gives true
    console.log("true 1 case")

if(a && a === b && a === c)
    console.log("true 2 case")

If you are using 1st condition then it gives true in all null values
so they use (a && a) because to get actual value ('X' or 'O').

If this is your first time with javascript/react, then you might have a hard time understanding the tic tac toe example like I and the author of this question was. I e from C++ and java, so naturally, the code didn't make sense at first. After an hour of trying to figure this out, this is what I had to think about to make it make sense.

The if statement is doing:

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

The first expression squares[a] is equivalent to squares[a] != null

The other 2 are just paring each other.

 for (let i = 0; i < lines.length; i++) {
   const [a, b, c, d] = lines[i];
 if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c] && squares[a] === squares[d]) {
   return squares[a];
   }
 }

The above code worked for me with a 4x4 grid for the React tutorial. Basically, I added squares[a] === squares[d]. Hope this helps somebody who is trying this tutorial out with a 4x4 grid.

first check if squares[a] is X or O. Let it is X, then check if squares[b] is X. Then check if squares[c] is X.

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