I have conditionals like this:
if (foo == 'fgfg' || foo == 'asdf' || foo == 'adsfasdf') {
// do stuff
}
Surely there's a faster way to write this?
Thanks.
You might consider a switch-case statement
switch(foo) {
case "fgfg":
case "asdf":
case "adsfasdf":
// ...
}
It's not really any shorter, but could be more readable depending on how many conditions you use.
I would keep the conditionals the way they are. Any clever way of shortening them would make the code less idiomatic and less readable.
Now, if you do care about readability, you could define a function to do the comparison:
if( foo_satisfies_condition(foo) ) {
// ...
}
Or:
if( is_month_name(foo) {
// ...
}
If you give the function a name that faithfully describes what it does, it will be easier to understand the intent of the code.
How you implement that function would depend on how many comparisons you need. If you have a really large number of strings you're comparing against, you could use a hash. The implementation details are irrelevant when reading the calling code, though.
if (/^(fgfg|asdf|adsfasdf)$/.test(foo)) {
or:
if (["fgfg", "asdf", "adsfasdf"].indexOf(foo) != -1) {
Cross-browser support for Array.indexOf is still limited. Also, these are faster to write, probably not faster to run.
No need for using indexOf or a regex if you just use a hash table:
var things = { 'fgfg' : 1, 'asdf' : 1, 'asdfasdf' : 1 };
if ( things[foo] ) {
...
}
Here's a easy way:
String.prototype.testList = function(lst) {
lst = lst.split('|');
for(var i=0; i<lst.length; i++){
if (this == lst[i]) return true;
}
return false;
};
To use this function, you can just do this:
if (foo.testList('fgfg|asdf|adsfasdf')) {
You can also rename testList to whatever you want, and change the delimiter from | to anything you want.
Depending on the situation you could do..
//At some point in your code
var vals = new Array('fgfg', 'asdf', 'adsfasdf');
//...
if(vals.indexOf(foo) >= 0)
Ternary operator looks good if you like and has else
Use tilde (~) for a shorter expression
if (~["fgfg", "asdf", "adsfasdf"].indexOf(foo)) {
//do stuff
}
Related
If if statement could be avoided it is considered a good practice.
For example this code:
if (a > 80) {
a = 80;
}
Can become this:
a = Math.min(80, a);
That way the code is considered cleaner because there is no branch logic.
But is there any way to avoid if for more complex problems like this:
if (array.length > 5) {
array = array.reverse().join('');
} else {
array = 'array is lte 5';
}
If array length is > 5 then reverse it and join it, otherwise return "array is lte 5".
This is simple example but more complex than the first example and it's hard to remove if.
How mathematics handle branches and is it possible to express this logic in mathematics.
I can extract it to a separate method but it will only move the if statement in the method itself, it will not remove it.
I can imagine I can use some functions from Ramdajs but i didn't find appropriate one and even if I find one the if will be there i guess - it will be only abstracted.
Also imagine this sudo code:
if (file_exists(file)) {
content = file_read(file);
if (content.startsWith('config')) {
ret = 'config:';
} else if (content.endsWith(':app')) {
ret = ':app';
}
} else {
ret = '';
}
This code has only 2 if statements but already is a nightmare to read and change.
Is it possible to use mathematic and/or express it more clearly avoiding branches.
I know in mathematics there is no "read file" but it was just an example.
Thank you
One approach would be to put the thing you need to operate on in a "box" on which you apply a series of operations (i.e. functions). This forces you to remove any nested conditions.
This pseudo-code:
if (file_exists(file)) {
content = file_read(file);
if (content.startsWith('config')) {
ret = 'config:';
} else if (content.endsWith(':app')) {
ret = ':app';
}
} else {
ret = '';
}
could be replaced with:
const ret =
[file]
.map(x => file_exists(x) ? file_read(x) : '')
.map(x => x.startsWith('config') ? 'config:' : x)
.map(x => x.endsWith(':app') ? ':app' : x)
.pop();
Note that the above could we converted using function composition:
const ret =
pipe(
ifElse(file_exists, file_read, always('')),
when(startsWith('config'), always('config:')),
when(endsWith(':app'), always(':app')))
(file)
Of course one could argue that you execute unnecessary checks but unless a performance issue has been identified, I'd always favour readability over anything else.
Can we improve readability here? We certainly can try:
const ret =
[file]
.map(load_file_content)
.map(when_starts_with('config'))
.map(when_ends_with(':app'))
.pop();
Or
const ret =
pipe(
load_file_content,
when_starts_with('config'),
when_ends_with(':app'))
(file)
I find this readable but others may not so 🤷♂️
Besides the ternary operator (which probably isn't gonna make things more legible), have you considered early returns?
if (!file_exists(file)) {
return '';
}
content = file_read(file);
if (content.startsWith('config')) {
return 'config:';
}
if (content.endsWith(':app')) {
return ':app';
}
return ...;
There's still gonna be just as much branching logic behind the scenes, but this way you can logically unentangle semantically different code blocks from each other.
I know that this may sound stupid but I was wondering if this code could be written in a shorter version:
if (this.myVeryLongName.aRandomProperty === 'property_1' || this.myVeryLongName.aRandomProperty === 'property_1' || this.myVeryLongName.aRandomProperty === 'property_1') {
//do something
}
maybe something like this:
if (this.myVeryLongName.aRandomProperty === ('property_1' || 'property_1' || 'property_1')) {
//do something
}
Is any way to make it short and still have same functionality?
You can make an array and use includes, like:
if ( ['property_1','property_2','property_3'].includes( this.myVeryLongName.aRandomProperty ) ) {
//do something
}
Doc: includes
Potentially even better option (than the one I posted in a comment)
switch(this.myVeryLongName.aRandomProperty) {
case 'property_1':
case 'property_2':
case 'property_3':
doSomethingHere();
break;
// if you have more cases, add them here!
}
Notice how this is much more easily readable, and extendable in future if needs change.
There's a variety of ways to do this:
['property_1','property_2','property_3'].includes( this.myVeryLongName.aRandomProperty )
(ES 2016)
['property_1','property_2','property_3'].indexOf( this.myVeryLongName.aRandomProperty ) !== -1
(ES 5)
/^(?:property_1|property_2|property_3)$/.test( this.myVeryLongName.aRandomProperty )
(Any JS version)
I want to extend the number class to have instance functions such as odd and even so I can do something like this:
2.odd() => false
2.even() => true
1.even() => false
1.odd() => true
Extending classes is a good Ruby practise: "Ruby check if even number, float".
Is the same true in JavaScript, or does it cause performance issues or some other problem?
Anyway, I can't extend despite my best efforts:
var NumberInstanceExtensions = {
accuracy: function(){
return 'This is cool ' + this
}
}
$.extend(Number.prototype,NumberInstanceExtensions);
alert( $.type(5) ); //-> number
//alert( 5.accuracy() ); //-> Uncaught SyntaxError: Unexpected token ILLEGAL
http://jsfiddle.net/VLPTb/2/
How can I get this to work? The syntax error makes me think this isn't how JavaScript works on a fundamental level. Is my best bet extending the Math class and doing this instead:
Math.odd(2) => false
Math.even(2) => true
Math.even(1) => false
Math.odd(1) => true
That seems far more inelegant than 2.odd().
I think as long as you understand the side-effects of your "extension" then you're okay. I often modify the String prototype to add an "elipsis" method so I can do things like
"SomeString".elipsis()
But start at the beginning. You're not "extending classes" in JavaScript. JavaScript is a prototype-based language. You can modify prototypes to do what you need.
You won't be able to add a method directly to the number itself. You can, however modify the prototype of the Number object:
Number.prototype.even = function(){
return this.valueOf() % 2 === 0;
}
With this, you won't be able to use the following syntax:
10.even();
But, since you aren't hard-coding stuff, otherwise you wouldn't need this function anyways, you CAN do the following:
var a = 10;
a.even(); //true
I might say that you could consider adding a utilities object to do these things, because modifying primitive prototypes is not always guaranteed to be side-effect free.
This function does not really provide any gain for you. You're checking for odd and even, replacing one line of code with another. Think about the difference:
var a = 10;
var aIsEven = a.even();
vs:
var a = 10;
var aIsEven = a % 2 === 0;
You gain three characters of code, and the second option is less likely to break your "JavaScript".
You can extend natives JS objects by using (for example) Number.prototype.myFn = function(){}.
So you could do :
Math.prototype.odd = function(n){
return n % 2 === 0;
};
Math.prototype.even = function(n){
return n % 2 === 1;
};
And then use it like so :
var two = 2;
console.log(Math.odd(2)); // true
BUT I would strongly advise you against extending natives in JavaScript.
You can read more about it here
EDIT : After trying my code on JSFiddle, it appears the Math object has no prototype, you can read more about it here. The code above won't work !
Instead, you could do :
Math.odd = function(n){
return n % 2 === 0;
};
Math.even = function(n){
return n % 2 === 1;
};
console.log(Math.odd(2)); // true
or :
Number.prototype.odd = function(){
return this % 2 === 0;
};
Number.prototype.even = function(){
return this % 2 === 1;
};
console.log(new Number(2).odd()); // true
I'd like to point out that that is already available in the numbers class.
Just use the boolean methods, odd? and even?
2.odd?
=> false
2.even?
=> true
Hope this helps.
No need to create a new class, it already exists in the numbers class.
I have the following function:
var chr = function(X) {
return String.fromCharCode(X)
}
But I would like to use i.chr() instead of chr(i).
Q: How do I add chr() to the number prototype?
Number.prototype.chr = function() {
return String.fromCharCode(this);
}
var n = 33;
console.log(n.chr());
http://jsfiddle.net/CXWeV/
Also, as Bryan points out, the following will work:
console.log((33).chr());
console.log(Number(33).chr());
But, the following does not work:
33.chr();
EDIT: Although, as Gumbo points out, this does:
33..chr();
As well as a check if the property already exists (see Erik's answer for another way to check):
if (!Number.prototype.chr) {
Number.prototype.chr = function() {
return String.fromCharCode(this);
}
}
if (!Number.prototype.hasOwnProperty('chr')) {
Number.prototype.chr = function() {
return String.fromCharCode(this);
};
}
To use this the number must be in a variable or wrapped in parentheses. Be aware that converting a scalar number to a Number object (called boxing) has an overhead. If you are doing the conversion repeatedly on the same value, you'll want to explicitly convert it to an object first with Number().
Note that simply doing String.fromCharCode might be easier or more clear in some situations.
The normal way, really. Note the importance of surrounding the number in parentheses (or storing it in a variable), as a dot would normally indicate a decimal point:
Number.prototype.chr = function () {
return String.fromCharCode(this);
}
alert((97).chr()); // alerts "a"
I'm not sure whether this works in all browsers, but I'm assuming it does.
Interactive Example
Say, I want to see if a DOM element is a block. I can write it in three ways, depending on my mood:
// first way
if (el.currentStyle.display == "block" || el.currentStyle.display == "inline-block" || el.currentStyle.display == "table-cell")
// second way
var blocks = {"block": 1, "inline-block": 1, "table-cell": 1};
if (el.currentStyle.display in blocks)//
// third way
if (el.currentStyle.display.match(/block|inline-block|table-cell/))
I have mixed feeling about all of them. First is too verbose once I have more than one option. Second contains those arbitrary values in the object (where I put 1s this time). Third looks like overkill. (What exactly is bad about overkilling?)
Do you know another, better way? If no, any cons I am missing about these three ways?
Javascript only, please.
I like the third way; I don't think it looks like overkill at all. If you need an even shorter way then this works too:
el.currentStyle.display.match(/(e-)?(block|cell)/)
But that's not very readable...
It might be worth abstracting it all away by extending the String prototype:
String.prototype.matches = function(what) {
return (',' + what + ',').indexOf(',' + this + ',') > -1;
};
// Using it:
el.currentStyle.display.matches('block,inline-block,table-cell');
If we're primarily aiming for readability, and if this is happening more than once -- perhaps even if it is just once -- I'd move the test to a function. Then define that function whichever way you like -- probably option 1, for max simplicity there.
Overkill? Possibly. But a gift to the programmer who wants to scan and understand the code 6 months from now. Probably you :-)
function isBlock(el) {
return (el.currentStyle.display == "block" ||
el.currentStyle.display == "inline-block" ||
el.currentStyle.display == "table-cell");
}
// ...
if (isBlock(el)) {
// do something
}
Can't you use the 2nd way but check if it's undefined and then skip the ": 1" part. I haven't tested though.
It looks like you need an inArray function, here is one from the top search result:
Array.prototype.inArray = function (value) {
var i;
for (i=0; i < this.length; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};
Then the forth way would look like this:
if (['block','inline-block','table-cell'].inArray(el.currentStyle.display))
Or in a more readable manner:
var isBlock = ['block','inline-block','table-cell'].inArray(el.currentStyle.display);
My prefered solution for this is:
'block||inline-block||table-cell'.indexOf( el.currentStyle.display ) >= 0
I think that this will use native code of the string and be way more efficient than the array & iteration method.