Evitar bucles anidados en Javascript

Bucles innecesarios!

En ocaciones tenemos dos arreglos que están relacionados de alguna forma, en este caso tenemos un arreglo de carros que tiene dos atributos, el modelo y la marca, en el segundo arreglo tenemos el precio de un carro de acuerdo a la marca.

Si necesitamos saber los precios de los carros que tenemos en el primer arreglo debemos relacionar ambos arreglos, el camino clásico es hacer dos bucles anidados como los que vemos a continuación

Y esta bien, funciona, que en primera medida es lo importante, sí contamos las iteraciones que realiza en este caso son 36. En principio puede ser algo que no afecte pero sí los dos arreglos empiezan a incrementar su tamaño podemos retrasar algunos procesos.

Uno de los métodos para reducir iteraciones es realizar las búsquedas por referencia y no una búsqueda iterativa, para tal caso debemos transformar el arreglo prices a un objeto de la siguiente forma:

Con esta reduce generamos el siguiente objeto:

Y ahora hacemos un map sobre el arreglo de cars de la siguiente forma:

Como vemos en la imagen el truco esta en la forma en que relacionamos el objeto creado con cada uno de los carros al hacer una búsqueda en un objeto por referencia o por key ya que inmediatamente identificará el valor.

Si vemos el código en la segunda opción hacemos un map y un reduce ¿Esto optimiza nuestra funcionalidad? La respuesta es SI, al no tener bucles o loops anidados se tendrán menos iteraciones. En este caso de la primera forma tenemos un total de 36 iteraciones y de la segunda forma solo 16 iteraciones, puede que no afecte en este momento el resultado pero estas dos cifras se irán separando cada vez a medida que los arreglos aumentan su tamaño.

Por ultimo les dejo el github con el código de la prueba.
https://github.com/davidyero/javascript-tips/blob/master/js-loops.js