JavaScript: Un refactor a un problema de Array

JavaScript: Un refactor a un problema de Array

Refactorizando nuestra solución para ver distintas formas de resolver un problema básico de algoritmos usando JavaScript

·

2 min read

Encontré un ejercicio relativamente sencillo en la ruta de entrenamiento de JavaScript de freecodecamp. Aquí les dejo el enlace: freecodecamp.org/learn/javascript-algorithm..

Básicamente pide que a partir de un array formado por otros array se genere un array resultante en base al número mayor de cada array. De la siguiente forma:

// El problema
[
  [4, 5, 1, 3],  // Extraer el mayor 5
  [13, 27, 18, 26],  // Extraer el mayor 27
  [32, 35, 37, 39],  // Extraer el mayor 39
  [1000, 1001, 857, 1]  // Extraer el mayor 1001
]

// El resultado
[5, 27, 39, 1001] // Array formado por los números mayores

Resolviendo

Existen varios caminos para resolver el problema anterior, sin embargo mi propósito es explicar cómo a partir de una solución de alguien que aún se encuentra iniciando en JavaScript se puede llegar a optimizar bastante el código.

Solución 1:

Esto es algo que no haría. Es cierto que finalmente se llega al resultado, pero ¿es legible leer el código?. Veamos cómo podemos optimizar.

function largestOfFour(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    let mayor = arr[i][0] // Toma el primer valor de array
    for (let j = 0; j < arr[i].length; j++) {
      if (arr[i][j] > mayor) { // Compara si existe un número mayor que el primero
        mayor = arr[i][j];
      }
    }
    result.push(mayor);
  }
  return result;
}

Solución 2: El refactor

Para obtener el número mayor o menor de un array existe una función matemática en JavaScript. Exacto, hablo de Math.max o Math.min. Veamos como queda:

function largestOfFour(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    let mayor = Math.max(...arr[i]) // Buscamos el valor max en el array
    result.push(mayor);
  }
  return result;
}

¿Qué tal? ¿mejor, verdad?. Logramos quitar un loop interno y el código es mas legible. Personalmente usar un 'for of' me resulta más limpio y evita calcular 'arr.length' en la iteración. De hecho, la variable 'mayor' ya no es útil.

function largestOfFour(arr) {
  let result = [];
  for (let item of arr) {
    result.push(Math.max(...item));
  }
  return result;
}

Solución 3: El refactor del refactor

Ok, vamos un paso más. Resulta que podemos usar .map para ir recorriendo los elementos y que sólo sea tomado el mayor con Math.max.

function largestOfFour(arr) {
  return arr.map(item => Math.max(...item));
}

Eso es todo.