I have the following code - which carries out a variety of state checks:

CheckValStates= () => {

  _stateCheck = val => {
    if (!val || val == '' ) {
      return true;
    }
    return false;
  };


if (
      this._stateCheck(this.state.arReason) ||
      this._stateCheck(this.state.handoverType) ||
      (this.state.handoverType === 'CUSTOMER' &&
        this._stateCheck(this.state.staffHandoverDeets)) ||
      (this.state.handoverType === 'GUARD' &&
        this._stateCheck(this.state.keyStatus) &&
        this._stateCheck(this.state.staticOfficerHandover))
    ) {
     return true;
    }

  return false;
  };
}

I was having issues with the following line:

(this.state.handoverType === 'GUARD' &&
        this._stateCheck(this.state.keyStatus) &&
        this._stateCheck(this.state.staticOfficerHandover))
)

Returns true if only the first 2 elements are true - the 3rd check (this._stateCheck(this.state.staticOfficerHandover)) is ignored. I was expecting all three checks to match for a true result.

If i replace that chained statement with -

if (


      this._stateCheck(this.state.arReason) ||
      this._stateCheck(this.state.handoverType) ||
      (this.state.handoverType === 'CUSTOMER' &&
        this._stateCheck(this.state.staffHandoverDeets)) ||

      (this.state.handoverType === 'GUARD' && this._stateCheck(this.state.keyStatus) || this.state.handoverType === 'GUARD' && this._stateCheck(this.state.staticOfficerHandover) )
    ) 

it carries out the check as expected. I'd like to understand why.