Develop Reference

shorten if conditions in js

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.

How to return multiple functions dynamically Javascript

I apologize if I didn't ask my question in the correct way. Let me explain my problem.
I'm working on a search function in a table, I'm adding the option to search in specific columns.
Right now I'm manually checking if the checkboxes are selected or not, then return the proper search function.
However I want to make it dynamically, I don't want to edit this code after every time I add new columns to the table. That's where I'm struggling.
This is my current code:
vm.$watch('searchTerm', function (searchTerm) {
if (!searchTerm) {
vm.filteredTable = angular.copy(vm.table);
} else {
searchTerm = searchTerm.toLowerCase();
return vm.filteredTable.rows = vm.table.rows.filter(function (row) {
if (vm.searchFilter[0] === true ){
return (contains(row[vm.table.columns[0].value], searchTerm))
}
if (vm.searchFilter[1] === true ){
return (contains(row[vm.table.columns[1].value], searchTerm))
}
if (vm.searchFilter[2] === true ){
return (contains(row[vm.table.columns[2].value], searchTerm))
}
if (vm.searchFilter[3] === true ){
return (contains(row[vm.table.columns[3].value], searchTerm))
}
if (vm.searchFilter[4] === true ){
return (contains(row[vm.table.columns[4].value], searchTerm))
}
if (vm.searchFilter[5] === true ){
return (contains(row[vm.table.columns[5].value], searchTerm))
}
if (vm.searchFilter[6] === true ){
return (contains(row[vm.table.columns[6].value], searchTerm))
}
if (vm.searchFilter[7] === true ){
return (contains(row[vm.table.columns[7].value], searchTerm))
}
});
}
});
This is the way I created it, I tried to use a loop, but I can't return the functions if there is a loop. Also adding return before the for loop wont help either.
vm.$watch('searchTerm', function (searchTerm) {
if (!searchTerm) {
vm.filteredTable = angular.copy(vm.table);
} else {
searchTerm = searchTerm.toLowerCase();
return vm.filteredTable.rows = vm.table.rows.filter(function (row) {
for (let i=0; i<vm.searchFilter.length; i++){
if (vm.searchFilter[i] === true ){
return (contains(row[vm.table.columns[i].value], searchTerm))
}
}
});
}
});
This is probably a very easy case for the most of you, so I apologize if I'm just being stupid right now. I'm working since 2 hours on this till now...
EDIT:
The function I mean:
const contains = (value, searchTerm) => {
if (!value) return false;
return value.toLowerCase().includes(searchTerm);
}
2nd EDIT:
I just realized after a kind member told me that, that the first version isnt working either the way I want it.
There is the option to have a multiple selection, so if I select the first two checkboxes, then it should search in BOTH of them and not only one.

You can just iterate over the whole thing like this:
vm.$watch('searchTerm', function (searchTerm) {
if (!searchTerm) {
vm.filteredTable = angular.copy(vm.table);
} else {
searchTerm = searchTerm.toLowerCase();
return vm.filteredTable.rows = vm.table.rows.filter(row =>
vm.searchFilter.some((filter, index) => filter && contains(row[vm.table.columns[index].value])))
}
By using Array.prototype.some you essentially ask whether your row matches at least one of the filters.

I need to make it so that if parent1 !== and parent 2 is !== then it returns true, atm if either of them is !== it returns true

I'm rly sorry if I didn't ask this question in the best way etc, but I am extremely new to coding, and if you need any more info please just write
edit:
I need to make it so that if parent1 !== and parent 2 is !== then it returns true, atm if either of them is !== it returns true
var parentIsFull = function (tree, index) {
var parent1 = getParentIndex(tree, _talents[tree][index].parent1);
var parent2 = getParentIndex(tree, _talents[tree][index].parent2);
if (parent1 && (_state[tree][parent1] !== _talents[tree][parent1].ranks))
if (parent2 && (_state[tree][parent2] !== _talents[tree][parent2].ranks))
return false;
return true;
};
Update:
The suggestion by Barmar worked perfectly! So thanks a lot.

Combine the conditions with ||
if ((parent1 && (_state[tree][parent1] !== _talents[tree][parent1].ranks)) ||
(parent2 && (_state[tree][parent2] !== _talents[tree][parent2].ranks))) {
return false;
} else {
return true;
}
Also, an if/then that just returns true or false can be written just as a single return statement.
return !((parent1 && (_state[tree][parent1] !== _talents[tree][parent1].ranks)) ||
(parent2 && (_state[tree][parent2] !== _talents[tree][parent2].ranks)));

How to avoid "null" with match()

I am using a method to find Media Queries in code.
function checkMediaQueries() {
var css = cssText;
var patt1 = /#media/gi;
countMQ = css.match(patt1).length;
if (countMQ == 0) {
return false;
} else {
return true;
}
}
It all works fine when it finds some Media Queries. But when the method cant find any, it wont return anything because countMQ is null. I know the problem, but cant find a solution for it.
How can i avoid this result and make my method return false instead?
Thx for help

Remove the .length, as null has no length
var countMQ = css.match(patt1);
and check for truthy, not 0
if (countMQ) {
return true;
} else {
return false;
}
or even null, if you wan't to be more specific
if (countMQ === null) {
or simpler
function checkMediaQueries() {
return cssText.match(/#media/gi) ? true : false;
}
FIDDLE

How to use the return true/false in js

I have a function, for example check navigator params, like that :
function paramsDevice() {
if ( navigator.userAgent. etc ... ) {
return true;
} else {
return false;
}
}
how to use the return, in a other part of js code ?
if (paramsDevice == false)
not working and i have no error

In your code you are comparing undefined variable paramsDevice with the boolean false.To compare returned by paramsDevice() value try the following :
if (paramsDevice() == false)
You can also assign a variable to the result to use it in the if statement :
var paramsDevice = paramsDevice()
if (paramsDevice == false)

use === to compare with false .You can assign your function a variable.Then you can check the variable if (paramsDevice == false)
var paramsDevice = function() {
if (1 === true) {
return true;
} else {
return false;
}
};
if (paramsDevice === false) {
alert('working....');
}
WORKING Demo