Setting a global variable prevent simple program from working properly?

Question

I tried to simplify my actual issue down to a pretty simple piece of code. I actually have the solution, but I want to understand why it works.

1. I have an array with a few values inside.
2. I have a parent container.
3. I set a global const variable with the value of $('<div class="each-container"></div>') that I want to use as each individual container for each array value.
4. Using the Array.forEach, I loop through each value in the array, and on each iteration, I want to create a div container for each value, and then input it into the .parentcontainer.

Method #1 (fail):

//code that DOES NOT WORK

const eachContainer = $('<div class="each-container"></div>');
testArr = ['This', 'is', 'just', 'a', 'test'];

//grab each array value, and wrap it in a div container, then append to parent
testArr.forEach(function(element) {

//each container should have within it a value from the array
  const completeElement = eachContainer.text(element);

//select parent element and on each iteration, add the container with it's value to the parent container  
  $('.parent').append(completeElement);
})

However, if I just remove the const variable, and replace it with the same content that I had originally set the constant variable to (ie. $('<div class="each-container"></div>')), it works fine.

Method #2 (success):

//this code WORKS

//instead of assigning the container element to a const, wrote it directly into the loop
testArr = ['This', 'is', 'just', 'a', 'test'];
testArr.forEach(function(element) {
  const completeElement = $('<div class=each-container></div>').text(element);
  $('.parent').append(completeElement);
})

So why does method #1 not work? Here is what I thought would happen:

1. During each iteration of the loop, the engine would look for eachContainer using lexical scope, find it above, and then insert the array value into the container, and then append it to the parent container.

This should happen 5x, but it only happens once, and only on the very last iteration.

Assumptions

It seems like to me that something is constantly overwriting each iteration of the loop, rather than showing me each individual value...??

Answer 1

It is overwriting each iteration because you are using the same variable (since you don't change it) outside the loop, while on the second one you created a new div on each iteration.

If you really want to make the first piece of code work, you could simply clone the const element:

const eachContainer = $('<div class="each-container"></div>');
testArr = ['This', 'is', 'just', 'a', 'test'];

//grab each array value, and wrap it in a div container, then append to parent
testArr.forEach(function(element) {

//each container should have within it a value from the array
  const completeElement = eachContainer.clone().text(element);

//select parent element and on each iteration, add the container with it's value to the parent container  
  $('.parent').append(completeElement);
})

or even create the div every time the loop happens:

testArr.forEach(function(element) {

//each container should have within it a value from the array
  eachContainer = $('<div class="each-container"></div>');
  const completeElement = eachContainer.text(element);

//select parent element and on each iteration, add the container with it's value to the parent container  
  $('.parent').append(completeElement);
})

Answer 2

The problem is that in Method #1 you are reusing the same node each iteration of the loop and changing it's text, so you are reappending the same node with a different text each time.

const eachContainer = $('<div class="each-container"></div>');
testArr = ['This', 'is', 'just', 'a', 'test'];

testArr.forEach(function(element) {

  const completeElement = eachContainer.text(element);
	
  $('.parent').append( completeElement === eachContainer );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"></div>