0
<body>
<div id="app"></div>

<script>
    const products = [
        { title: `burger`, price: 121 },
        { title: `pizza`, price: 20 },
    ];
    const app = document.getElementById(`app`);
    products.forEach(item => {
        app.innerHTML += `<li>${item.title} - ${item.price}</li>`
    })
</script>

El detalle esta en el app.innerHTML: no entiendo, ¿por qué el operador de incremento? ¡Funciona! pero por dentro ¿qué es lo que hace?

Cuando le quito el + y solo queda el = el output es "pizza - 20", cuando está como en el código, +=, el output es ya todo el objeto products en el document html: “burger - 121 y pizza - 20”

¿Esto es tipo un closure? ¿Por qué funciona así?

4
  • 2
    Te sugiero evitar hacer publicidad encubierta.
    – fredyfx
    Commented el 15 ene. 2022 a las 6:35
  • Estamos en Stack Overflow en español ;)
    – padaleiana
    Commented el 15 ene. 2022 a las 10:24
  • Y estar en Stack Overflow, ¿implica que sea mejor decir "hamburguesa" que "burguer"? ¿Y qué hacemos con pizza? ¿O el problema es "output"? Una cosa es una corrección ortográfica, que a veces la comunidad rechaza, y otra es que haya que se cambien palabras como "array" por "matriz" y cosas similares. Commented el 15 ene. 2022 a las 11:58
  • 1
    @IvanSanczewski si lees la edición de la pregunta verás a que se refieren los compañeros, nada que ver con lo que tu mencionas
    – omargt8
    Commented el 15 ene. 2022 a las 14:10

3 respuestas 3

3

El innerHTML devuelve o establece la sintaxis HTML describiendo los descendientes del elemento. Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.

En tu caso, tienes una variable que llamas app, pero esta es un elemento, dicho elemento puede ser cualquier cosa, un div, un span, un body, etc...

Lo que varía en si se pone o no el operador += o =, está en el contenido de dicho elemento.

Si deseas reemplazar lo que ya contiene ese elemento, con poner el = es suficiente, pero si lo que deseas es anexarle información al elemento, posterior a lo que ya contiene, lo haces con el +=

En realidad, el += es una abreviación a la siguiente sintaxis:

innerHTML = innerHTML + 'lo nuevo';

En otras palabras lo que puse arriba, sería exactamente lo mismo que:

innerHTML += 'Lo nuevo';

Te dejo un enlace donde puedes observar un poco lo que puedes hacer con el innerHTML

También puedes ver Expresiones y operadores

Espero te sirva, Saludos.

0
1

Iniciemos con el innerHTML, lo que hace es reemplazar el contenido del elemento que previamente defines con el document.getElementById('app'), forma tal que solo llegarías a ver lo último enviado al innerHTML, en este caso un objeto con title y price. Entonces, el forEach recorre el array y primero muestra: { title: burger', price: 121 }, Luego lo sobre escribe con: { title: pizza, price: 20 }, Mostrando solo este último.

Por otro lado es importante saber que si no se le asigna un valor, el innerHTML devuelve el valor que tiene el DIV.

Dicho esto, el += se utiliza para sumar el valor actual + lo que viene después del igual.

Ej:

 let prueba = "h"
 prueba += "ola"

Ahora prueba es "hola"

Entonces prueba += "ola" es lo mismo que prueba = prueba + "ola"

Con el innerHTML pasa lo mismo, en la primer iteración guarda el primer objeto, en la segunda iteración a eso que tenía guardado le agrega el segundo objeto, dando como resultado ambos elementos agregados al DIV.

Espero ayude a entender un poco mejor.

1

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.