Refactor JS: for + push = map
La función Array.map devuelve el array modificado.
Hoy traigo un nuevo artículo de la serie Refactor JS, en la que intento reducir bloques de código a menos líneas. A veces quedan en una, pero no siempre es necesario alcanzar los (tan de moda) one-liners.
Es habitual trabajar con arrays de objetos: una lista de datos con los mismos atributos.
const people = [
{ name: 'Mark', id: 'X-001' },
{ name: 'Patty', id: 'X-002' },
{ name: 'L', id: 'X-003' }
];Podemos pintarlos en una tabla o presentarlos de alguna manera, pero a veces necesitaremos un único atributo de cada uno de ellos. Para cogerlo, recorremos la lista y nos quedamos con el atributo que nos interese.
const getIDs = (list) => {
const ids = []; for (let i = 0; i < list.length; i++) {
ids.push(list[i].id);
} return ids;
};console.log(getIDs(people)); // ["X-001", "X-002", "X-003"]
Esta práctica de crear una variable auxiliar a la que ir añadiendo la información que buscamos la veo habitualmente en código de juniors. No significa que esté mal, de hecho, el código cumple con la que queremos:
tener un array con los ids de todas las personas del array.
Lo más probable es que no conozcan Array.map y por eso no lo utilicen, pero su función es justamente esa: crear un array a partir de otro.
const getIDsMap = (list) => {
const ids = list.map(element => {
return element.id;
}); return ids;
};console.log(getIDsMap(people)); // ["X-001", "X-002", "X-003"]
Map funciona como un bucle for al que le pasamos una función que se ejecutará en cada iteración del bucle y que tiene que devolver algún valor (en nuestro caso, return element.id).
En el ejemplo pasaría lo siguiente:
Map crea un array vacío y empieza a iterar sobre el array original.
En la primera vuelta coge { name: ‘Mark’, id: ‘X-001’ } y mete su id en el array: [“X-001”].
En la segunda vuelta coge { name: ‘Patty’, id: ‘X-002’ } y mete su id en el array: [“X-001”, “X-002”].
En la tercera vuelta coge { name: ‘L’, id: ‘X-003’ } y mete su id en el array: [“X-001”, “X-002”, “X-003”].
Como no hay más elementos en el array original, devuelve el nuevo array.
→ Más info de Array.map en la documentación de MDN.
Por último, nos podemos ahorrar la variable auxiliar y convertir getIDsMap en una función de una línea:
const getIDsMap = (list) => list.map(e => e.id);
Ventajas de usar .map 🌍
- Menos código (pero solo una funcionalidad).
- Además, map no transforma el array original, sino que devuelve uno nuevo, manteniendo la inmutabilidad de la variable.
Ventajas de usar un bucle for 🌌
- Unificar la lógica de varios bucles en uno y hacer más de una cosa en cada iteración.
- Podemos hacer return dentro del bucle para salir de la función, no solo de esa iteración.
Recuerda
Refactorizar es satisfactorio.
Hacer una pull request con más líneas eliminadas que añadidas no tiene precio. 😍
Pero tampoco hay que pasarse. Mejor no poner nombres de variables de una letra ni intentar que cada función ocupe una línea. Siempre es preferible que el código lo entienda cualquier persona y pueda modificarlo sin dedicarle una tarde a estudiarlo.
