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