Cuando trabajamos con JavaScript, nos ocupamos mucho de los condicionales, aquí están los 5 consejos para que escribas condicionales mucho mejores y más limpios.
1.Usar Array.includes para Múltiples Criterios
— Echemos un vistazo al siguiente ejemplo:
// condición
function test(fruta) {
if (fruta == 'manzana' || fruta == 'fresa') {
console.log('rojo');
}
}
A primera vista, el ejemplo anterior se ve bien. Sin embargo, ¿qué pasa si obtenemos más frutos rojos, digamos Cereza y arándanos? ¿Vamos a extender la declaración con más ||?.
Podemos reescribir el condicional anterior usando Array.includes
function test(fruta) {
// extraer condiciones para el array
const frutasRojas = ['manzana', 'fresa', 'cereza', 'arandanos'];
if (frutasRojas.includes(fruta)) {
console.log('rojo');
}
}
test('manzana');
// rojo
Extraemos los frutos rojos (condiciones) a un array. Al hacer esto, el código se ve más ordenado.
2. Menos anidación
Ampliemos el ejemplo anterior para incluir dos condiciones más:
- Si no hay fruta, se produce un error de lanzamiento.
- Aceptar y mostrar la cantidad de fruta si es mayor de 10.
function test(fruta, cantidad) {
const frutasRojas = ['manzana', 'fresa', 'cereza', 'arandanos'];
// Condicion 1: la fruta debe tener valor.
if (fruta) {
// condición 2: debe ser rojo
if (frutasRojas.includes(fruta)) {
console.log('rojo');
// condición 3: debe ser mayor de 10
if (cantidad > 10) {
console.log('mayor de 10');
}
}
} else {
throw new Error('No hay frutas');
}
}
// Resultados
test(null); // error: No hay frutas
test('manzana'); // Muestra: rojo
test('manzana', 20); // Muestra: rojo, mayor de 10
Mira el código de arriba, tenemos:
- 1
if/elsedeclaración que filtra la condición inválida - 3 niveles de declaración anidada
if(condición 1, 2 y 3)
Una buena practica es retornar cuando se encuentran condiciones inválidas.
function test(fruta, cantidad) {
const frutasRojas = ['manzana', 'fresa', 'cereza', 'arandanos'];
if (!fruta) throw new Error('No hay frutas'); //Condicion 1: la fruta debe tener valor.
if (!frutasRojas.includes(fruta)) return; // condición 2: debe ser rojo
console.log('red');
// condición 3: debe ser mayor de 10
if (cantidad > 10) {
console.log('mayor de 10');
}
}
Nuestro código está ahora libre de una sentencia anidada. Esta técnica es útil cuando tenemos una larga lógica por delante y queremos detener el proceso cuando no se cumple una condición.
3. Utilice los parámetros de función por defecto
Siempre tenemos que comprobar si hay un valor nulo o indefinido null/undefined y asignar un valor por defecto cuando se trabaja con JavaScript:
function test(fruta, cantidad) {
if (!fruta) return;
const q = cantidad || 1; // si no se especifica la cantidad, por defecto es uno
console.log(`Tenemos ${q} ${fruta}`);
}
//test resultados
test('platano'); // Tenemos 1 platano
test('manzana', 2); // Tenemos 2 manzana
De hecho, podemos eliminar la variable q asignando parámetros de función por defecto.
function test(fruta, cantidad = 1) { // si no se especifica la cantidad, por defecto es uno
if (!fruta) return;
console.log(`Tenemos ${q} ${fruta}`);
}
Mucho más fácil e intuitivo, tenga en cuenta que cada parámetro puede tener su propio parámetro de función por defecto.
4. Declaración de Map, Objeto, Switch
Veamos el ejemplo de abajo, queremos imprimir frutas basadas en colores:
function test(color) {
// Usa switch para encontrar frutas por su color.
switch (color) {
case 'rojo':
return ['manzana', 'fresa'];
case 'amarillo':
return ['platano', 'piña'];
case 'purpura':
return ['uva', 'ciruela'];
default:
return [];
}
}
//test resultados
test(null); // []
test('amarillo'); // ['platano', 'piña']
El código anterior parece no tener nada de malo, pero es bastante confuso. El mismo resultado se puede lograr con un objeto literal con una sintaxis más limpia:
// usar un objeto
const colorFrutas = {
rojo: ['manzana', 'fresa'],
amarillo: ['platano', 'piña'],
purpura: ['uva', 'ciruela']
};
function test(color) {
return colorFrutas[color] || [];
}
//test resultados
test(null); // []
test('amarillo'); // ['platano', 'piña']
Alternativamente, puede utilizar Map para lograr el mismo resultado:
// usar map
const colorFrutas = new Map()
.set('rojo', ['manzana', 'fresa'])
.set('amarillo', ['platano', 'piña'])
.set('purpura', ['uva', 'ciruela']);
function test(color) {
return colorFrutas.get(color) || [];
}
//test resultados
test(null); // []
test('amarillo'); // ['platano', 'piña']
Para el ejemplo anterior, podemos refactorizar nuestro código para obtener el mismo resultado con Array.filter
const frutas = [
{ nombre: 'manzana', color: 'rojo' },
{ nombre: 'fresa', color: 'rojo' },
{ nombre: 'platano', color: 'amarillo' },
{ nombre: 'piña', color: 'amarillo' },
{ nombre: 'uva', color: 'purpura' },
{ nombre: 'ciruela', color: 'purpura' }
];
function test(color) {
// usar el filtro Array para encontrar frutas de color
return frutas.filter(f => f.color == color);
}
//test resultados
test(null); // []
test('amarillo'); // ['platano', 'piña']
? Siempre hay más de una manera de lograr el mismo resultado.
5. Array.every & Array.some
Este último consejo es más sobre la utilización de la nueva (pero no tan nueva) función Javascript Array para reducir las líneas de código.
— Array.every
const frutas = [
{ nombre: 'manzana', color: 'rojo' },
{ nombre: 'platano', color: 'amarillo' },
{ nombre: 'uva', color: 'purpura' }
];
function test() {
// condición: camino corto, todas las frutas deben ser rojas
const sonTodosRojos = frutas.every(f => f.color == 'rojo');
console.log(sonTodosRojos); // false
}
Mucho más limpio ahora. De forma similar, si queremos probar si alguna de las frutas es roja, podemos usar Array.some para conseguirlo en una sola línea.
const frutas = [
{ nombre: 'manzana', color: 'rojo' },
{ nombre: 'platano', color: 'amarillo' },
{ nombre: 'uva', color: 'purpura' }
];
function test() {
// condición: si alguna fruta es roja
const tieneRojo = frutas.some(f => f.color == 'rojo');
console.log(tieneRojo); // true
}
— Eso es todo. ¡Feliz codificación!
? Credit: Jecelyn Yeen — Source: scotch.io
