Rendimiento al iterar en JavaScript sobre un vector

En JavaScript existen diferentes formas de iterar sobre vectores: el tradicional bucle for, el método forEach y los diferentes métodos de programación funcional (map, reduce, filter y find). Pudiéndose utilizar cualquiera de las opciones en la mayoría de las situaciones. Al emplear los métodos de programación funcional generalmente se consigue código más compacto y fácil de leer. Pero ¿es esta la opción más rápida o lo es el bucle for? Para resolver estas dudas en esta entrada se va a implementar varias soluciones a un mismo problema para comprobar el diferente rendimiento al iterar en JavaScript que se observa con cada método.

Tiempo de ejecución de un código en JavaScript

El tiempo de ejecución del código JavaScript se puede medir de diferentes maneras. Pero una de las más prácticas son las funciones console.time() y console.timeEnd(). Al utilizar la primera se inicia un contador de tiempo, mientras que la segunda finaliza y saca por pantalla el tiempo transcurrido.

Obtener el gasto de los clientes de una base de datos

Para comprobar cual de los métodos ofrece mejor rendimiento se va a calcular el gasto total de los clientes en un conjunto de datos. Para lo que se utiliza el siguiente ejemplo.

const clients_base = [
    { id: 0, units: 1, price: 4 },
    { id: 1, units: 3, price: 2 },
    { id: 2, units: 2, price: 2 },
    { id: 3, units: 5, price: 3 },
    { id: 4, units: 1, price: 4 },
    { id: 5, units: 2, price: 3 },
    { id: 6, units: 2, price: 2 },
    { id: 7, units: 5, price: 3 },
    { id: 8, units: 1, price: 4 },
    { id: 9, units: 2, price: 3 }];

let clients = JSON.parse(JSON.stringify(clients_base));

console.time('for');
let total = 0;

for (let i = 0; i < clients.length; ++i) {
    total += clients[i].units * clients[i].price;
}

console.timeEnd('for');

clients = JSON.parse(JSON.stringify(clients_base));

console.time('forEach');

total = 0;

clients.forEach(client => {
    total += client.units * client.price;
});

console.timeEnd('forEach');

clients = JSON.parse(JSON.stringify(clients_base));

console.time('reduce');

total = clients.reduce((result, client) => {
    result += client.units * client.price;
    return result;
}, 0);

console.timeEnd('reduce');

En este se puede ver que se tiene un conjunto de diez clientes que ha comprado unas unidades a un precio unitario. En las tres aproximaciones se calcula los ingresos totales midiéndose el tiempo que se tarda cada una de ellas. La primera aproximación es un bucle for clásico, en el que se guardan los valores en una variable. La segunda aproximación es con forEach() en el que se opera de manera análoga. Finalmente, se utiliza el método reduce() en el que se suma en cada paso el resultado a la variable result.

En Analytics Lane

¡Nuevo video! Aprende a seleccionar datos en Pandas con .iloc y .loc

Al ejecutar el código en un ordenador con node 11.6 se obtienen los siguientes resultados:

for: 0.015ms
forEach: 0.043ms
reduce: 0.103ms

Indicando que el método más rápido es for, seguido de forEach() y el más lento es reduce().

Obtener el gasto de cada uno de los clientes

Por otro lado, se puede utilizar los mismos datos para obtener el gasto total de cada uno de los clientes. Esto se puede hacer con el siguiente código.

const clients_base = [
    { id: 0, units: 1, price: 4 },
    { id: 1, units: 3, price: 2 },
    { id: 2, units: 2, price: 2 },
    { id: 3, units: 5, price: 3 },
    { id: 4, units: 1, price: 4 },
    { id: 5, units: 2, price: 3 },
    { id: 6, units: 2, price: 2 },
    { id: 7, units: 5, price: 3 },
    { id: 8, units: 1, price: 4 },
    { id: 9, units: 2, price: 3 }];

let clients = JSON.parse(JSON.stringify(clients_base));

console.time('for');
for (let i = 0; i < clients.length; ++i) {
    clients[i].total = clients[i].units * clients[i].price;
}
console.timeEnd('for');

clients = JSON.parse(JSON.stringify(clients_base));

console.time('forEach');

clients.forEach(client => {
    client.total = client.units * client.price;
    return client;
});

console.timeEnd('forEach');

clients = JSON.parse(JSON.stringify(clients_base));

console.time('map');

clients.map(client => {
    client.total = client.units * client.price;
    return client;
});

console.timeEnd('map');

Ejecutando el código la misma configuración que el ejemplo anterior se obtiene el siguiente resultado:

for: 0.239ms
forEach: 0.049ms
map: 0.090ms

El cual muestra un resultado completamente diferente al del caso anterior. Ahora forEach() es la mejor solución seguido de map()

Conclusiones

En esta entrada se ha visto que el rendimiento al iterar en JavaScript depende del problema. En el primer ejemplo, al sumar los valores en una nueva variable el mejor método es for. Posiblemente aquí sea más importante el hecho de tener que llamar una función cada vez que se itera sobre un elemento del array. Por otro lado, en el segundo ejemplo, el hecho de modificar el objeto original hace que sea más eficiente el método forEach(), a pesar de tener que llamar una función.

A la hora de decidirnos por cualquiera de las implementaciones no hay que tener en cuenta solamente el rendimiento, sino que la legibilidad del código es también importante. Siendo habitualmente más legible el código que se crear utilizando el paradigma de programación funcional.

¿Qué opináis vosotros? Podéis dejar vuestras opiniones en los comentarios de la entrada.

Imágenes: Pixabay (Robert Owen-Wahl)