Constant used within repeat loop

Question

const body = document.querySelector("body");
const divElement = document.createElement("div");

divElement.setAttribute("id", "resultado");
body.appendChild(divElement);

for(i = 1; i <= 20; i++) {
    const textElement = document.createElement("p");
    textElement.innerHTML = "Resultado: " + i;
    divElement.append(textElement);
}

What happens exactly inside the for with the const textElement? (The code works normally, but I was wondering what’s going on over there with that constant)

• A array with 20 positions (textElement[1], textElement[2]... textElement[n])?
• To constante is superscripted?
• A new value is obtained for each loop?
• If it is none of the above causes, what happens then?

References: Alura, Wiki

Answer 1

Create an array with 20 positions (textElement1, textElement2... textElement[n])?

No, you must be confusing what this object is. It is a manipulator of the GIFT, even is the GIFT, so it has a form to refer to an element of the GIFT, only this, has not array or any other value of your code. We can say that it is a kind of proxy to the gift.

The constant is superscripted?

In each execution a new constant object is created, the constant is the same. Read this to understand it better.

A new value is obtained for each loop?

Yes, of course it may be the same value, but a new object.

If it is none of the above causes, what happens then?

The problem of how to manipulate the DOM is engine of Javascript. At the time you use innerHTML something will happen in the DOM, but it’s not your problem. When he picks up a new object he will present the state of the GIFT at the time including what has already been changed. The GIFT is obviously mutable. You do not have access to it directly, only through these manipulative objects, it is implementation detail.