JavaScript Doubt (Loopin through an array using a for loop)

Here is an empty paragraph in HTML, and given a id to it:

<p id="demo"></p>

In the script part, an object is created in JavaScript. An object can have a list of values, indicated by [ ] or keys and values, indicated by { } .

An object can have other objects inside. In the case of your example, myObj has 3 items, name , age and cars :

myObj = {
    "name":"John",
    "age":30,
    "cars":[ "Ford", "BMW", "Fiat" ]
};

The first two have values, the third has a list of values.

Next, a% w / w is made, where w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w

for (i = 0; i < myObj.cars.length; i++) {

The loop is composed of 3 essential expressions:

for( expressão inicial; condição para executar; operação a executar ao fim de cada iteração)

In this case, initially i . The condition for ending cars is for . Each time the content of i = 0 is executed, for increases the value of i < myObj.cars.length to { }

The expression i++ is equal to i . Curiously, if instead of 1 was i++ expression, i = i + 1 would increment from i++ to i += 7 .

If we wanted the size of i instead of 7 would be 7 instead of myObj . The cars property is the one that returns the size.

In this case, this section will be executed 3 times, with myObj.length ranging from 0 to 2.

    x += myObj.cars[i] + "<br>";

At each "loop" of the loop, we would get one of the cars, getting this value in myObj.cars.length :

Ford<br>BMW<br>Fiat<br>

Finally, the value of length would be put inside the beginning paragraph of the code:

document.getElementById("demo").innerHTML = x;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^
 aqui é pego o elemento          e o conteúdo HTML dele recebe o valor de 'x'

for (i = 0; i < myObj.cars.length; i++) {
    x += myObj.cars[i] + "<br>";
}

var myObj, i, x = "";
myObj = {
    "name":"John",
    "age":30,
    "cars":[ "Ford", "BMW", "Fiat" ]
};

for (i = 0; i < myObj.cars.length; i++) {
    x += myObj.cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

<p id="demo"></p>

<p id="demo"></p>

tag p with id #demo

var myObj, i, x = "";

initialization of variables.

myObj = {
    "name":"John",
    "age":30,
    "cars":[ "Ford", "BMW", "Fiat" ]
};

assignment of the variable myObj to a JSON object, with 3 properties: name, age and cars. being cars an array.

for (i = 0; i < myObj.cars.length; i++) {

loop through array cars.

x += myObj.cars[i] + "<br>";

concatenating in the variable x the value of the car + a tag

document.getElementById("demo").innerHTML = x;

printing the string with the cars in the HTML

But personally I would write like this:

<p id="demo"></p>

<script>
var myObj = {
  "name":"John",
  "age":30,
  "cars":[ "Ford", "BMW", "Fiat" ]
};

document.getElementById("demo").innerHTML = myObj.cars.join('<br>');
</script>

And you'd get the same result. one car underneath the other, with the line break