属性被标记为未定义，即使它在同一行上被完美使用？

Question

in javascript, editing in Visual Studio Code, running on Google Chrome

if ((piece == null || piece.color !== us)) 

The above line runs property with no issues, however, when I change it to this:

if ((piece == null || piece.color !== us) && piece.color !== UNION) 

or change this:

if (piece.color == null || piece.color == swap_color(us))

I get the following error:

Uncaught TypeError: Cannot read property 'color' of undefined

Why do I get the error in the second case, yet the first case included that same property?

EDIT

I've been reading these answers on short circuiting, but it's not clicking, can someone help me form a boolean expression? Basically, piece.color could be one of three cases

• null
• us
• them (which is the same as swap_color(us)
• UNION

I want to run

continue;

in situations when (piece.color == null || piece.color == swap_color(us)) and when piece.color !== UNION

Hence my erroneous first attempt

Answer 1

Why do I get the error in the second case, yet the first case included that same property?

Boolean operators are short circuiting . That means for

• a || b a || b : b is only evaluated if a is false
• a && b : b is only evaluated if a is true

So, piece.color !== us is only executed if piece == null is false , ie piece is not null or undefined . That means accessing piece.color will always "work" (it won't throw an error).

On the other hand, piece.color !== UNION is executed if piece == null is true . What you wrote basically means "if piece is null and piece.color is not UNION . That doesn't make much sense though (because piece being null implies that piece.color doesn't exist).

---

I want to run continue; in situations when (piece.color == null || piece.color == swap_color(us)) and when piece.color !== UNION

The "and" in this sentence translates to a boolean OR. But you still have to check that piece is not null and you can simplify the the expression because piece.color !== UNION implies piece.color == swap_color(us) .

if (piece == null || piece.color !== UNION) {
  continue;
}

Answer 2

If piece is null then piece == null || piece.color !== us)) piece == null || piece.color !== us)) will be true without checking piece.color !== us , so piece.color !== UNION will be evaluated but because piece is null piece.color is undefined.

Your logic is faulty in this way. So faulty in fact that I'm not sure what you mean. It would seem that you mean; what do you want to happen if piece is null?

Answer 3

This happens because of something called short-circuit evaluation :

Let's assume piece == null : in the first case, the compiler only needs to evaluate the left side of the or . Upon getting true , it can skip the right side, since the entire expression will be true anyway.

In the second case, the left expression evaluates to true like above, but then the compiler attempts to evaluate the right side, since an and demands both sides to be true . That's where it encounters the non-existing property.

Try this:

if (piece === null || (piece && piece.color && piece.color !== us && piece.color !== UNION)