shorten if conditions in js - javascript

I want to shorten the conditions of a javascript if but I don't know how I can achieve it
code:
if ((!emailValidation() || (!nameValidation()) || (!surnameValidation()) || (!addressValidation()) || (!cityValidation()) || (!postalCodeValidation()))) {
}
I have the conditions defined in this way:
let surnameValidation = () => {
if (apellidoUsuario.value.length == 0) {
surnameError();
return false;
}
else if (apellidoUsuario.value.length == 1) {
surnameError();
return false;
}
else {
apellidoUsuario.focus;
apellidoUsuario.style.border = '0';
apellidoUsuario.style.backgroundColor = 'transparent';
apellidoUsuario.style.outline = '1px solid #00ffb1'
apellidoUsuario.style.transitionDuration = '0.4s'
return true;
}
I appreciate any help! :)

You can remove all unnecessary parenthesis in your if condition:
if (
!emailValidation() ||
!nameValidation() ||
!surnameValidation() ||
!addressValidation() ||
!cityValidation() ||
!postalCodeValidation()
) {
}
Other than that, there's not really a clean, readable way to shorten your code.

Proposition #1:
I would probably get those validations into a variable or function:
validations() {
return [
emailValidation(),
nameValidation(),
surnameValidation(),
addressValidation(),
cityValidation(),
postalCodeValidation()];
}
and then I would:
if(validations().some(x=> !x)){
...
}
since validations return an array you can just use the some operator to find any invalid value.
Proposition #2:
I particularly would:
valid() {
return [
emailValidation(),
nameValidation(),
surnameValidation(),
addressValidation(),
cityValidation(),
postalCodeValidation()].every(x => x === true);
}
and then I would:
if(!valid()){
...
}
It is always cleaner to use true conditions on if statements instead of false ones.
References: Clean Code - Uncle Bob.

Related

simplify if-statement in Javascript

$scope.vergleich = function () {
if ($scope.relrechtsform.indexOf(dataService.dic.alt.rechtsformKanlei || dataService.dic.neu.rechtsformKanlei ) !== -1) {
return true
} else {
return false; }
}
}
I am currently student and intelliJ tells me I have to simplify this if-statement but I have no idea how. Maybe somebody can help me.
The simplification is probably that, if condition is a boolean, :
if (condition) {
return true;
}
else {
return false;
}
is equivalent to
return condition;
However there also seems to be a logical error in your test.
$scope.relrechtsform.indexOf(dataService.dic.alt.rechtsformKanlei ||
dataService.dic.neu.rechtsformKanlei ) !== -1
Does not mean the same thing as :
$scope.relrechtsform.indexOf(dataService.dic.alt.rechtsformKanlei) !== -1 ||
$scope.relrechtsform.indexOf(dataService.dic.neu.rechtsformKanlei) !== -1
Maybe you're looking for this:
$scope.vergleich = function () {
return $scope.relrechtsform.indexOf(dataService.dic.alt.rechtsformKanlei || dataService.dic.neu.rechtsformKanlei ) !== -1;
};
Tân's version is a correct answer to your question. However, with recent JavaScript you can simplify even more thanks to array.includes:
$scope.vergleich = () =>
$scope.relrechtsform.includes(dataService.dic.alt.rechtsformKanlei || dataService.dic.neu.rechtsformKanlei)
You can just use your condition instead of using IF else statement -:
$scope.vergleich = function () {
return ($scope.relrechtsform.indexOf(dataService.dic.alt.rechtsformKanlei ||
dataService.dic.neu.rechtsformKanlei ) !== -1);
};

Writing multiple logical operators more concisely

