Los compañeros ya han explicado lo que hace el operador +=
en Javascript: simplemente concatenar. No hay más misterio en ello. Usar +=
donde sea, agrega el contenido de la derecha a la variable de la izquierda. Mientras que usar =
asigna el valor de la derecha a la variable de la izquierda, reemplazándolo.
Una vez aclarada tu duda, quiero hacer notar que en tu código deberías implementar para este caso una de las prácticas recomendadas por W3C, que consiste acceder al DOM lo menos posible. Ellos explican por qué:
Keep DOM access to a minimum
Accessing the DOM in browsers is an expensive thing to do. The DOM is
a very complex API and rendering in browsers can take up a lot of
time. You can see this when running complex web applications when your
computer is already maxed out with other work — changes take longer or
get shown half way through and so on.
To make sure that your code is fast and doesn’t slow down the browser
to a halt try to keep DOM access to a bare minimum. Instead of
constantly creating and applying elements, have a tool function that
turns a string into DOM elements and call this function at the end of
your generation process to disturb the browser rendering once rather
than continually.
Mantenga el acceso DOM al mínimo
Acceder al DOM en los navegadores es algo costoso. El DOM es una API
muy compleja y la representación en los navegadores puede llevar mucho
tiempo. Puede ver esto cuando ejecuta aplicaciones web complejas
cuando su computadora ya está al máximo con otro trabajo: los cambios
tardan más tiempo o se muestran a la mitad y así sucesivamente.
Para asegurarse de que su código sea rápido y no ralentice el
navegador, intente mantener el acceso DOM al mínimo. En lugar de crear
y aplicar elementos constantemente, tenga una función de herramienta
que convierta una cadena en elementos DOM y llame a esta función al
final de su proceso de generación para perturbar la representación del
navegador una vez en lugar de continuamente.
En tu código, se accede al DOM constantemente, modificándolo dentro de un bucle y cada acceso tiene un gran coste.
Aquí accederías N
veces al DOM, siendo N
el número de iteracciones del bucle:
app.innerHTML += `<li>${item.title} - ${item.price}</li>`
Una forma más óptima y breve sería crear una cadena con todos los elementos li
y luego agregarla, fuera del bucle, al padre (que por cierto, debería ser un elemento ul
o bien ol
, no un div
).
Pero, lo mejor para este caso sería usar createDocumentFragment()
el cual:
Crea un nuevo DocumentFragment vacío, dentro del cual un nodo del
DOM puede ser adicionado para construir un nuevo arbol DOM fuera de
pantalla.
Por decirlo en lenguaje coloquial, el DocumentFragment se crea sin molestar al DOM, con todo el coste que ello supone, agregas todo lo que necesites agregar dinámicamente y luego, una sola vez, no N
veces, agregas el DocumentFragment al DOM.
La ventaja no es solo esta, sino que ganas en seguridad. Con innerHTML
puedes recibir fácilmente inyección de código malicioso, mientras que aquí no, porque, se crean por un lado los elementos y por otro lado el contenido (que es donde te podrían insertar código) se introduce con textContent
, el cual neutraliza las etiquetas html/javascript en el código, que un usuario mal intencionado podría intentar usar para inyectar código.
Entonces, si te interesa el rendimiento y la seguridad, la práctica recomendada para tu contexto sería esta:
const products = [{
title: `burger`,
price: 121
},
{
title: `pizza`,
price: 20
},
];
var fragment = document.createDocumentFragment();
var ul = document.createElement('ul');
const app = document.getElementById(`app`);
products.forEach(item => {
var li = document.createElement('li');
li.textContent = `${item.title} - ${item.price}`;
fragment.appendChild(li);
})
ul.appendChild(fragment);
app.appendChild(ul);
<div id="app"></div>