How come there can be 6 different variables inside the for loop in the following javascript code?

Question

I am a beginner in javascript and I have been coding along with a youtube video to create a memory game. The instructor in the video, used the following loop to create 12 different 'img' elements. To give you a little context here, what she has been doing is creating 12(length of the array used in the for loop) image elements and appending them to a parent div element with the class name of 'grid'. So my question is,

In the following code, the loop runs 12 times and since she has typed,

var card = document.createElement('img');

shouldn't the card variable be replaced by the same 'img' element created each time the loop runs? (In other words, isn't it that what is happening here is the card variable been overwritten each time the loop runs?). But at the end, there were 12 cards created as she showed the result. How did this happen?

While there is only one variable `card` its assignement changes on each iteration. — Lain, Aug 28 '20 at 06:59
It is not because you lose the reference to a previous object, that the object stops existing. It is still there in the grid, even though `card` may not reference it any more. — trincot, Aug 28 '20 at 07:00

score 2 · Answer 1 · answered Aug 28 '20 at 07:02

It's not overwriting because each time the loop runs, a new element is created by document.createElement('img') and then set to be referenced by the card variable.

The img elements created in the previous iterations remains intact because the card variable no longer points to them, instead it points to the new element.

score 2 · Answer 2 · answered Aug 28 '20 at 07:04

var always gets hoisted to function scope. So what you are actually doing is the following:

function createBoard(){
    var card = null; //hoisted variable
    for(let i=0, i < cardArray.length; i++){
        card = document.createElement('img');
        card.setAttribute('src', 'images/blank.png');
        card.setAttribute(data-id, i);
        // card.addEventListener('click', flipCard)
        grid.appendChild(card);
    }
}
createBoard();

Each iteration you create a new img element, which gets assignet to card. By using grid.appendChild(card) you add it to the DOM. At the end of the Iteration card while hold the reference to the last created img.

If you would not append it to the DOM, you would end up with one img.

score 1 · Accepted Answer · answered Aug 28 '20 at 07:04

At the top of the loop createElement creates an element, so 12 elements are created.

At the bottom of the loop, the value of card (the element) is read and passed to appendChild.

It is important to note that it is the value of card that is used and not a reference to the card variable so changing the value of card in the next iteration does not change the element that was appended in the previous loop. JS does not have any features that allow you to reference a variable (only objects).

Balázs Fodor-Pap · Answer 4 · 2020-08-28T07:13:57.147

0

This is OK, because you create different img element in every loop but apend it as a child item of your div each time.

edited Aug 28 '20 at 07:13

answered Aug 28 '20 at 07:05

Balázs Fodor-Pap

438
1
5
16

you mean a different `img` element in the same loop, right? – Jaromanda X Aug 28 '20 at 07:07

score 0 · Answer 5 · answered Aug 28 '20 at 07:25

Before the 'img' element in the 'card' variable is overridden with a new 'img' element for every loop, it is appended as a child element to 'grid' which should be just another HTML element that will act as a parent to all these img elements being appended.

How come there can be 6 different variables inside the for loop in the following javascript code?

5 Answers5