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

Question

In this Example below, I have more specific doubts in these lines of Code. I would like to know in detail if possible, your duties!

Doubt:

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

Example:

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

<script>

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;

</script>

</body>
</html>

Answer 1

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

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

On the part of script, in Javascript an object is created. 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.

Then is made a loop where i starts from zero and increases while it is not the element size cars (in the case, for as long as it is less than 3):

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

The for 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 the present case, initially i = 0. The condition to end the for is i < myObj.cars.length. Each time the contents of { } is executed, the i++ increases the value of i in 1

The expression i++ amounts to i = i + 1. Of curiosity, if instead of i++ were i += 7 the expression, i increment of 7 in 7.

If we wanted the size of myObj instead of cars would be myObj.length instead of myObj.cars.length. The estate length is the one that returns the size.

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

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

Every "turn" of the loop, one of the cars would be caught, getting this value in x:

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

Finally, the value of x would be placed within the paragraph of the beginning of the code:

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

Answer 2

1. Scrolls through the object’s list of items myObj, in the index cars. When you put .length is counting the number of items. In this case there are 3.

2. Lists an item of cars each time, and jumps line.

---

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>

Answer 3

<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 myObj variable to a JSON object, with 3 properties: name, age and Cars. being an array.

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

a loop by the Cars array.

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

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

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

printing the HTML string with the cars

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. a car under each other, with the line break