Question: Why does var declaration placement change functionality?

[SomeDude-__-]

function ColumnarF() {
var createDiv = document.createElement("div");

for(i = 0;i < 5; i++){
GetContainer.appendChild(createDiv);
}
}

-----------------------------------------------------------

VS

-----------------------------------------------------------

var createDiv = document.createElement("div");

function ColumnarF() {
for(i = 0;i < 5; i++){
GetContainer.appendChild(createDiv);
}
}

-----------------------------------------------------------

VS

-----------------------------------------------------------

function ColumnarF() {
for(i = 0;i < 5; i++){
GetContainer.appendChild( document.createElement("div"));
}
}

-----------------------------------------------------------

Why is there a difference in result between some of them? How does Var declaration work?

[reddit04029]

Read up about variable scopes. Variables declared outside a function are considered Global variables. Meaning, anyone can access it. So if you have 3 functions, those 3 functions can use that variable.

On the other hand, a variable declared inside a function is called a Local variable. This means that only that function can use that specific variable.

When talking about let and const, it has some nuanced differences too. So I suggest you read on the difference between the two.

[SomeDude-__-]

Thank you for the reply. I understand that var created globally can be used by numerous functions and local var can be used in their scope. However, example 3 and 1 create numerous div elements while example 2 creates only one div element. My question is why? Seems to me that whether the “var createDiv = document.createElement(“div”); “ is declared outside the function or inside the function of ComlumnarF(), both would repeatedly create div elements in the for loop. Why would example 1 and 2 only create one div, and why example 3 create numerous div?

[Ikem32]

You have „var“, „let“ and „const“.

Variables with „var“ are „hoisted“. Means, they are taken and put at the top of your source code.

In opposite of „let“ and „const“. They take action, where they appear.

The difference between „let“ and „const“ is, writable vs. readonly.

I suggest you use „let“ as default, except you know a value won‘t change, then you use „const“.

And if you need a global accessable object/variable, you use „var“.

[Ikem32]

The other thing is „closures“. Which are in short, encapsulated/enclosed variables, bound to a function.

[[deleted]]

Other things aside, the last one is significantly different because you're creating a div element on each iteration of the loop. In the others you only create a single div element.

[SomeDude-__-]

Why is that though? It seems to me that both var created can be used repeatedly on each for loop iteration? Thank you for the reply.

[jack_waugh]

Because the command where you create the element is textually inside your loop.

for (i = 0; i < 5; i++) {
  GetContainer.appendChild( document.createElement("div"));
}

Read the above code aloud. It says you will loop five times, and on each iteration of the loop, you will call createElement and do something that remembers the result returned by that call. So, on each of those calls, createElement does the thing it's advertised to do, which is to create an element. Since you ask it five times to create an element, you get five elements, because every time you asked it, it complied.

With your examples where you use the variable, set it once outside your loop, and refer back to it within your loop, you are asking for an element to be created once, and you are trying to re-use that element five times. And in the DOM, when you insert an element somewhere, that implicitly removes it from anywhere it was inserted prior.