I'm inspecting some code and I found something I'd like to run by Javascript veterans. I feel pretty comfortable with Javascript but I've always manage to run into something that makes me say, "I didn't know that about Javascript!"

I'm hoping this is one of those situations:

if (this.props.referralId != prevProps.referralId ||
    this.props.referralValidationStatus != prevProps.referralValidationStatus ||
    this.props.customerName != prevProps.customerName &&
    !!prevProps.personId != !this.props.personId) {
   // perform whatever logic is here...
}

My questions:

1. Does JS know how to automatically identify the mixture of || and &&? Or is this code missing parenthesis's around the || comparison?
2. Just as it's explained here, is it fair and should I expect the obvious behavior when comparing a boolean against a truthy/falsy value?

I'm baffled on what the logic should be here. If I were to rewrite this I would do like so:

if ((this.props.referralId !== prevProps.referralId ||
    this.props.referralValidationStatus !== prevProps.referralValidationStatus ||
    this.props.customerName !== prevProps.customerName)
    && (!!prevProps.personId === !!this.props.personId)) {
   // Perform logic
}

However, I'd like to confirm and make sure I'm not missing something I might have missed about JS.

Thank you in advance for confirming my hunch or educating my on something new when it comes to JS. Looking forward to your comments and/or answers.

CodePudding user response：

1. Like most languages, there's a precedence rule in Javascript. && are evaluated before || as you can see here. So, if you need to check all the ors and then use the final result to make the and, you are right! Use the parenthesis.

2. You are also right about the !! refactoring:

!!prevProps.personId != !this.props.personId

Is the same as:

!!prevProps.personId === !!this.props.personId

In other words it is checking if both prevProps.personId and this.props.personId has some value (evalatued to True as boolean), or if both are empty/undefined/Nan (evaluated to False as boolean).

CodePudding user response：

The first statement says (pseudocode):

if (
    //the first statement returns truthy
    this.props.referralId != prevProps.referralId

    // or the second statement returns truthy
    this.props.referralValidationStatus != prevProps.referralValidationStatus // or this returns truthy

    // or the combination of the third and fourth statements returns truthy
    this.props.customerName != prevProps.customerName 
    && 
    !!prevProps.personId != !this.props.personId
   )
   
   // then...

   {
   // perform whatever logic is here
   }

Your rewritten version says (pseudocode):

if (
    // one of these three statements is truthy
    (this.props.referralId !== prevProps.referralId ||
    this.props.referralValidationStatus !== prevProps.referralValidationStatus ||
    this.props.customerName !== prevProps.customerName)

    && // AND!

    // this statement also evaluates truthy
    (!!prevProps.personId === !!this.props.personId)
  ) 

    // then...

   {
   // perform whatever logic is here
   }

Hopefully this explains the differences between the code blocks.

@rafaelodon is otherwise correct