What does this code mean/do?

Question

Well, I’m learning to use Javascript, mainly working with index, and I always come across this, but I want to understand what each part means, because I don’t want to use it without really understanding...

var i;
for (i = 0; i < x.length; i++) {
  txt = txt + x.options[i].text + "<br>";
}

Answer 1

My suggestion is to learn to program step by step, to understand each mechanism of language, to go structurally forming its knowledge. I’ve never seen anyone (must exist somewhere) who could learn well just by reading other people’s codes. As an add-on it can be useful.

This code isn’t even very good, unless it has a bigger context, it’s still unlikely. And precisely because there is no context, we can only talk about the mechanism and not the general intention.

Variables should have their scope limited to the shortest possible stretch, in this case it is itself for, then why is the variable statement out? Unless you have some reason it seems that the person who wrote it doesn’t quite know what they are doing. Although the var does not help much, and for the scope to be really restricted should use the let (which gives some controversy because some browsers do not accept it, but I have the impression that this is so little and generates so much difficulty that for old browsers should have another version of the code anyway, or could still do a later translation with Babel.

This loop is very standard and runs through an entire array, it goes from position 0 of this array until the number before its size (if it starts from 0 the last position is the size -1, which works because the operator was used <(smaller than), then when it is equal it no longer executes). It adds one in the index in each step, such as i++, this is the same as i = i + 1 which is to take the value of i, sum 1 and save the new value in i even.

Inside the execution is to go concatenating a string at each step. It does not have the code but it should start with an empty text or a single header. The right part of the expression is what makes this concatenation, it takes the already existing value and sums it with the following rest, and stores it all in the variable itself that then has a new value that will be used in the next step. It could be written like this:

txt += x.options[i].text + "<br>";

What is being concatenated are two parts, an expression with a variable and the literal that is a tag HTML breaking the line.

The variable part is pretty weird and probably wrong, but again, no context I can’t guarantee.

When you go through the object x he is expected to be a array. And you walk in his element, something like that:

x[i]

But that’s not what’s being done. How the index is being used in options this is the array and it is he who should sweep, so it is a mistake to pick up the size of x, should take the size of x.options which is an object within the other.

Finally inside that array options has some object, which we do not know what it is, but to what all indicates one of its members (a property he has) is text and that’s what’s taking.

So this code should be something like this:

let txt = "";
for (let i = 0; i < x.options.length; i++) {
    txt += x.options[i].text + "<br>";
}

Note that by options be a array has a property called length. If this is not wrong then x also has, but is not sweeping the same object. It may even be working by coincidence, but I don’t think it even rotates.

If you want you can delete the keys since it’s just a line:

let txt = "";
for (let i = 0; i < x.options.length; i++) txt += x.options[i].text + "<br>";

The variable txt it goes off the loop even because it will probably be used off, if not then it doesn’t make sense to have it.

Remembering that only use the let if you are sure that you will not run in recent browsers or if you will do some translation to run in the old ones.

Don’t you understand everything? Probably because the foundation of each thing is missing, which is why you need to build knowledge in a structured way, one brick at a time, and starting with the foundation, going up to Rade, making the ceiling, finishing, etc. If you cannot explain on your own each individual mechanism cannot move on to the next one.

Trying to make a functional example that I think was the intention of this code that seems all wrong:

let x = document.getElementById("exemplo");
let txt = "";
for (let i = 0; i < x.options.length; i++) txt += x.options[i].text + "<br>";
console.log(txt);

<form>
  <select id="exemplo" size="4">
    <option>Facebook</option>
    <option>Twitter</option>
    <option>Linkedin</option>
    <option>Instagram</option>
  </select>
</form>

I put in the Github for future reference.