馃敟 JavaScript: Un refactor a un problema de Array

YersonYerson

Encontr茅 un ejercicio 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

Existen varios caminos para resolver el problema, sin embargo mi prop贸sito es explicar c贸mo a partir de una soluci贸n inicial se puede llegar a optimizar el c贸digo.

Soluci贸n 1:

Vemos que es un array de array, la idea inicial es hacer una primera iteraci贸n para recorrer el array general y luego realizar una segunda iteraci贸n para el array interior. Esto es algo que no har铆a pero 驴es legible leer el c贸digo?.

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 existe una funci贸n matem谩tica en JavaScript. Math.max o Math.min nos permite obtener el n煤mero m谩ximo o m铆nimo respectivamente. 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 la iteraci贸n interna 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. Reemplazamos for por for of y quitamos 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 en lugar de usar for o for of podemos usar map para ir recorriendo los elementos. Con ello evitamos usar la variable result que lo 煤nico que hace es almacenar la respuesta. Por defecto map retorna un array de elementos luego de transformar los elementos de la iteraci贸n.

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