Trying to understand logical operator (a && a === b && a === C) Used in React JS sample

Question

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.org, 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.org https://reactjs.org/tutorial/tutorial.html

Answer 1

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];
}

Answer 2

 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.

Answer 3

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 come 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 comparing each other.

Answer 4

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').

Answer 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.

Answer 6

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 outcome is true and the return value is executed ..

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

Answer 7

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.

Answer 8

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 becomes either true === baz or false === baz.

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

Answer 9

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.org/en-US/docs/Glossary/Truthy

if you change it square[a] === square[b] === square[c], then it will first compare first two and result boolean value will be compared 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.