Si está trabajando con JavaScript, estaría escribiendo mucho código con muchas condiciones involucradas. Al principio, los condicionales pueden parecer fáciles de aprender, pero se trata de algo más que escribir algunas declaraciones if-else.
La programación orientada a objetos permite evitar condiciones y reemplazarlas con polimorfismo y herencia. Debe seguir estos principios tanto como sea posible. Pero por otro lado, puede terminar con los condicionales en su código por varias razones. El propósito de este artículo es ayudarte a organizar las declaraciones condicionales.
Consejos para escribir código con condicionales:
- Array.includes: puede usar el método array.includes() para múltiples condiciones. El método array.includes() se usa para determinar si un elemento en particular está presente en la array. Devuelve “verdadero” o “falso”
Ejemplo: El siguiente código demuestra cómo verificar si el animal es un «león» o un «perro».
JavaScript
// function
function
test(animal) {
if
(animal ==
'Lion'
|| animal ==
'dog'
) {
console.log(
'Valid'
);
}
}
// function call
test(
'dog'
);
Producción:
Valid
El código anterior parece ser fácil porque solo tiene dos animales para verificar. Sin embargo, no está seguro acerca de la entrada del usuario. ¿Qué pasa si consigues algunos animales más? Si continúa expandiendo la declaración con más declaraciones OR , el código sería más difícil de mantener y se vería muy sucio.
Puede reescribir la función para hacerla más limpia. Todo lo que necesita hacer es agregar un nuevo elemento de array si desea buscar algún otro animal.
JavaScript
function
test(animal) {
const animals = [
'dog'
,
'cat'
,
'cow'
,
'Lion'
];
// Used to check if a particular
// element is present
if
(animals.includes(animal)) {
console.log(
'valid'
);
}
}
console.log(test(
'dog'
));
Producción:
valid
Puede crear una array de animales para separar las condiciones del resto del código. Incluso puede declarar la variable fuera del alcance de la función y reutilizarla donde la necesite. Esta es una forma de escribir un código más limpio que es fácil de entender y mantener.
- Array.every & Array.algunos:
El método array.every() se usa para verificar si todos los elementos presentes en la array satisfacen la condición dada. Devuelve «verdadero» cuando cada elemento de la array satisface la condición dada; de lo contrario, devuelve «falso».
El método array.some() comprueba si alguno de los elementos de la array ha pasado la prueba de la función proporcionada. El método array.some() ejecuta la función una vez por cada elemento de la array. Comprueba si al menos uno de los elementos del arreglo cumple la condición.
Estas dos funciones de array de JavaScript se utilizan para reducir las líneas de código. Mira el código que se muestra a continuación.
JavaScript
// Array of objects
const cars = [
{ name:
'car1'
, color:
'red'
},
{ name:
'car2'
, color:
'blue'
},
{ name:
'car3'
, color:
'purple'
}
];
function
test() {
let isAllblue =
true
;
// Condition: all cars must be blue
for
(let c of cars) {
if
(!isAllblue)
break
;
isAllblue = (c.color ==
'blue'
);
}
console.log(isAllblue);
}
test();
Producción:
false
El código anterior es un poco largo. Puede reducirlo usando el método Array.every() .
JavaScript
// Array of objects
const cars = [
{ name:
'car1'
, color:
'red'
},
{ name:
'car2'
, color:
'blue'
},
{ name:
'car3'
, color:
'purple'
}
];
function
test() {
// Condition: short way
// all cars must be in blue color
const isAllblue = cars.every(
c => c.color ==
'blue'
);
console.log(isAllblue);
}
test();
Producción:
false
También puede implementarlo usando el método Array.some()
JavaScript
// Array of objects
const cars = [
{ name:
'car1'
, color:
'red'
},
{ name:
'car2'
, color:
'blue'
},
{ name:
'car3'
, color:
'purple'
}
];
function
test1() {
// Condition: if any car is in blue color
const isAnyblue = cars.some(c => c.color ==
'blue'
);
console.log(isAnyblue);
}
test1();
Producción:
true
- Return Early o Early exit: Return Early en JavaScript es una manera fácil de reducir el cuerpo de una función a cero el número de declaraciones «else». Hay muchas razones para usar Return Early en su código.
- Reduce la cantidad total de código.
- Reduce la longitud de la línea al reducir la complejidad lógica.
- Ayuda a mejorar la legibilidad.
El propósito de Return early es eliminar la necesidad de condicionales «else» en las funciones de JavaScript mediante el uso de la palabra clave «return» en la declaración «if» del cuerpo. Vamos a crear una función que se comporte de manera diferente dentro de ciertas condiciones.
Nota: A continuación se muestra el pseudocódigo de la explicación anterior.
JavaScript
function
IsRed(someObject) {
// Declare a variable to
// store the final value
var
willRed;
// Compare type of object
if
(
typeof
someObject ===
'object'
) {
// Check object color property
// is red or not
if
(someObject.color ===
'Red'
) {
willRed =
true
;
}
else
{
willRed =
false
;
}
}
else
{
willRed =
false
;
}
return
willRed;
}
Esta función es clara, pero parece ser innecesariamente complicada. El patrón Return Early se puede utilizar para aumentar la legibilidad y disminuir el número de declaraciones «else».
JavaScript
// Use return instead of else statement
function
IsRed(someObject) {
if
(
typeof
someObject !==
'object'
) {
return
false
;
}
if
(someObject.color !==
'Red'
) {
return
false
;
}
return
true
;
}
Usando el patrón Return Early, podemos eliminar todas las declaraciones «else» innecesarias y hacer que sus funciones sean mucho más claras y concisas.
También puede refactorizar esta función usando solo una declaración «si».
JavaScript
// Here you can reduce your code
function
IsRed(someObject) {
// 2 if statements replaced
// by 1 if statement
if
(
typeof
someObject !==
'object'
||
someObject.color !==
'Red'
) {
return
false
;
}
return
true
;
}
Esta función se puede refactorizar nuevamente en una sola línea de código usando un operador ternario de JavaScript.
JavaScript
function
IsRed(someObject) {
return
typeof
someObject !==
'object'
|| someObject.color !==
'Red'
?
false
:
true
;
}
Redujiste todas las declaraciones «si» anidadas al reducir las condiciones.
Nota: Siempre apunte a anidar menos y regrese temprano, pero no lo estropee. Si su código es breve y directo, y si es más claro con «si» anidados.
- Utilice objetos literales o mapas: el objeto literal es básicamente una array de pares clave:valor que se utilizan en lugar de instrucciones de cambio. Veamos el ejemplo a continuación.
JavaScript
function
printCars(color) {
// Use switch case to
// find cars by color
switch
(color) {
case
'red'
:
return
[
'Rcar1'
,
'Rcar2'
];
case
'blue'
:
return
[
'Bcar1'
,
'Bcar2'
];
case
'purple'
:
return
[
'Pcar1'
,
'Pcar2'
];
default
:
return
[];
}
}
printCars(
null
);
printCars(
'blue'
);
Producción:
[] ['Bcar1', 'Bcar2']
El código anterior se puede refactorizar utilizando el objeto literal y reemplazando la instrucción «cambiar» por completo.
JavaScript
// Use object literal to
// find cars by color
const carColor = {
red: [
'Rcar1'
,
'Rcar2'
],
blue: [
'Bcar1'
,
'Bcar2'
],
purple: [
'Pcar1'
,
'Pcar2'
]
};
function
printcars(color) {
return
carColor[color] || [];
}
console.log(printcars());
console.log(printcars(
'red'
));
console.log(printcars(
'blue'
));
Producción:
[] ['Rcar1', 'Rcar2'] ['Bcar1', 'Bcar2']
También puede usar Mapa para lograr el mismo resultado.
JavaScript
// Use map to find cars by color
const carColor =
new
Map()
.set(
'red'
, [
'Rcar1'
,
'Rcar2'
])
.set(
'blue'
, [
'Bcar1'
,
'Bcar2'
])
.set(
'purple'
, [
'Pcar1'
,
'Pcar2'
]);
function
printcars(color) {
return
carColor.get(color) || [];
}
console.log(printcars());
console.log(printcars(
'red'
));
console.log(printcars(
'blue'
));
Producción:
[] ['Rcar1', 'Rcar2'] ['Bcar1', 'Bcar2']
- Usar parámetros de función predeterminados y desestructuración: el parámetro predeterminado es una forma de establecer valores predeterminados para parámetros de función en los que no se pasa un valor, es decir, «indefinido».
JavaScript
function
check(flower, quantity) {
if
(!flower)
return
;
// If quantity not provided,
// set default to one
const a = quantity || 1;
console.log(
"I have ${a} ${flower}!"
);
}
// Results
check(
'Rose'
);
check(
'Lotus'
, 2);
Producción:
I have 1 Rose! I have 2 Lotus!
Ahora puede usar el parámetro de función para establecer el valor predeterminado
JavaScript
// If quantity not provided, parameter
// provided to set default to one
function
check(flower, quantity = 1) {
if
(!flower)
return
;
console.log(`I have ${quantity} ${flower}!`);
}
// Results
// (Default parameter is set)
check(
'Rose'
);
check(
'Lotus'
, 2);
Producción:
I have 1 Rose! I have 2 Lotus!
¿Qué sucede si la variable flor es un objeto? ¿Puedes asignarle el parámetro predeterminado?
JavaScript
function
check(flower) {
// Print flower name if
// value provided
if
(flower && flower.name) {
console.log(flower.name);
}
else
{
console.log(
'unknown'
);
}
}
// Results
check(undefined);
check({});
check({ name:
'Rose'
, color:
'red'
});
Producción:
unknown unknown Rose
En el ejemplo anterior, queremos imprimir el nombre de «flor» si está disponible; de lo contrario, imprimirá «desconocido», si no se conoce el valor. Podemos evitar los condicionales «flor» y «flor.nombre» mediante la destrucción de parámetros de función predeterminada.
La desestructuración le permite extraer propiedades de los objetos.
JavaScript
// Destructing access name property only
// assign the default empty object {}
function
check({name} = {}) {
console.log (name ||
'unknown'
);
}
// Results
check(undefined);
check({ });
check({ name:
'Rose'
, color:
'red'
});
Producción:
unknown unknown Rose
Necesitamos el nombre de la propiedad de flower , puede desestructurar ese parámetro usando {name} , luego use name como variable en su código en lugar de flower.name porque la desestructuración le permite asignar las propiedades de un objeto a las variables.
También debe asignar el objeto vacío {} como valor predeterminado. Si no lo hace, mostrará el error al ejecutar la línea «verificar (indefinido)», es decir, no puede desestructurar el nombre de propiedad de ‘indefinido’ o ‘nulo’, porque no hay ninguna propiedad de nombre en indefinido o nulo.