Correct JavaScript IF Else Syntax
I am updating an existing JavaScript application. Part of this update includes formatting things and cleaning up code.
Now it is one of the functions that used by the operator if()
and else
without the proper brackets. I hate people when people make this shorthand method, and even more so when they mix it up and use it sometimes and not others. Here's an example of this code below.
this.setFlags = function() {
if (document.documentElement)
this.dataCode = 3;
else
if (document.body && typeof document.body.scrollTop != 'undefined')
this.dataCode = 2;
else
if (this.e && this.e.pageX != 'undefined')
this.dataCode = 1;
this.initialised = true;
}
I honestly don't know how to properly add parentheses to this function, below is what I have, but I think it might be wrong. Can a JavaScript expert advise me?
this.setFlags = function() {
if (document.documentElement){
this.dataCode = 3;
}else{
if (document.body && typeof document.body.scrollTop != 'undefined'){
this.dataCode = 2;
}else{
if (this.e && this.e.pageX != 'undefined'){
this.dataCode = 1;
}
}
}
this.initialised = true;
}
source to share
I share your dislike for unlisted operators if/else
. Your bracketing seems correct to me. However, there is an easier way that is equivalent:
this.setFlags = function() {
if (document.documentElement) {
this.dataCode = 3;
} else if (document.body && typeof document.body.scrollTop != 'undefined') {
this.dataCode = 2;
} else if (this.e && this.e.pageX != 'undefined') {
this.dataCode = 1;
}
this.initialised = true;
}
As Dave Chen points out in a comment, due to the simplicity and parallelism of the branches if/else
: they all assign a value this.dataCode
- you can also use nested ternary operators:
this.setFlags = function() {
this.dataCode = document.documentElement ? 3
: document.body
&& typeof document.body.scrollTop != 'undefined' ? 2
: this.e && this.e.pageX != 'undefined' ? 1
: this.dataCode;
this.initialised = true;
}
The advantage of this is that it is clearer that all conditions simply determine which value to assign this.dataCode
. The downside (a big one in my opinion) is that unless the nested ternary operators are formatted carefully (like what I did here), it's basically impossible to figure out what's going on without looking closely at the expression. Unfortunately, most JavaScript formatters I am familiar with are very poor at formatting such expressions (or preserving such formatting). (Interestingly, some Perl forters I've used do just fine with this, but it's not Perl.)
source to share
Correct, but you can make it neater:
this.setFlags = function() {
if (document.documentElement) {
this.dataCode = 3;
} else if (document.body && typeof document.body.scrollTop != 'undefined') {
this.dataCode = 2;
} else if (this.e && this.e.pageX != 'undefined') {
this.dataCode = 1;
}
this.initialized = true;
};
Oh it's already sent
source to share