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/else declaració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