Chaining If conditions with && operator

Question

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.

That would imply an issues with the && operator which is very unlikely. How do you know that the third operand is not evaluated? And/or that the condition resulted in true? — Felix Kling
– Felix Kling, Commented Apr 8, 2022 at 15:47

user15568835 · Accepted Answer · 2022-08-02 10:38:28Z

1

I think that your function _stateCheck is not perfect : some values can cause problem.

stateCheck(null) // true
stateCheck(undefined) // true
stateCheck("") // true
stateCheck({}) // false
stateCheck([]) // true  - possible problem
stateCheck(true) // false
stateCheck(false) // true - possible problem
stateCheck(0) // true - possible problem
stateCheck(-10) // false
stateCheck(10) // false

If this.state.staticOfficerHandover was a problematic value, stateCheck will send true

Example:

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


const state = {
    handoverType: "GUARD",
    keyStatus : "",
    staticOfficerHandover: true,
}

const condition = (state.handoverType === 'GUARD' &&
 stateCheck(state.keyStatus) &&
 stateCheck(state.staticOfficerHandover)
 )
console.log(condition); // false

state.staticOfficerHandover = false;
const condition2 = (state.handoverType === 'GUARD' &&
 stateCheck(state.keyStatus) &&
 stateCheck(state.staticOfficerHandover)
 )
 console.log(condition2); // true

answered Aug 2, 2022 at 10:38

user15568835

Sign up to request clarification or add additional context in comments.

1 Comment

Dancer Over a year ago

Sorry - just seen this @n4n5 - grteat answer - thank you. I'll trace through all code checksand alter. thanks for your help/.

Collectives™ on Stack Overflow

Chaining If conditions with && operator

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related