I'm trying to write multiple logical operators in a more concise way. In my case, I want the function to only run when all four inputs are only numbers. The only way I can think of doing this is to write them all in one if statement with &&, use multiple ifs (as below), or use switch. But I was wondering if there is a more concise way.
function fn() {
const input = display.getInput();
if (input.p !== "" && !isNaN(input.p)) {
if (input.d !== "" && !isNaN(input.d)) {
if (input.s !== "" && !isNaN(input.s)) {
if (input.y !== "" && !isNaN(input.y)) {
if (input.y <= 100) {
/* run code */
}
}
}
}
}
}
To answer exactly what you area asking, you could do it like this:
if (input.p !== "" && !isNaN(input.p) && input.d !== "" && !isNaN(input.d) ...
But in fact you should write it better. First implement a validation function:
function isValid(property) {
return property !== "" && !isNaN(property);
}
So the if would be like:
if (isValid(input.p) && isValid(input.d) && ...
And finally, you might want to put everything into a new function:
function isEverythingValid(input) {
for (let property of ["p", "d", "s", "y"]) {
if (!isValid(input[property])) {
return false;
}
}
return input.y <= 100;
}

Alternate structure for a sequence of If statements?

I'm programming a poker program in JavaScript. I have a Hand class that has the properties "cards", "value" and "valueCards". The value property is an integer that corresponds to a hand type, and the valueCards is the array of five cards that also corresponds to the hand type. For example, if my original seven cards(contained in the cards property) contains a flush, this.value will flip to 6, and this.valueCards will equal only the five cards that equal the highest flush.
I have one method for each hand type, and ALL of them change the value and valueCards if that hand type is detected. I have an accessor method for value called getValue, so when I went to make a method to run all the tests on a hand and keep the highest one, it came out looking like this:
POKER.Hand.prototype.getTrueValue = function () {
this.testStraightFlush();
if(this.value == POKER.HAND_TYPE.STRAIGHT_FLUSH){ return; }
this.testQuads();
if(this.value == POKER.HAND_TYPE.QUADS){ return; }
this.testFullHouse();
if(this.value == POKER.HAND_TYPE.FULL_HOUSE){ return; }
this.testFlush();
if(this.value == POKER.HAND_TYPE.FLUSH){ return; }
this.testStraight();
if(this.value == POKER.HAND_TYPE.STRAIGHT){ return; }
this.testTrips();
if(this.value == POKER.HAND_TYPE.TRIPS){ return; }
this.testTwoPair();
if(this.value == POKER.HAND_TYPE.TWO_PAIR){ return; }
this.testPair();
if(this.value == POKER.HAND_TYPE.PAIR){ return; }
this.getHighCards();
};
I mean, the method works fine. It just bothers me, like maybe I should be doing it a different way. Does this go against convention?
If you change your this.test* functions to return true if the "hand" is found, or return false if not - then you could do something as ugly, yet somehow satisfying, as
POKER.Hand.prototype.getTrueValue = function () {
this.testStraightFlush() ||
this.testQuads() ||
this.testFullHouse() ||
this.testFlush() ||
this.testStraight() ||
this.testTrips() ||
this.testTwoPair() ||
this.testPair() ||
this.getHighCards();
};
or
change your this.test* functions to check only if this.found is false, and set this.found = true if a hand is found, so you'd simply
POKER.Hand.prototype.getTrueValue = function () {
this.found = false;
this.testStraightFlush();
this.testQuads();
this.testFullHouse();
this.testFlush();
this.testStraight();
this.testTrips();
this.testTwoPair();
this.testPair();
this.getHighCards();
};
Not an answer but I would redesign your functions :
Each method should return the prop itself :
function testFlush ()
{
if (...) return POKER.HAND_TYPE.FLUSH;
return null;
}
function testStraightFlush()
{
if (...) return POKER.HAND_TYPE.StraightFlush;
return null;
}
This way , you'll be able to get both value and check for truness.
POKER.Hand.prototype.getValue= function ()
{
return this.testFlush () || testStraightFlush()
};
Just for the fun of it, you could redesign the tests like this:
POKER.Hand.prototype.getTrueValue = function () {
var tests = [
[ "testStraightFlush", POKER.HAND_TYPE.STRAIGHT_FLUSH ],
[ "testQuads" , POKER.HAND_TYPE.QUADS ],
[ "testFullHouse" , POKER.HAND_TYPE.FULL_HOUSE ],
... etc...
];
for (var test in tests) {
var fun = this[tests[test][0]];
var val = tests[test][1];
fun();
if (this.value == val) {
return;
}
}
this.getHighCards();
};
Or the functions might simply return a boolean, so you could have a simpler tests array
var tests = [
"testStraightFlush",
"testQuads" ,
"testFullHouse" ,
... etc...
];

JavaScript If string is equal to anything else

How do I check if a string is not equal to any of the other options? I know I can just do a simple else statement, but I'm not sure if it'll work since the code in my ifs aren't combined, yet they are just if() and else if() for its own, but then no else. How could I do a else statement/check if its anything else without using a switch/case statement?
Here's an example.
if(object1 === "string") {
function1();
}
if(object1 === "string2") {
function2();
if(object2 === "string" && variable === 10) {
function1();
}
if(object1 || object2 === "") {
alert("That's not a valid option!");
}
WARNING
I can't insert the code here as standalone or snippet, due to it exceeding the maximum character limit. I am only able to add a JSFIDDLE. Please excuse the inconvienence.
JSFIDDLE
The two main ways you can do it without if/else if/else being combined are a simple fall through
function foo(opt) {
if (opt === 'this') { return true; }
if (opt === 'that') { return 'something else'; }
/* Code here represents the case that opt is not this or that */
}
Another more complex way of doing it would be to have some kind of array of options and then checking them all but it's a bad pattern and you really should consider using if/else if/else as a combined tree (not sure you've really explained why you can't do this.
function foo(opt) {
var checked = ['this', 'that'];
if (opt === 'this') { return true; }
if (opt === 'that') { return 'something else'; }
if (checked.indexOf(opt) === -1) { return 'fall through case'; }
}
A switch is also possible but that's just a variation of a combined if/else if/else so if you can't use the latter I don't see how the former would help
Again the above is a bad pattern but if for some reason that's what you have to then there's an implementation.
Another solution would be to raise flags when going through one of the if statement, so that at the end, you can check those flags and if none are true, then you can do whatever you want.
var flag = false;
if(object1 === "string") {
function1();
flag = true;
}
if(object1 === "string2") {
function2();
flag = true;
if(object2 === "string" && variable === 10) {
function1();
flag = true;
}
if(object1 || object2 === "") {
alert("That's not a valid option!");
flag = true;
}
if(!flag) {
alert('no other options were validated');
}

Javascript function formatting

I'm concerned my if condition is not correctly formatted.
Does this look right to you?
function validateCoupon( form ){
if (form.textCoupon.value.length ){
if (form.textCoupon.value.toLowerCase() == "Item01") {
_gaq.push(['_trackEvent', 'Coupon', 'Activated', 'Item01']);
}
if (form.textCoupon.value.toLowerCase() == "Item02") {
_gaq.push(['_trackEvent', 'Coupon', 'Activated', 'Item02']);
}
$.get( "/include/checkCoupon.php", { coupon: form.textCoupon.value }, validateShipping );
}
else {
form.textCoupon.style.border = '';
validateShipping( "yes" );
}
return false;
}
Well, something appears to be a redundancy: form.textCoupon.value could be Item01 or Item02. If it's one it couldn't be the other, so I'd suggest you a switch statement.
Another problem is if you call .toLowerCase() this never will return Item01 but item01, and string equality is case-sensitive. Either call this function to both parts of condition or just don't use it.
If this were my code, this would be how I wrote it:
var validateCoupon = function (form) {
var textCoupon = form.textCoupon,
value = textCoupon.value,
track = function (value) {
_gaq.push(['_trackEvent', 'Coupon', 'Activated', value]);
};
if (value.length) {
if (value === 'Item01' || value === 'Item02') {
track(value);
}
$.get('/include/checkCoupon.php', { coupon: value }, validateShipping);
} else {
textCoupon.style.border = '';
validateShipping('yes');
}
return false;
};
Formatting of the source code is irrelevant to the JavaScript runtime. It's just a matter of personal taste.
Avoid tabs in indentation: they are not rendered identically on all platforms.

Categories

Resources